自定义FlexibleLayout动态加载页面布局实现title与content分离

之前也看过一些关于加载状态的文章，可以通过提前配置页面加载的loading，error以及empty布局来显示相应的布局，不过需要在每个布局文件中进行定义，然后findviewbyid，觉得比较麻烦，而且认为一个好的产品的UI设计对于大部分的UI风格应该是一致的，类似于京东跟淘宝，所以loading，error以及empty相关的View应该都是基本一致的，所以就打算换一种思路来实现一个FlexibleLayout，不需要改变程序的布局文件，并且可以实现标题和内容进行分离，在程序异常的时候也能够让用户知道当前是关于哪个界面的，效果图如下：

效果图

需要实现的小目标

1. 自定义一个ViewGroup,然后里面承载所有的布局,然后根据状态返回相应的布局；
2. 将Activity中的setContentView(View)与Fragment中的onCreateView返回的View替换成ViewGroup中对应的布局;
3. 不管是哪一种显示状态，都需要展示title，并且实现标题跟content分离;

下面针对这三步来进行分析

自定义ViewGroup

ViewGroup有很多，常见的三种Relativelayout、Linelarlayout和Framelayout，其实三种布局都是OK的，不过因为Relativelayout需要绘制两次，所以建议使用LinearLayout和Framelayout，因为自定义的Viewgroup需要填充三个布局，并且都是ViewStub标签，所以这里用Linearlayout布局会简单一下，所以就使用LinearLayout作为继承的Group了，下面来看一下代码：

填充的布局 layout_all

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ViewStub
        android:id="@+id/vs_loading"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout="@layout/layout_loading"/>

    <ViewStub
        android:id="@+id/vs_end"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout="@layout/layout_empty"/>

    <ViewStub
        android:id="@+id/vs_error"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout="@layout/layout_error"/>

</merge>复制代码

FlexibleLayout

public abstract class FlexibleLayout extends LinearLayout {
    private View mLoadingView;
    private View mNetworkErrorView;
    private View mEmptyView;
    private ViewGroup mSuccessView;
    private ProgressBar mLoadingProgress;
    private TextView mLoadingText;
    private View title;

    public FlexibleLayout(Context context) {
        super(context);
        setOrientation(VERTICAL);
        inflate(context, R.layout.layout_all, this);
        mSuccessView = initNormalView();
        title = mSuccessView.findViewWithTag("title");
        addView(mSuccessView);
    }

  //初始化NormalView,交给子类去实现
    public abstract ViewGroup initNormalView();

   //请求数据,交给子类去实现
   public abstract void onLoad();


    public void loadData() {
        showPageWithState(State.Loading);
        onLoad();
    }


  //根据状态来显示对应的View
    public void showPageWithState(State status) {

        switch (status) {
            case Normal:
               //显示示正常的布局
                break;
            case Loading:
                //显示正在加载的布局
                break;
            case Empty:
                //显示空布局
                break;
            case NetWorkError:
                //显示失败布局
                break;
            default:
                break;
        }
    }


}复制代码

上面的代码比较简单，就是自定义了一个ViewGroup,然后填充了四种布局，然后能够根据相应的状态显示对应的布局，由于代码比较简单，就没有贴出来，只是用伪代码加以展示

动态替换Activity以及Fragment中的View

我们知道不管是Activity还是Fragment，都有一个类似的方法

Activity

setContentView(View view);复制代码

Fragment

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = initView(inflater, container)
        return view;
    }复制代码

我们需要做的就是用FlexibleLayout替换掉View就好了，具体的实现代码如下：

BaseActivity

public abstract class BaseActivity<T extends BasePresenter, V> extends AppCompatActivity implements Toolbar.OnMenuItemClickListener, ViewCallBack<V>, View.OnClickListener {
    public T presenter;
    private Toolbar mToolbar;
    private TextView mTitle;
    protected Context mContext;
    protected FlexibleLayout mFlexibleLayout;

    @Override
    protected void onCreate(Bundle bundle) {
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(bundle);
        mContext = this;
        setContentView(initView());
        initViews();
        mFlexibleLayout.loadData();
    }

