Android MVVM架构计数器应用示例教程

Beantwortet mit GPT-4o-mini von Java Q&A Hub

Frage:

给我一个Android中使用mvvm的demo示例

Antwort:

当然可以！下面是一个简单的 Android MVVM 示例，使用 Kotlin 和 Android Jetpack 组件（如 LiveData 和 ViewModel）。这个示例展示了如何使用 MVVM 架构来构建一个简单的计数器应用。

1. 创建项目

首先，创建一个新的 Android 项目，选择 "Empty Activity" 模板。

2. 添加依赖

在 build.gradle 文件中添加必要的依赖项：

dependencies {
    implementation "androidx.appcompat:appcompat:1.3.1"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.4.0"
    implementation "androidx.constraintlayout:constraintlayout:2.1.0"
}

3. 创建 ViewModel

创建一个新的 Kotlin 类 CounterViewModel.kt，用于管理计数器的状态。

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class CounterViewModel : ViewModel() {
    private val _count = MutableLiveData<Int>().apply { value = 0 }
    val count: LiveData<Int> get() = _count

    fun increment() {
        _count.value = (_count.value ?: 0) + 1
    }

    fun decrement() {
        _count.value = (_count.value ?: 0) - 1
    }
}

4. 创建布局文件

在 res/layout/activity_main.xml 中，创建一个简单的用户界面：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textViewCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonIncrement"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonIncrement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Increment"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewCount" />

    <Button
        android:id="@+id/buttonDecrement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Decrement"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonIncrement" />

</androidx.constraintlayout.widget.ConstraintLayout>

5. 创建 MainActivity

在 MainActivity.kt 中，设置 ViewModel 和 UI 之间的绑定：

import android.os.Bundle
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Observer
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val viewModel: CounterViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 观察计数器的变化
        viewModel.count.observe(this, Observer { count ->
            textViewCount.text = count.toString()
        })

        // 设置按钮点击事件
        buttonIncrement.setOnClickListener {
            viewModel.increment()
        }

        buttonDecrement.setOnClickListener {
            viewModel.decrement()
        }
    }
}

6. 运行应用

现在，你可以运行这个应用。你会看到一个简单的计数器，点击 "Increment" 按钮会增加计数，点击 "Decrement" 按钮会减少计数。

总结

这个示例展示了如何使用 MVVM 架构来管理 UI 逻辑和数据。ViewModel 负责处理数据逻辑，而 Activity 负责 UI 交互。通过 LiveData，UI 可以自动更新，而不需要手动管理状态。希望这个示例对你有帮助！

Related