MVP+Databinding模式开发APP（一）

前言：本文适合了解入门MVP和Databinding的小伙伴们。小伙伴可能有疑问，为什么要用MVP+Databinding，因为我觉得MVP的三层非常的完美，Persenter层彻底的把Model层和View层分离，这样代码看起来整体的结构非常的清晰易懂，再结合Databinding减去findViewbyId的操作，这样代码看起来更舒服了，阅读性更高。

什么是MVC？
Model：从网络上获取的数据、数据库等数据结构
View：XML
Controller：Activity/Fragment。不仅需要设置数据、展示数据还得处理用户的事件逻辑、再与Model交互。这样在复杂逻辑的页面下Acitvity或Fragment十分的臃肿，并且耦合太高，不利用后期的维护。

什么是MVP？
MVP是MVC的升级，MVP把MVC的Model层和Controller层分离，达到解耦的目的，并且减轻了Activity\Fragment压力，把所有的业务逻辑交给P层处理。View层只负责界面展示。代码结构会变成异常的清晰，维护成本大大降低。

效果图

首先来看下包结构

首先搭建主UI界面，采用Activity嵌套4个Fragment（HomeFragment、CameraFragment、FilesFragment、MeFragment），在HomeFragment下面嵌套ViewPager每个page为一个Fragment分别为（SquareFragment、NewFragment、NearbyFragment）。

先看看公共接口类，用于存放View、Model、Persenter层的接口。把他们的接口放在一起可以减少创建类文件

布局 activity_main

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            ></FrameLayout>

        <RadioGroup
            android:id="@+id/rg_main"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_home"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:button="@null"
                android:gravity="center"
                android:padding="5dp"
                android:drawableTop="@drawable/tab_discover"
                android:text="发现"
                android:checked="true"
                />

            <RadioButton
                android:id="@+id/rb_camrea"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:button="@null"
                android:gravity="center"
                android:padding="5dp"
                android:drawableTop="@drawable/tab_camera"
                android:text="相机"/>
            <RadioButton
                android:id="@+id/rb_files"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:button="@null"
                android:gravity="center"
                android:padding="5dp"
                android:drawableTop="@drawable/tab_gallery"
                android:text="本地"/>
            <RadioButton
                android:id="@+id/rb_me"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:padding="5dp"
                android:layout_height="match_parent"
                android:button="@null"
                android:gravity="center"
                android:drawableTop="@drawable/tab_me"
                android:text="我"/>
        </RadioGroup>
    </LinearLayout>
</layout>

大家仔细看布局，根节点换成了layout，如果想使用databinding加载布局或者设置数据必须改成layout根节点。
布局比较简单，主UI下面是个按钮采用RadioGroup+RadioButton的来完成，这样的好处是可以减少处理一些setChecked()事件。代码看起来更优雅些。有些喜欢用TextView来做这个tab页签的虽然可以，但是并不合理。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_discover_icon" android:state_checked="true"/>
    <item android:drawable="@drawable/tab_discover_icon_normal" android:state_checked="false"/>
</selector>

drawableTop图片用selector状态选择器完成根据点击事件自己自动改变
在这里只粘贴一个了。

来看看MainActivity对应的接口

public class MainContract {
    public interface IMainView {
        //显示主页页签
        void showHome();
        //显示相机页签
        void showCamera();
        //显示本地页签
        void showGallery();
        //显示我页签
        void showkMe();
        //隐藏某个页签
        void hideFragments(FragmentTransaction transaction);
    }

    public interface IMainPresenter {
        //点击主页页签
        void clickHome();
        //点击相机页签
        void clickCamera();
        //点击本地页签
        void clickGallery();
        //点击我页签
        void clickMe();
    }

}

可以看到有View、Presenter的接口，因为UI框架不需要访问网络就没有model。
咋们看看view的方法名：showXXX()和hideXXXX()，看方法名称就能知道view层只负责界面的展示，并有业务逻辑方法。咋们再看看Presenter层：p层的方法都是clickXXX()用户事件的处理逻辑。所以view层只负责用户的界面展示，所有的逻辑都交给了Persenter层处理，减轻了V层的压力。

MainActivity的代码

public class MainActivity extends BaseActivity implements MainContract.IMainView {