    private View initView() {
        mFlexibleLayout = new FlexibleLayout(mContext) {
            @Override
            public ViewGroup initNormalView() {
                return initViewGroup();
            }

            @Override
            public void onLoad() {
                if (presenter == null)
                    presenter = initPresenter();
                getData();
            }
        };
        return mFlexibleLayout;
    }

    private ViewGroup initViewGroup() {
        ViewGroup view = (ViewGroup) View.inflate(mContext, getLayoutId(), null);
        return view;
    }



    protected abstract int getLayoutId();//获取填充界面ID


    protected abstract void initViews();//初始化子类控件

    protected abstract void initListener();//初始化监听事件

    protected abstract T initPresenter();//初始化Presenter

    protected abstract void getData();//获取数据




}复制代码

BaseFragment

public abstract class BaseFragment<T extends BasePresenter, V> extends Fragment implements View.OnClickListener, ViewCallBack<V> {
    public T presenter;
    protected boolean isVisible;
    protected Context mContext;
    protected boolean isPrepared;
    protected FlexibleLayout mFlexibleLayout;
    private TextView tvTitle;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mContext = getActivity();
        View view = initView(inflater, container);
        initListener();
        mFlexibleLayout.loadData();
        isPrepared = true;
        return view;
    }



//初始化normalView
    private ViewGroup initView(final LayoutInflater inflater, final ViewGroup parent) {
        mFlexibleLayout = new FlexibleLayout(mContext) {

            @Override
            public ViewGroup initNormalView() {
                return initViewGroup(inflater, parent);

            }

            @Override
            public void onLoad() {
                if (presenter == null)
                    presenter = initPresenter();
                getData();
            }
        };
        return mFlexibleLayout;
    }


    private ViewGroup initViewGroup(LayoutInflater inflater, ViewGroup parent) {
        ViewGroup view = (ViewGroup) inflater.inflate(getLayoutId(), parent, false);
        tvTitle = (TextView) view.findViewById(R.id.tv_title);
        initCustomView(view);
        return view;
    }


   protected abstract int getLayoutId();//获取资源ID

    protected abstract void initCustomView(View view);//初始化界面

    protected abstract void initListener();//初始化监听事件

    protected abstract T initPresenter();//初始化数据以及请求参数

    protected abstract void getData();//获取数据复制代码

代码是用MVP写的，可以先不用管，我晚点再解释一下，只需要关注一下View的初始化，就是通过继承拿到子类的布局然后填充到FlexibleLayout,showRightPage这个方法供子类进行调用，通过不同的code来进行显示对应的状态，比较好理解

实现title与content的分离

截止到现在，基本上实现了动态加载对应布局的功能了，但是问题在于在加载非正常布局的时候，整个页面要么是空的，要么是满屏的进度条，在网上找了下，也没找到相应的解决方案，后来心一横打算自己实现，其实真没自己想的那么难，因为title与content的分离，实际上就是把Activity或者Fragment中的标题栏移动到FlexibleLayout中去而已，之前的思路总是想着去怎么显示正常布局中的标题而不是内容，换了个思路豁然开朗，于是思路就出来了

• 如果Activity或者Fragment中有标题栏，将标题栏移动到FlexibleLayout中，放在最顶部，不管是加载任何一种状态，都会有标题栏；
• 如果没有标题栏，则不需要做任何处理

  给标题栏设置一个tag

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:background="@color/black_back"
    android:tag="title"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/AppTheme.PopupOverlay">

    <TextView
        android:id="@id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:lines="1"
        android:text="标题"
        android:textColor="@color/white_text"
        android:textSize="17sp"/>


</android.support.v7.widget.Toolbar>复制代码

在FlexibleLayout中进行判断，有的话就移动，否则只有content的话就不需要分离

构造方法修改

    private View title;

    public FlexibleLayout(Context context) {
        super(context);
        setOrientation(VERTICAL);
        setClipToPadding(true);
        //防止状态栏盖住标题栏，必须在代码中设置，因为FlexibleLayout中加载的标签是merge,会被自动忽略
        setFitsSystemWindows(true);
        inflate(context, R.layout.layout_all, this);
        mSuccessView = initNormalView();
        title = mSuccessView.findViewWithTag("title");
        addView(mSuccessView);
        int childCount = getChildCount();

    }复制代码

