自定義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和對應的數據回調類型，這裏由於沒有進行網絡請求，因此所有共用的一個，基本上就這些，若是有哪裏沒有說清楚的話，歡迎溝通交流。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。