iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0

接續前面的曾說過的Mvp、Mvc架構,今天來講講成為近幾年成為主流的Mvvm架構。

簡述

M:Model,表執行邏輯。V:View,表畫面(XML、Activity)、VM:ViewModel,表追蹤View的邏輯運算,觀察者模式(ViewModel.Class

比起MVP、MVC在Model獲得資料後需要通知View更新UI,這樣Model就需要知道View是誰,而MVVM是透過觀察者模式,觀察資料的變更,以自動進行UI的更新,這樣MVVM中的ViewModel就不需要要知道View是誰,透過ViewModel資料的變更,View被動的更新UI,等於少了許多控制UI的程式碼,ViewModel只需要專心處裡其流程就行了。
圖示

觀察者模式

可根據資料變化對UI同步進行更動,需寫觀察observe()。

LiveData

LiveData 可以監聽數值內容變化的元件,通常與 ViewModel搭配使用,與Lifecycle绑定,並與觀察者的生命週期同步。LiveData在其生命週期是活躍(onStart 和 onResume) 的時可進行資料更新,否則不會接收資料。

優點:

  • UI 與及時與數據一同更新:觀察者模式的目的。
  • 可以節省不必要的資源浪費:當 Activity或Fragment 不在活躍時期時是接收不到有關 LiveData 的事件。
  • 避免了內存泄露:因為 LiveData是跟隨生命週期存活何接收資訊的,所以當 Activity 銷毀時(onDestory),LiveData 也會隨之被銷毀。

範例

  • Model
public class Model {
    //處理邏輯運算,拿資料打api等
    ...
}

public interface ModelCallBack{
    //傳回ViewModel
    void getPostProgress();
    void getPostCallBack(Post post);
    void getPostComplete();
    void getPostError();
}
  • ViewModel
  1. 需繼承extends androidx.lifecycle.ViewModel
public class MyViewModel extends androidx.lifecycle.ViewModel {
    ...
}
  1. 加入MutableLiveData(LiveData)
private Model model = new Model();

public final MutableLiveData<Post> postMutableLiveData = new MutableLiveData<>();

public final MutableLiveData<Boolean> isShowDialog= new MutableLiveData<>();
    
  1. 呼叫Model取值,並於CallBack對MutableLiveData設值
private Model model = new Model();

public final MutableLiveData<Post> postMutableLiveData = new MutableLiveData<>();

public final MutableLiveData<Boolean> isShowDialog= new MutableLiveData<>();
    
public void goToViewModelGetPost(){
        //呼叫Model取值
        model.getPost(new Model.ModelCallBack() {
            @Override
            public void getPostProgress() {
                //MutableLiveData設值
                isShowDialog.setValue(true);
            }

            @Override
            public void getPostCallBack(Post post) {
                //MutableLiveData設值
                postMutableLiveData.setValue(post);
            }

            @Override
            public void getPostComplete() {
                //MutableLiveData設值
                isShowDialog.setValue(false);
            }

            @Override
            public void getPostError() {
                //MutableLiveData設值
                isShowDialog.setValue(false);
            }
        });
    }
  • View(Activity、Fragment)
  1. 獲取ViewModel
//獲取ViewModel
myViewModel = new ViewModelProvider(this).get(MyViewModel.class);
  1. 建立觀察者
myViewModel.postMutableLiveData.observe(this,new Observer<Post>() {
        @Override
        public void onChanged(Post post) {
            //觀察到變化後,更新UI
            userId_txt.setText(String.valueOf(post.getUserId()));
            id_txt.setText(String.valueOf(post.getId()));
            title_txt.setText(post.getTitle());
            body_txt.setText(post.getText());
        }
    });

以上就是Mvvm建立的過程,我個人認為真的要實際操作之後才能體會到Mvvm的強大之處,建議各位可以實做看看,LivaData的觀念也會在時過的過程中變得更深刻唷。


上一篇
精華筆記 Day28 - DataBinding
下一篇
精華筆記 Day30 - 心得
系列文
android studio 30天 精華筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言