Android：ViewModel

什么是 ViewModel

ViewModel 旨在以注重生命周期的方式存储和管理界面相关数据。ViewModel 让数据可在发生屏幕旋转等配置更改后继续留存。

上面一段话是截取自官方文档对 ViewModel 的定义。ViewModel 是管理、存储数据的，并且屏幕发生旋转等行为之后，数据依旧保留。

ViewModel 的生命周期

学习 ViewModel 也必须要了解它到底能存活多久？下图可知，ViewModel 会从 Activity 创建之初，直到这个 Activity 被销毁为止。

ViewModel 使用场景

使用过 Vue 框架的人肯定有 VueX（Pinia）——状态管理的使用经验，组件与组件之间可以层层往下传递数据，而有时候子组件往上传递数据也有些麻烦，倒不如使用状态管理，也就是说，把这些共用的数据放在一个“地方”，让所有组件都可以访问到的一个容器。

其实，ViewModel 也可以这样来理解。一定要清楚，一个 Activity 就是一个页面，页面与页面之间不可能通过 ViewModel 来共享数据，使用场景比如：日期选择器（Fragment）选择完之后，日期数据要返回到 Activity 页面上，这个时候就可以借助于 ViewModel 来做。ViewModel 相当于 Activity 与 Fragment 之间的通信桥梁。

创建 ViewModel 类

实现一个继承 ViewModel 的子类：TimePickerViewModel。里面只来存储日期选择器选择之后保存的日期数据，类型为 MutableLiveData，其泛型是 String。在获取这个 dateValue 之前，要做一个非空判断。设置日期数据必须要调用 MutableLiveData 提供的setValue，否则不起效果。

public class TimePickerViewModel extends ViewModel {
  private MutableLiveData<String> dateValue;

  public LiveData<String> getDateValue() {
    if (dateValue == null) {
      dateValue = new MutableLiveData<>();
    }
    return dateValue;
  }

  public void setDateValue(String dateValue) {
    this.dateValue.setValue(dateValue);
  }
}

UI 界面

<TextView
  android:id="@+id/time_picker_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="未选择日期" />

<TextView
  android:id="@+id/time_picker_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="选择日期" />

点击选择日期文本之后，触发点击事件，打开日期选择器。下面是点击文本之后，日期选择器的代码：

public class TimePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {

  @NonNull
  @Override
  public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
    final Calendar c = Calendar.getInstance();
    int year = c.get(Calendar.YEAR);
    int month = c.get(Calendar.MONTH);
    int day = c.get(Calendar.DAY_OF_MONTH);
    return new DatePickerDialog(getActivity(), this, year, month + 1, day);
  }

  @Override
  public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
    TimePickerViewModel vm = new ViewModelProvider(requireActivity()).get(TimePickerViewModel.class);
    vm.setDateValue(i + "-" + i1 + "-" + i2);
  }
}

当选择日期成功之后，触发onDateSet，该函数中调用 ViewModelProvider 以修改 TimePickerViewModel 的字段。ViewModelProvider 需要获取 Activity 的实例，可以通过requireActivity()或者getActivity()来获取。

MainActivity

MainActivity 实现 OnClickListener 接口，这样做的好处就是添加多个事件监听都不需要 new OnClickListener 接口，直接给 setOnClickListener() 函数提供 this：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.time_picker_btn).setOnClickListener(this);
  }

  @Override
  public void onClick(View view) {
    // 1. 实例化 TimePickerFragment
    TimePickerFragment timePicker = new TimePickerFragment();
    // 2. 显示日期选择器
    timePicker.show(getSupportFragmentManager(), "datePicker");
    // 3. 获取 TextView，展示的数据放在这里
    TextView textview = findViewById(R.id.time_picker_text);
    // 4. 观察 ViewModel 数据变化以更新 UI
    TimePickerViewModel timePickerVM = new ViewModelProvider(this).get(TimePickerViewModel.class);
    // 5. 观察数据变化
    timePickerVM.getDateValue().observe(this, e -> {
      // 6. 数据变化，把新的日期展示到 TextView 中
      textview.setText(timePickerVM.getDateValue().getValue());
    });
  }
}

1. 实例化 TimePickerFragment，构造日期选择器；
2. 获取 TimePickerViewModel 对象，并观察数据是否发生变化；
3. 如果数据发生变化，就把最新的日期显示到 TextView 上。

GitHub 仓库地址：Chap02-ViewModel