状态改变修改

 public void showPageWithState(State status) {
        if (status != State.Normal && title != null) {
            String tag = (String) getChildAt(0).getTag();
            if (TextUtils.equals(tag, "title")) {
                //是否有标题栏
            } else {
                mSuccessView.removeView(title);
                addView(title, 0);
            }

        }
        switch (status) {
            case Normal:
                mSuccessView.setVisibility(VISIBLE);
                String tag = (String) mSuccessView.getChildAt(0).getTag();
                if (!TextUtils.equals(tag, "title") && null != title) {
                //是否有标题栏
                    removeView(title);
                    mSuccessView.addView(title, 0);
                }
                if (mLoadingView != null) {
                    mLoadingView.setVisibility(GONE);
                }

                if (mNetworkErrorView != null) {
                    mNetworkErrorView.setVisibility(GONE);
                }

                if (mNetworkErrorView != null) {
                    mNetworkErrorView.setVisibility(GONE);
                }

                break;

        }
    }复制代码

到这里基本上已经完成了，由于Base类中的代码是用MVP写的，这里简单说明一下

• ViewCallBack

public interface ViewCallBack<V> {

    /**
     * @param code code:0:有数据，1：数据为空,2:加载失败
     * @param data 定义好的数据类型
     */

    void refreshView(int code, V data);
}复制代码

ViewCallBack接口位于Presenter内部，BaseActivity以及BaseFragment实现该接口，当Presenter拿到数据之后，回调Activity或者Fragemnt，刷新界面

• BasePresenter

public abstract class BasePresenter {

    protected ViewCallBack mViewCallBack;

    public void add(ViewCallBack viewCallBack) {
        this.mViewCallBack = viewCallBack;
    }

   public void remove() {
        this.mViewCallBack = null;
    }

    protected abstract void getData();
}复制代码

public class MainPresenter extends BasePresenter {
    public MainPresenter() {
    }

    @Override
    public void getData() {

    }
}复制代码

BasePresenter抽象类，持有ViewCallBack引用，通过构造方法传入数据处理需要的参数，然后进行数据请求，通过ViewCallBack回调数据到Activity或者Fragemnt

• BaseActivity

public abstract class BaseActivity<T extends BasePresenter, V> extends AppCompatActivity implements Toolbar.OnMenuItemClickListener, ViewCallBack<V>, View.OnClickListener {

}复制代码

V 代表回调的数据格式

• MainActivity

 public class MainActivity extends BaseActivity<MainPresenter, MainBean> {
    private TabLayout tbDemo;
    private ViewPager vpDemo;
    private int mType;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initViews() {
        setTitle("主页面");
        tbDemo = (TabLayout) findViewById(R.id.tb_demo);
        vpDemo = (ViewPager) findViewById(R.id.vp_demo);
    }

    @Override
    protected void initListener() {

    }

    @Override
    protected MainPresenter initPresenter() {
        mType = getIntent().getIntExtra("type", 0);
        vpDemo.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            private String[] mTitles = getResources().getStringArray(R.array.name);

            @Override
            public Fragment getItem(int position) {
                if (position == 1) {
                    return new TwoFragment();
                } else if (position == 2) {
                    return new ThreeFragment();
                } else if (position == 3) {
                    return new FourFragment();
                }
                return new OneFragment();
            }

            @Override
            public int getCount() {
                return mTitles.length;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }

        });

        tbDemo.setupWithViewPager(vpDemo);
        return new MainPresenter();
    }

    @Override
    protected void getData() {
        showRightPage(mType);
//        presenter.getData();
    }


    @Override
    public void refreshView(int code, MainBean data) {

    }


    @Override
    public void onClick(View v) {

    }

}复制代码

正常的流程应该是通过getData在Presenter中请求数据，然后通过Viewcallback回调refreshView方法，在这里面来进行页面展示，不过为了测试方便，我直接在getData里面进行页面展示了，还有每个Activity和Fragment都有自己的Presenter和对应的数据回调类型，这里因为没有进行网络请求，所以全部共用的一个，基本上就这些，如果有哪里没有说清楚的话，欢迎沟通交流。

Demo下载地址