写在前面
一般我们开发应用的时候，比如首页或者详情界面，当请求数据的时候，我们一般都会给用户一个简单的提示，比如加一个进度条或者弹出一个Dialog。但是有时候弹出Dialog的时候只是给用户了一个提示，但是当出现错误之后，也只是简单的一个Toast提示，并不能再次进行请求(有可能稍微做些处理，比如请求错误之后隐藏content布局然后在显示一个错误布局)，第一种情况体验很是糟糕，第二种情况稍微好点，但是我们每次写一个布局都需要多写错误布局(或者写一个公共的，然后在其他地方进行引用，但是有一点就是我们在每次的activity或者fragment使用的时候都需要写入逻辑)，造成不必要的代码冗余。今天就来进行封装一下，完成一个侵入式的ProgressFragment。
开始实现
第一步分析
我们首先要实现的封装，能够达到以下的几个要求
- 1、加载的时候显示Loading状态
- 2、数据为空或者错误的时候显示数据为错误或者其他提示
- 3、正常情况显示正常数据状态
- 4、当“数据为空或者错误状态”的时候，可以点击进行重新请求数据
原理分析
看到那四个需要实现的条件，我们大致可以了解到，需要有三种布局状态正常布局状态、错误布局状态、Loading状态有了这几种状态，我们就可以在请求的时候根据我们定义的以下方法(或者类似方法),然后控制不同布局的显示和加载
- showLoading()方法中显示Loading状态布局
- showError()或者showNoData()方法显示错误状态布局
- 其余正常状态显示正常布局状态(也就是刚开始这个布局是显示visiable)
代码实现
有了分析，我们首先可以知道需要三种布局(错误、加载、正常)
错误布局
<LinearLayout
android:id="@+id/view_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="@+id/text_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/empty_data"/>
</LinearLayout>
加载布局
<LinearLayout
android:id="@+id/view_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/text_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@string/loading"/>
</LinearLayout>
正常布局
<FrameLayout
android:id="@+id/view_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
布局完成之后，首先说明一下，他们三个的顶层布局是FrameLayout(ViewGroup的子类)
然后看下逻辑代码怎么实现的吧。
第一步就是找到布局id
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//跟布局
mRootView = (FrameLayout) inflater.inflate(R.layout.fragment_progress, container, false);
//空布局也就是错误布局
mViewEmpty = mRootView.findViewById(R.id.view_empty);
//对错误布局实现点击事件 完成加载出错或者数据为空的时候 点击重新请求数据逻辑
mViewEmpty.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onEmptyViewClick();
}
});
//加载loading布局
mViewProgress = mRootView.findViewById(R.id.view_progress);
//真实的布局
mViewContent = (FrameLayout) mRootView.findViewById(R.id.view_content);
//加载出错或者数据为空显示的错误布局的一个提示
mEmptyTextView = (TextView) mRootView.findViewById(R.id.text_tip);
return mRootView;
}
第二步确定什么时候加载真实布局
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
this.mApplication = (CNMarketApplication) getActivity().getApplication();
setupAcitivtyComponent(mApplication.getAppComponent());
//加载真实的布局
setRealContentView();
//用于初始化布局控件 这里也可以不写 因为我们使用了ButterKnife实现对控件的注解
init();
//用于子类实现 请求数据方法
initData();
}
setRealContentView()方法
/**
* 设置真正的布局
*/
private void setRealContentView() {
View realContentView = LayoutInflater.from(getActivity()).inflate(setLayout(), mViewContent, true);
mUnbinder = ButterKnife.bind(this, realContentView);
}
第三步控制三种布局的显示
我们这个时候要写控制三种布局的显示和隐藏的逻辑，这个时候可能有人会这样写
/**
* 显示加载loading布局
*/
public void showProgressView(){
mViewProgress.setVisibility(View.VISIBLE);
mViewEmpty.setVisibility(View.GONE);
mViewContent.setVisibility(View.GONE);
}
然后在写剩余的两种逻辑，这样写没有错，但是感觉代码是有点冗余而且也不太好看，前面我们提到过，跟布局是一个FrameLayout，属于ViewGroup的子类，那么他就有getChildCount()方法获取子view那么我们就可以这样写逻辑了。
/**
* 判断要显示的子view 正常布局 错误布局 loading布局 根据传入的viewId
*
* @param viewId 需要显示的viewid
*/
public void showView(int viewId) {
int childCount = mRootView.getChildCount();
for (int i = 0; i < childCount; i++) {
if (mRootView.getChildAt(i).getId() == viewId) {
mRootView.getChildAt(i).setVisibility(View.VISIBLE);
} else {
mRootView.getChildAt(i).setVisibility(View.GONE); //隐藏
}
}
}
然后接下来这样写三个逻辑
/**
* 显示进度条view
*/
public void showProgressView() {
showView(R.id.view_progress);
}
/**
* 显示真实布局view
*/
public void showContentView() {
showView(R.id.view_content);
}
/**
* 显示数据为空view
*/
public void showEmptyView() {
showView(R.id.view_empty);
}
/**
* 显示数据为空view
*/
public void showEmptyView(int resId) {
showView(R.id.view_empty);
mEmptyTextView.setVisibility(View.VISIBLE);
mEmptyTextView.setText(resId);
}
/**
* 显示数据为空view
*/
public void showEmptyView(String msgId) {
showView(R.id.view_empty);
mEmptyTextView.setVisibility(View.VISIBLE);
mEmptyTextView.setText(msgId);
}
第四步子类使用
这个时候基本逻辑就差不多完事了，然后剩余的就需要子Fragment或者子activity进行继承和重写方法，实现逻辑了。比如
重新请求数据
@Override
public void onEmptyViewClick() {
super.onEmptyViewClick();
//重新请求数据
mPresenter.requestDatas();
}
显示错误和数据为空逻辑
@Override
public void showNoData() {
//showError("没有数据进行展示");
showEmptyView("没有数据进行展示");
Toast.makeText(getActivity(), "没有数据进行展示", Toast.LENGTH_SHORT).show();
}
@Override
public void showError(String msg) {
// showError(msg);
showEmptyView(msg);
Toast.makeText(getActivity(), "服务器开小差了" + msg, Toast.LENGTH_SHORT).show();
}
这里整体逻辑就算实现了，完整的代码我就不贴了，这里直接给出git地址
网友评论