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

**本篇文章已授权微信公众号 Android_LiuGuiLin （刘桂林）独家发布 **

之前也看过一些关于加载状态的文章，可以通过提前配置页面加载的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下载地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 193,812评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,626评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,144评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,052评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,925评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,035评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,461评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,150评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,413评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,501评论 2赞 307
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,277评论 1赞 325
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,159评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,528评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,868评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,143评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,407评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,615评论 2赞 335

推荐阅读更多精彩内容