[关闭]
@xujun94 2016-06-29T10:10:43.000000Z 字数 7343 阅读 1479

常用的自定义View例子（MultiInterfaceView多界面处理）

自定义View 多界面处理（包括空界面，错误界面，加载中的界面）

最近在做项目的时候，刚开始没有考虑空界面，错误界面的处理，一开始是想为每个界面在布局文件中都天剑一个错误界面，空界面，但仔细一想，这样的工作量太大了，而且也不方便处理，于是我想能不能做出一个自定义控件出来，想了听就，终于做出来了，现在将其分享出来，有什么不足的请各位指点。

源码下载地址：
转载请注明原博客地址：

老规矩，废话不多说，大家先来看一下效果图

大家先来看一下源码

  1. package com.szl.loadinngpagedemo.view;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.View;
  6. import android.widget.Button;
  7. import android.widget.FrameLayout;
  9. import com.szl.loadinngpagedemo.R;
  11. /***
  12.  * 创建了自定义帧布局 把baseFragment 一部分代码 抽取到这个类中
  13.  *
  14.  * @author itcast
  15.  */
  16. public abstract class LoadingPage extends FrameLayout {
  18.     public static final int STATE_UNKOWN = 0;
  19.     public static final int STATE_LOADING = 1;
  20.     public static final int STATE_ERROR = 2;
  21.     public static final int STATE_EMPTY = 3;
  22.     public static final int STATE_SUCCESS = 4;
  23.     public int state = STATE_UNKOWN;
  24.     private Context mContext;
  26.     private View loadingView;// 加载中的界面
  27.     private View errorView;// 错误界面
  28.     private View emptyView;// 空界面
  29.     private View successView;// 加载成功的界面
  31.     public LoadingPage(Context context) {
  32.         this(context,null,0);
  34.     }
  35.     public LoadingPage(Context context, AttributeSet attrs) {
  36.         this(context, attrs,0);
  37.     }
  39.     public LoadingPage(Context context, AttributeSet attrs, int defStyle) {
  40.         super(context, attrs, defStyle);
  41.         mContext = context;
  42.         init();
  43.     }
  47.     private void init() {
  48.         loadingView = createLoadingView(); // 创建了加载中的界面
  49.         if (loadingView != null) {
  50.             this.addView(loadingView, new LayoutParams(
  51.                     LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  52.         }
  53.         errorView = createErrorView(); // 加载错误界面
  54.         if (errorView != null) {
  55.             this.addView(errorView, new LayoutParams(
  56.                     LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  57.         }
  58.         emptyView = createEmptyView(); // 加载空的界面
  59.         if (emptyView != null) {
  60.             this.addView(emptyView, new LayoutParams(
  61.                     LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  62.         }
  63.         /**
  64.          * 注意这里依赖是就初始化成功的界面，也可以在状态成功的时候才初始化成功的界面
  65.          */
  66.         successView = createSuccessView();
  67.         if(successView!=null){
  68.             this.addView(successView, new LayoutParams(
  69.                     LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  70.         }
  71.         showPage();// 根据不同的状态显示不同的界面
  72.     }
  74.     // 根据不同的状态显示不同的界面
  75.     private void showPage() {
  76.         if (loadingView != null) {
  77.             loadingView.setVisibility(state == STATE_UNKOWN
  78.                     || state == STATE_LOADING ? View.VISIBLE : View.INVISIBLE);
  79.         }
  80.         if (errorView != null) {
  81.             errorView.setVisibility(state == STATE_ERROR ? View.VISIBLE
  82.                     : View.INVISIBLE);
  83.         }
  84.         if (emptyView != null) {
  85.             emptyView.setVisibility(state == STATE_EMPTY ? View.VISIBLE
  86.                     : View.INVISIBLE);
  87.         }
  89.         if (state == STATE_SUCCESS) {
  90.             if (successView == null) {
  91.                 successView = createSuccessView();
  92.                 this.addView(successView, new LayoutParams(
  93.                         LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  94.             }
  95.             successView.setVisibility(View.VISIBLE);
  96.         } else {
  97.             if (successView != null) {
  98.                 successView.setVisibility(View.INVISIBLE);
  99.             }
  100.         }
  101.     }
  103.     /* 创建了空的界面 */
  104.     private View createEmptyView() {
  105.         View view = View.inflate(mContext, R.layout.loadpage_empty,
  106.                 null);
  107.         return view;
  108.     }
  110.     /* 创建了错误界面 */
  111.     private View createErrorView() {
  112.         View view = View.inflate(mContext, R.layout.loadpage_error,
  113.                 null);
  114.         Button page_bt = (Button) view.findViewById(R.id.page_bt);
  115.         page_bt.setOnClickListener(new OnClickListener() {
  117.             @Override
  118.             public void onClick(View v) {
  120.             }
  121.         });
  122.         return view;
  123.     }
  125.     /* 创建加载中的界面 */
  126.     private View createLoadingView() {
  127.         View view = View.inflate(mContext,
  128.                 R.layout.loadpage_loading, null);
  129.         return view;
  130.     }
  132.     /**
  133.      * 枚举类，对应相应的状态码，用来表示各种状态
  134.      */
  135.     public enum LoadResult {
  136.         loading(1),error(2), empty(3), success(4);
  138.         int value;
  140.         LoadResult(int value) {
  141.             this.value = value;
  142.         }
  144.         public int getValue() {
  145.             return value;
  146.         }
  148.     }
  150.     /**
  151.      * 注意请求成功后必须调用show方法，会根据这个压面显示相应的数据
  152.      * @param loadResult
  153.      */
  154.     public void show(LoadResult loadResult) {
  155.         state = loadResult.getValue();
  156.         showPage();
  158.     }
  160.     /***
  161.      * 创建成功的界面
  162.      *
  163.      * @return
  164.      */
  165.     public abstract View createSuccessView();
  168. }

思路解析

  1. 首先在构造方法里面调用init（）方法初始化各个界面，包括加载中的界面,错误界面, 空界面,加载成功的界面
  1.    private View loadingView;// 加载中的界面
  2.    private View errorView;// 错误界面
  3.    private View emptyView;// 空界面
  4.    private View successView;// 加载成功的界面
  6.   errorView = createErrorView(); // 加载错误界面
  9.    emptyView = createEmptyView(); // 加载空的界面
  12.    successView = createSuccessView();//加载成功的界面

注意在init（）方法里面我们可以知道 createSuccessView()是一个抽象方法，因为每个Activity或Fragment的成功界面一般是变异羊的，我们交给子类自己去实现
2. 接着我们调用showPage（）方法根据不同的状态显示不同的界面，默认显示的状态是STATE_UNKOWN,所以显示的状态是

  1.  public int state = STATE_UNKOWN;
  3.  loadingView.setVisibility(state == STATE_UNKOWN
  4.                     || state == STATE_LOADING ? View.VISIBLE : View.INVISIBLE);
  6.  errorView.setVisibility(state == STATE_ERROR ? View.VISIBLE
  7.                     : View.INVISIBLE);
  8.  -------

效果图如下：

**当然我们只需调用void show(LoadResult loadResult)这个方法即可根据相应的状态显示相应的界面

LoadingPage的源码分析到此为止

下面我们来看一下我们是怎样结合Fragment来是用的，首先我们抽取一个BaseFragemnt，源码如下

  1. public abstract class BaseFragment extends Fragment {
  3.     protected LoadingPage mLoadingPage;
  4.     Context mContext;
  5.     Activity mActivity;
  7.     @Override
  8.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  9.                              Bundle savedInstanceState) {
  10.         mContext=getActivity();
  11.         mActivity=getActivity();
  12.         if (mLoadingPage == null) {  // 之前的frameLayout 已经记录了一个爹了  爹是之前的ViewPager
  14.             mLoadingPage = new LoadingPage(this.mContext) {
  16.                 @Override
  17.                 public View createSuccessView() {
  18.                     return BaseFragment.this.createSuccessView();
  19.                 }
  20.             };
  21.         } else {
  22.             ViewUtils.removeParent(mLoadingPage);// 移除frameLayout之前的爹
  23.         }
  24.         return mLoadingPage;  //  拿到当前viewPager 添加这个framelayout
  25.     }
  27.     @Override
  28.     public void onActivityCreated(@Nullable Bundle savedInstanceState) {
  29.         super.onActivityCreated(savedInstanceState);
  30.         initData();
  31.     }
  33.     protected void initData() {
  34.     }
  37.     /***
  38.      * 创建成功的界面
  39.      *
  40.      * @return
  41.      */
  42.     public abstract View createSuccessView();
  45.     public void show(LoadResult loadResult) {
  46.         if (mLoadingPage != null) {
  47.             mLoadingPage.show(loadResult);
  48.         }
  49.     }
  51.     /**
  52.      * 校验数据
  53.      */
  54.     public LoadResult checkData(List datas) {
  55.         if (datas == null) {
  56.             return LoadResult.error;//  请求服务器失败
  57.         } else {
  58.             if (datas.size() == 0) {
  59.                 return LoadingPage.LoadResult.empty;
  60.             } else {
  61.                 return LoadingPage.LoadResult.success;
  62.             }
  63.         }
  65.     }
  67. }

BaseFragment的代码很简单，就是将我们的LoadPager这个自定义View设置为根布局，然后创建成功的界面由子类自己去实现

下面我们来看一下他的子类ErrorFragment的代码

  1. public class ErrorFragment extends BaseFragment {
  3.     @Override
  4.     public View createSuccessView() {
  5.         return View.inflate(mContext,R.layout.fragemnt_test,null);
  6.     }
  8.     @Override
  9.     protected void initData() {
  10.         mLoadingPage.postDelayed(new Runnable() {
  11.             @Override
  12.             public void run() {
  13.                show(LoadingPage.LoadResult.error);
  14.             }
  15.         },2500);
  16.     }
  17. }

我们可以看到我们所做的就是创建自己的成功界面，如果想显示别的界面，就调用void show(LoadResult loadResult)这个方法，这个我们延时之后调用 show(LoadingPage.LoadResult.error);来显示错误界面

看了ErrorFragment的代码以后，我们可以轻易地向导我们的EmptyFragment是怎样操作的，没错就是调用 show(LoadingPage.LoadResult.empty);这个方法而已

  1. public class EmptyFragment extends BaseFragment {
  3.     @Override
  4.     public View createSuccessView() {
  5.         return View.inflate(mContext,R.layout.fragemnt_test,null);
  6.     }
  8.     @Override
  9.     protected void initData() {
  10.         mLoadingPage.postDelayed(new Runnable() {
  11.             @Override
  12.             public void run() {
  13.                show(LoadingPage.LoadResult.empty);
  14.             }
  15.         },2500);
  16.     }
  17. }

同理SuccessFragemnt的代码你也能轻易的想象得到，这里就不贴出来了

下面我们来看一下BaseActivity的代码,下面只给出主要代码，详细的代码请点击 源码下载地址：

  1. /**
  2.  * 博客地址：http://blog.csdn.net/gdutxiaoxu
  3.  * @author xujun
  4.  * @time 2016-6-29 14:52.
  5.  */
  6. public abstract class BaseActivity extends AppCompatActivity {
  8.     protected Context mContext;
  9.     protected ProgressDialog dialog;
  10.     protected LoadingPage mLoadingPage;
  12.     @Override
  13.     protected void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  16.         initWindows();
  17.         // base setup
  18.         mContext = this;
  20.         if (mLoadingPage == null) {
  21.             mLoadingPage = new LoadingPage(this) {
  22.                 @Override
  23.                 public View createSuccessView() {
  24.                     return BaseActivity.this.createSuccessView();
  25.                 }
  27.             };
  28.         } else {
  29.             ViewUtils.removeParent(mLoadingPage);
  30.         }
  32.         setContentView(mLoadingPage);
  33.         dialog = new ProgressDialog(this);
  34.         initListener();
  35.         initData();
  36.     }
  38.     public void show(LoadingPage.LoadResult loadResult){
  39.         if(mLoadingPage!=null){
  40.             mLoadingPage.show(loadResult);
  41.         }
  42.     }
  45.     /**
  46.      * 创造成功的页面
  47.      *
  48.      * @return
  49.      */
  50.     protected abstract View createSuccessView();
  52.    ----

总结

思路其实很简单，一开始给LoadPager初始化各种布局，包括错误界面，加载中的界面，空界面，其中成功的界面交友子类自己去实现，如果我们想显示别的界面的话，我们只需要调用void show(LoadResult loadResult)这个方法而已

待改进的地方

  1. 由于时间关系，没有给错误界面和空界面统一集成一个自定义控件，这样我们可以利用自定义属性统一处理要显示界面的信息
  2. 没有提供更换空界面，错误界面的方法，这个很简单，大家需要的话就自己去实现就好，这里我就实现了，有时间的话会统一处理这些问题，大家有兴趣的话可以关注我github上面仓库的变化。

源码下载地址：

转载请注明原博客地址：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注