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

时间 2019-11-21

标签自定义 flexiblelayout 动态加载页面布局实现 title content 分离繁體版

原文原文链接

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

须要实现的小目标

自定义一个ViewGroup,而后里面承载全部的布局,而后根据状态返回相应的布局；
将Activity中的setContentView(View)与Fragment中的onCreateView返回的View替换成ViewGroup中对应的布局;
不论是哪种显示状态，都须要展现title，而且实现标题跟content分离;

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

自定义ViewGroup

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

填充的布局 layout_allbash

<?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,而后填充了四种布局，而后可以根据相应的状态显示对应的布局，因为代码比较简单，就没有贴出来，只是用伪代码加以展现app

动态替换Activity以及Fragment中的View

咱们知道不论是Activity仍是Fragment，都有一个相似的方法ide

Activity布局

setContentView(View view);复制代码

Fragment测试

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

咱们须要作的就是用FlexibleLayout替换掉View就行了，具体的实现代码以下：ui

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下载地址