    private ActivityMainBinding mainBinding;
    private HomeFragment homeFragment;
    private CameraFragment cameraFragment;
    private FilesFragment filesFragment;
    private MeFragment meFragment;
    private MainPresenter mainPresenter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    //binding的命名规则为：布局文件名+binding,所以就.是：ActivityMainBinding 
    //如果想使用databinding加载布局或者设置数据必须改成layout根节点
        mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        super.onCreate(savedInstanceState);
    }

    @Override
    public void init() {
    //初始化MainActivity对应的Persenter
        mainPresenter = new MainPresenter(this);
    }


    @Override
    public void initData() {
        //默认加载第一页
        mainPresenter.clickHome();
    }

    @Override
    public void setListener() {
        mainBinding.rgMain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.rb_home:
                    //在P层处理用户事件
                        mainPresenter.clickHome();
                        break;
                    case R.id.rb_camrea:
                    //在P层处理用户事件
                        mainPresenter.clickCamera();
                        break;
                    case R.id.rb_files:
                    //在P层处理用户事件
                        mainPresenter.clickGallery();
                        break;
                    case R.id.rb_me:
                    //在P层处理用户事件
                        mainPresenter.clickMe();
                        break;
                }
            }
        });
    }
    @Override
    public void setting() {
    }

    @Override
    public void showHome() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager()
                .beginTransaction();
        hideFragments(fragmentTransaction);
        if (homeFragment == null) {
            homeFragment = new HomeFragment();
            fragmentTransaction.add(R.id.content, homeFragment);
            fragmentTransaction.commit();
        } else {
            fragmentTransaction.show(homeFragment);
            fragmentTransaction.commit();
        }
    }
    @Override
    public void showCamera() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager()
                .beginTransaction();
        hideFragments(fragmentTransaction);
        if (cameraFragment == null) {
            cameraFragment = new CameraFragment();
            fragmentTransaction.add(R.id.content, cameraFragment);
            fragmentTransaction.commit();
        } else {
            fragmentTransaction.show(cameraFragment);
            fragmentTransaction.commit();
            //cameraFragment.updateCamera();
        }
    }
    @Override
    public void showGallery() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager()
                .beginTransaction();
        hideFragments(fragmentTransaction);
        if (filesFragment == null) {
            filesFragment = new FilesFragment();
            fragmentTransaction.add(R.id.content, filesFragment);
            fragmentTransaction.commit();
        } else {
            fragmentTransaction.show(filesFragment);
            fragmentTransaction.commit();
        }
    }
    @Override
    public void showMe() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager()
                .beginTransaction();
        hideFragments(fragmentTransaction);
        if (meFragment == null) {
            meFragment = new MeFragment();
            fragmentTransaction.add(R.id.content, meFragment);
            fragmentTransaction.commit();
        } else {
            fragmentTransaction.show(meFragment);
            fragmentTransaction.commit();
        }
    }

    public void hideFragments(FragmentTransaction transaction) {
        if (homeFragment != null) {
            transaction.hide(homeFragment);
        }
        if (cameraFragment != null) {
            transaction.hide(cameraFragment);
        }
        if (filesFragment != null) {
            transaction.hide(filesFragment);
        }
        if (meFragment != null) {
            transaction.hide(meFragment);
        }
    }
}

Activity去除了findViewbyId的操作，使的代码简洁了很多。使用mainbinding获得控件，只要控件设置id名称就能自动生成binding使用的变量名。
android:id=”@+id/rg_main” 自动生成“rgMain”

public abstract class BaseActivity extends FragmentActivity {
    ...
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext =this;
        init();
        initData();
        setListener();
        setting();
    }
    //初始化一些对象或者属性
    public abstract void init();
    //初始化数据
    public abstract void initData();
    //设置监听事件
    public abstract void setListener();
    //后续一些参数的设置
    public abstract void setting();

    ...
}

MainActivity继承至封装好的BaseActivity和实现view层的接口重写下面的方法。

public class MainPresenter implements MainContract.IMainPresenter {


    private final MainContract.IMainView iMainView;
//构造方法传入view接口，P层于View层的交互用接口来进行
    public MainPresenter(MainContract.IMainView iMainView){
        this.iMainView =iMainView;
    }

    @Override
    public void clickHome() {
        iMainView.showkHome();
    }

    @Override
    public void clickCamera() {
        iMainView.showCamera();
    }

    @Override
    public void clickGallery() {
        iMainView.showGallery();

    }

    @Override
    public void clickMe() {
        iMainView.showkMe();

    }
}

