【Android】ViewModel+LiveData：更加直接地控制視圖的方式

目錄

• LiveData
  • 前言
  • 使用ViewModel+LiveData
    • Step 1：創建繼承自ViewModel類的子類。
    • Step 2：創建實例並綁定，為LiveData創建Ovserve方法
    • Step 3：運行結果

LiveData

前言

  ViewModel通過將UI data保存在ViewModel類實例的內部，從而大大地將MVC中的 Controller 與 View 分割開，並且通過ViewModel，我們可以較為方便地解決Activity生命周期發生改變（比如由屏幕旋轉引起的生命周期重建）時，UI data的保存以及重現問題。
  下圖展示了MVC中Controller與View的關系。簡而言之就是，Controller負責處理UI data，通過reference傳遞給ViewGroup。

  在使用了ViewModel后，Controller與View的關系大致可以用下圖中的左半部分表示：

  雖然將UI data交給ViewModel保存處理的方式解決了生命周期變化的問題，但我們仍需要通過Controller傳遞UI data給View。LiveData的出現，進一步地降低了Controller與View之間地耦合。通過LiveData我們可以不使用Controller，直接將LiveData數據傳遞給View。如上圖右半部分所示。

使用ViewModel+LiveData

  在本例中，我們通過ViewModel+LiveData控制視圖中的一個點贊圖形，點擊點贊圖形，視圖中的TextView的值便會加一。

Step 1：創建繼承自ViewModel類的子類。

package com.hello.livedatatest;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class MyViewModel extends ViewModel {
	/*  MutableLiveData為一種容器，需要按照以下方法創建 */
    private MutableLiveData<Integer> thumbup;
    
    /* MutableLiveData中地數據無法直接賦值，需通過setValue或getaValue賦值或取值 */
    /* 獲取thumbup的值 */
    public MutableLiveData<Integer> getThumbup() {
        if (thumbup==null){
            thumbup = new MutableLiveData<>();
            thumbup.setValue(0);
        }
        return thumbup;
    }
    /* thumbup值加一 */
    public MutableLiveData<Integer> setThumbup(){
        thumbup .setValue(thumbup.getValue()+1);
        return thumbup;
    }
}

Step 2：創建實例並綁定，為LiveData創建Ovserve方法

package com.hello.livedatatest;
import androidx.appcompat.app.AppCompatActivity;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProvider;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
/* 引入ViewModelProviders類，注意同時引入該類所需依賴 */
import androidx.lifecycle.ViewModelProviders;

public class MainActivity extends AppCompatActivity {
    /* 創建實例 */
    MyViewModel myViewModel;
    ImageView imageView;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.imageView);
        textView = findViewById(R.id.textView);
        myViewModel = ViewModelProviders.of(this).get(MyViewModel.class);
        /* 為ViewModel中的thumbup數據設置observe，observe的功能為：
            檢測數值變化，在底層數據庫更改時通知視圖 */
        myViewModel.getThumbup().observe(this, new Observer<Integer>() {
            @Override
            public void onChanged(Integer integer) {
                textView.setText(String.valueOf(integer));
            }
        });
        /* 為imageView設置onClick功能，每次點擊，使TextView數值加一 */
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViewModel.setThumbup();
            }
        });
    }
}

Step 3：運行結果

  如下圖所示，可正常運行。