MVC vs. MVP vs. MVVM on Android

在过去的几年里，将Android应用程序转变成逻辑组件的方法已经逐渐成熟。很大程度上摆脱了MVC模式，转而采用更模块化、可测试的模式。

Model View Presenter (MVP) & Model View ViewModel (MVVM)是最广泛被采用的两种替代方案。本文不去讨论哪种方式更适合于Android应用开发，只是通过案例来看到每种模式是如何编写的。

本文通过实现一个井字游戏，分别通过MVC、MVP、MVVM三种模式实现游戏效果。源代码已经上传到Github仓库中。

井字游戏效果图.png

MVC

Model, View, Controller将应用程序在宏观层面分为3中职责。

Model

Model模型是应用程序中的数据+状态+业务逻辑。可以说是应用程序的大脑，不受View视图和Controller控制器的束缚，因此很多情况下是可以复用的。

View

View视图是Model的展现，负责呈现UI并在用户与应用程序交互时与Controller通信。在MVC架构中，视图通常很“愚蠢”，因为他们不了解底层模型，也没有对状态的理解，或者当用户通过单击按钮，键入值等进行交互时要做什么。这个想法是越少他们知道他们对模型的耦合越松散，因此他们要改变的就越灵活。

Controller

Controller是将app粘在一起的胶水，它是应用程序中的主控制器。当View告诉Controller用户单击按钮时，Controller决定如何与Model进行相应的交互。根据Model中的数据更改， Controller可以根据需要更新View的状态。在Android应用程序中，Controller几乎总是由Activity或Fragment来担任的。

这就是我们的井字游戏中每个类扮演的角色

mvc模型角色图.png

让我们更详细地检查Controller。

public class MVCTicTacToeActivity extends AppCompatActivity {
    private static String TAG = MVCTicTacToeActivity.class.getName();

    private Board model;

    private ViewGroup buttonGrid;
    private View winnerPlayerViewGroup;
    private TextView winnerPlayerLabel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mvc_tictactoe);
        winnerPlayerLabel = (TextView) findViewById(R.id.winnerPlayerLabel);
        winnerPlayerViewGroup = findViewById(R.id.winnerPlayerViewGroup);
        buttonGrid = (ViewGroup) findViewById(R.id.buttonGrid);

        model = new Board();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_tictactoe, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_reset:
                reset();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

    public void onCellClicked(View v) {

        Button button = (Button) v;

        String tag = button.getTag().toString();
        int row = Integer.valueOf(tag.substring(0,1));
        int col = Integer.valueOf(tag.substring(1,2));
        Log.i(TAG, "Click Row: [" + row + "," + col + "]");

        Player playerThatMoved = model.mark(row, col);

        if(playerThatMoved != null) {
            button.setText(playerThatMoved.toString());
            if (model.getWinner() != null) {
                winnerPlayerLabel.setText(playerThatMoved.toString());
                winnerPlayerViewGroup.setVisibility(View.VISIBLE);
            }
        }

    }

    private void reset() {
        winnerPlayerViewGroup.setVisibility(View.GONE);
        winnerPlayerLabel.setText("");

        model.restart();

        for( int i = 0; i < buttonGrid.getChildCount(); i++ ) {
            ((Button) buttonGrid.getChildAt(i)).setText("");
        }
    }
}

评估

MVC在分离模型和视图方面做得很好。当然，该模型可以很容易地进行测试，因为它不依赖于任何东西，并且视图在单元测试级别上没有什么可测试的。然而，控制器有一些问题。

Controller关注

• 可测试性 - Controller与Android API紧密联系，难以进行单元测试。
• 模块化和灵活性 - Controller与View紧密耦合。它也可能是View的扩展。如果我们更改View，我们必须返回并更改Controller。
• 维护 - 随着时间的推移，越来越多的代码开始转移到Controller中，使它们变得臃肿和脆弱。

我们如何解决这个问题？MVP来拯救！

MVP

MVP将Controller断开，以便自然View/Activity耦合可以发生，而不会与其他“Controller”责任相关联。让我们再次从MVC对比开始。

Model

与MVC相同/无变化

View

这里唯一的变化是Activity/Fragment现在被视为View的一部分。让Activity实现一个视图界面，以便Presnenter有一个可以编码的界面。这消除了将它耦合到任何特定的页面，并允许使用视图的mock实现进行简单的单元测试。

Presenter

这实质上是MVC的Controller，除了它完全不依赖于View，只是一个接口。这解决了可测试性问题以及我们在MVC中遇到的模块化/灵活性问题。实际上，MVP纯粹主义者认为Presenter不应该对任何Android API或代码有任何引用。

我们再来看看在我们的应用程序中在MVP中的分解。

mvp模型角色图.png

在下面更详细地看看Presenter，你会注意到的第一件事是每个动作的意图是多么简单和清晰。它不是告诉View如何显示某些东西，而只是告诉它要显示什么。

public class TicTacToePresenter implements Presenter {
    private TicTacToeView view;
    private Board model;

    public TicTacToePresenter(TicTacToeView view){
        this.view = view;
    }

    @Override
    public void onCreate() {
        model = new Board();
    }

    @Override
    public void onPause() {

    }

    @Override
    public void onResume() {

    }

    @Override
    public void onDestroy() {

    }