可以看到在MainPresenter处理所有的用户事件，也就是业务逻辑。因为构建UI不需要访问网络，所以没有Model。这实现了底部的页签了。下面来实现HomeFragment下的三个页签。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
   >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@android:color/black"
            >
            <RadioGroup
                android:id="@+id/rg_homeTabGroup"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_gravity="center|center_vertical"
                >
                <RadioButton
                    android:id="@+id/radio_square"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="30dp"
                    android:button="@null"
                    android:text="大厅"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:checked="true"
                  android:textColor="@drawable/selector_tab_color_changer"
                    android:background="@drawable/selector_square_changer"
                    />
                <RadioButton
                    android:id="@+id/radio_news"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="30dp"
                    android:button="@null"
                    android:text="最新"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:textColor="@drawable/selector_tab_color_changer"
                    android:background="@drawable/selector_news_changer"
                    />

                <RadioButton
                    android:id="@+id/radio_nearby"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="30dp"
                    android:button="@null"
                    android:text="地图"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:textColor="@drawable/selector_tab_color_changer"
                    android:background="@drawable/selector_nearby_changer"
                    />


            </RadioGroup>

        </FrameLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        </android.support.v4.view.ViewPager>

    </LinearLayout>
</layout>

public class HomeContract {
    public interface IHomeView {
        //显示大厅Fragment
        void showSquare();
        //显示最新Fragment
        void showNew();
        //显示地图Fragment
        void showNearby();
        //切换页签
        void tabChanger(int position);

    }

    public interface IHomePresenter {
        void clickSquare();

        void clickNew();

        void clickNearby();

        void tabChanger(int position);
    }
}

public class HomeFragment extends BaseFragment implements HomeContract.IHomeView{

    private ActivityHomeBinding homeBinding;
    private SquareFragment squareFragment;
    private NewFragment newFragment;
    private NearbyFragment nearbyFragment;
    private HomePresenter homePresenter;
    private View rootView;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//databinding也有对应的填充View的方法
        homeBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_home,container,false);
        rootView = homeBinding.getRoot();
        init();
        initData();
        setListener();
        return rootView;
    }

    @Override
    public void init() {
    //初始化Persenter
        homePresenter = new HomePresenter(this);
    }

    @Override
    public void initData() {
    //初始化三个页签对应的Fragment。提供给Viewpager加载。
        List<Fragment> fragments=new ArrayList<>();
        fragments.add(new SquareFragment());
        fragments.add(new NewFragment());
        fragments.add(new NearbyFragment());
        CommFragmentPagerAdapter pagerAdapter=new CommFragmentPagerAdapter(getFragmentManager(), fragments);
        homeBinding.vpContent.setAdapter(pagerAdapter);
    }

    @Override
    public void setListener() {
    //点击顶部tab时切换
        homeBinding.rgHomeTabGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.radio_square:
                        homePresenter.clickSquare();
                        break;
                    case R.id.radio_news:
                        homePresenter.clickNew();
                        break;
                    case R.id.radio_nearby:
                        homePresenter.clickNearby();
                        break;
                }
            }
        });

//滑动Viewpager时顶部页签做出相应的改变
        homeBinding.vpContent.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                homePresenter.tabChanger(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }


    @Override
    public void showSquare() {
        homeBinding.vpContent.setCurrentItem(0);
    }

    @Override
    public void showNew() {
        homeBinding.vpContent.setCurrentItem(1);
    }

    @Override
    public void showNearby() {
        homeBinding.vpContent.setCurrentItem(2);
    }

    @Override
    public void tabChanger(int position) {
        switch (position){
            case 0:
                homeBinding.radioSquare.setChecked(true);
                break;
            case 1:
                homeBinding.radioNews.setChecked(true);
                break;
            case 2:
                homeBinding.radioNearby.setChecked(true);
                break;
        }
    }
}

public class HomePresenter implements HomeContract.IHomePresenter {

    private final HomeContract.IHomeView iHomeView;

    public HomePresenter(HomeContract.IHomeView iHomeView){
        this.iHomeView =iHomeView;

    }
    @Override
    public void clickSquare() {
        iHomeView.showSquare();
    }

    @Override
    public void clickNew() {
        iHomeView.showNew();
    }

    @Override
    public void clickNearby() {
        iHomeView.showNearby();
    }

    @Override
    public void tabChanger(int position) {
        iHomeView.tabChanger(position);
    }

}

大家看到代码比较简单。跟MainActivity几乎一样。只是把databinding的填充方法DataBindingUtil.setContentView()换成了DataBindingUtil.inflate().
这UI就全部完成啦。

因为UI框架不需要访问网络所以没有用到Model，所以未能完全的体现MVP的价值。
MVP+Databinding模式开发APP（二）