    public void onButtonSelected(int row, int col) {
        Player playerThatMoved = model.mark(row, col);

        if(playerThatMoved != null) {
            view.setButtonText(row, col, playerThatMoved.toString());

            if (model.getWinner() != null) {
                view.showWinner(playerThatMoved.toString());
            }
        }
    }

    public void onResetSelected() {
        view.clearWinnerDisplay();
        view.clearButtons();
        model.restart();
    }
}

为了在不将Activity与Presenter绑定的情况下进行这项工作，我们创建了一个Activity实现的接口。在测试中，我们将基于此接口创建一个mock来测试与Presenter和View的交互。

public interface TicTacToeView {
    void showWinner(String winnerLabel);
    void clearWinnerDisplay();
    void clearButtons();
    void setButtonText(int row,int col,String text);
}

评估

我们可以很容易地对Presenter逻辑进行单元测试，因为它没有绑定到任何Android特定的View和API，并且只要View实现*TicTacToeView*界面，我们也可以使用任何其他View。

Presenter的关注

• 维护 - 与Controller一样，Presenter随着时间的推移，倾向于收集额外的业务逻辑。在某些时候，开发者经常会发现自己拥有难以分开的笨重的Presenter。

当然，开发人员可以谨慎的防止这种情况发生。但是，MVVM可以更好的解决这个问题。

MVVM

Android上具有数据绑定功能的 MVVM具有易于测试和模块化的优点，同时还减少了我们必须编写的连接View +Model的代码数量。

我们来看看MVVM的各个部分。

Model

与MVC相同/无变化

View

该View以一种灵活的方式绑定到由viewModel来监控可观察的变量和操作。

ViewModel

ViewModel负责包装Model并准备View所需的可观察数据。它还为View提供了将事件传递给Model的hocks。然而，ViewModel并不依赖于View。

我们的程序早MVVM模式中分解。

mvvm模型角色图.png

让我们仔细看看这里的代码，从ViewModel开始。

public class TicTacToeViewModel implements ViewModel {
    private Board model;
    public final ObservableArrayMap<String,String> cells = new ObservableArrayMap<>();
    public final ObservableField<String> winner = new ObservableField<>();

    public TicTacToeViewModel(){
        model = new Board();
    }

    @Override
    public void onCreate() {

    }

    @Override
    public void onPause() {

    }

    @Override
    public void onResume() {

    }

    @Override
    public void onDestroy() {

    }

    public void onResetClick(){
        model.restart();
        winner.set(null);
        cells.clear();
    }

    public void onCellClick(int row, int col){
        Player player = model.mark(row,col);
        cells.put(""+row+col,player == null?null:player.toString());
        winner.set(model.getWinner()==null?null:model.getWinner().toString());
    }
}

查看xml文件，看看这些变量和事件是如何绑定的。

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.view.View" />
        <variable
            name="player"
            type="com.shijc.mvx.mvvm.viewmodel.TicTacToeViewModel"/>
    </data>

    <LinearLayout
        android:id="@+id/tictactoe"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context="com.acme.tictactoe.view.TicTacToeActivity">

        <GridLayout
            android:id="@+id/buttonGrid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:columnCount="3"
            android:rowCount="3">

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,0)}"
                android:text='@{player.cells["00"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,1)}"
                android:text='@{player.cells["01"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(0,2)}"
                android:text='@{player.cells["02"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,0)}"
                android:text='@{player.cells["10"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,1)}"
                android:text='@{player.cells["11"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(1,2)}"
                android:text='@{player.cells["12"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,0)}"
                android:text='@{player.cells["20"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,1)}"
                android:text='@{player.cells["21"]}' />

            <Button
                style="@style/tictactoebutton"
                android:onClick="@{() -> player.onCellClick(2,2)}"
                android:text='@{player.cells["22"]}' />

        </GridLayout>


        <LinearLayout
            android:id="@+id/winnerPlayerViewGroup"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="@{player.winner == null ? View.GONE:View.VISIBLE}"
            tools:visibility="visible">

            <TextView
                android:id="@+id/winnerPlayerLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:textSize="40sp"
                android:text="@{player.winner}"
                tools:text="X" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Winner"
                android:textSize="30sp" />

        </LinearLayout>

    </LinearLayout>

</layout>

评估

单元测试现在更容易，因为你真的不依赖于View。测试时，您只需要验证Model更改时是否正确设置了可观察变量。没有必要mock测试View，因为有MVP模式。

MVVM关注

• 维护 - 由于View可以绑定到变量和表达式，因此无关的表示逻辑可能会随着时间的推移而变动，从而有效地将代码添加到我们的XML中。为了避免这种情况，总是直接从ViewModel获取值，而不是试图在视图绑定表达式中计算或派生它们。这样计算可以适当地进行单元测试。

结论

MVP和MVVM在将应用程序分解为模块化单一用途组件方面比MVC做得更好，但它们也增加了应用程序的复杂性。对于只有一个或两个屏幕的非常简单的应用程序，MVC可能工作得很好。带有数据绑定的MVVM具有吸引力，因为它遵循更加反应式的编程模型，并且生成的代码更少。

如果您有兴趣在实践中看到MVP和MVVM的更多示例，我鼓励您查看Google Architecture Blueprints项目。还有很多博客文章深入探讨这几种模式

参考

https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-on-android

源码地址

本文作者： shijiacheng
本文链接： http://shijiacheng.studio/2018/07/01/mvx/
版权声明： 转载请注明出处！