一个简单的切换加载中，空页面，出错页面和内容页面的布局。思路很简单自定义布局继承Framelayout，默认第一个子View为StateView，第二个子view为LoadingView，第三个子布局为EmptyView。默认界面加载完成后隐藏所有用户自定义布局。只显示以上其中一个布局。具体见图。github地址https://github.com/Hemumu/LoadingLayout
demo.gif
主要就一个类就搞定了，很简单实用。新建一个类LoadingLayout继承Framelayout，重写它的构造方法。这里获取三个自定义参数，这三个参数主要是为了让用户自定义StateView，LoadingView，EmptyView。并通过LayoutInflater的inflater方法把它加入到LoadingLayout中。这里注意的是inflater第三个参数，true表示加载布局并加入第二参数的ViewGroup中，false表示只加载布局，如果第三个参数是false那么第二个参数就可以是null
public LoadingLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.LoadingLayout, 0, 0);
try {
mStateView = a.getResourceId(R.styleable.LoadingLayout_stateView, R.layout.loadstate_layout);
mLoadingView = a.getResourceId(R.styleable.LoadingLayout_loadingView, R.layout.loading_layout);
mEmptyView = a.getResourceId(R.styleable.LoadingLayout_loadingView, R.layout.empty_layout);
LayoutInflater inflater = LayoutInflater.from(getContext());
inflater.inflate(mStateView, this, true);
inflater.inflate(mLoadingView, this, true);
inflater.inflate(mEmptyView, this, true);
} finally {
a.recycle();
}
}
这里我们重写View的onFinishInflate方法，onFinishInflate 会在当View中所有的子控件均被映射成xml后触发，换句话说就是布局文件被加载完成后回调的。在onFinishInflate方法中一般适合做初始化view，我们在此方法中我们隐藏所以子View
/**
* 布局加载完成后隐藏所有View
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
for (int i = 0; i < getChildCount() - 1; i++) {
getChildAt(i).setVisibility(GONE);
}
}
接下来我们看三个状态View，其实很简单暴力的思路，因为我们在构造方法中依此加入了mStateView，mLoadingView，mEmptyView。那么第0个子view就是StateView第1个子view就是LoadingView第2个子view就是EmptyView。提供三个不同的方法来展示不同的状态
/**
* State View
*/
public void showState() {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
//第0个子view为StateView
if (i == 0) {
child.setVisibility(VISIBLE);
} else {
child.setVisibility(GONE);
}
}
}
/**
* Empty view
*/
public void showEmpty() {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
//第2个子view为EmptyView
if (i == 2) {
child.setVisibility(VISIBLE);
} else {
child.setVisibility(GONE);
}
}
}
/**
* Loading view
*/
public void showLoading() {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
//第1个子view为LoadingView
if (i == 1) {
child.setVisibility(VISIBLE);
} else {
child.setVisibility(GONE);
}
}
}
同时提供了默认的三种布局，StateView布局为下图所示
state_view.png
提示扩展的展示方式，可以修改图片和文字，当然前面已经说过了你可以自定义任意见面的布局
/**
*
* @param tips
*/
public void showState(String tips) {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
if (i == 0) {
child.setVisibility(VISIBLE);
((TextView) child.findViewById(R.id.load_state_tv)).setText(tips + "");
} else {
child.setVisibility(GONE);
}
}
}
/**
* @param stateId
* @param tips
*/
public void showState(int stateId, String tips) {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
if (i == 0) {
child.setVisibility(VISIBLE);
((ImageView) child.findViewById(R.id.load_state_img)).setImageResource(stateId);
((TextView) child.findViewById(R.id.load_state_tv)).setText(tips + "");
} else {
child.setVisibility(GONE);
}
}
}
同样的LoadingView和EmptyView也有默认的布局样式（下图），用户也可以自定义，提供了相应的方法
loading_view.png
empty_view.png
/**
* Empty view
*
* @param text
*/
public void showEmpty(String text) {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
if (i == 2) {
child.setVisibility(VISIBLE);
((TextView) child.findViewById(R.id.empty_text)).setText(text + "");
} else {
child.setVisibility(GONE);
}
}
}
/**
* Loadign view
* @param text
*/
public void showLoading(String text) {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
if (i == 1) {
child.setVisibility(VISIBLE);
((TextView) child.findViewById(R.id.loading_text)).setText(text + "");
} else {
child.setVisibility(GONE);
}
}
}
默认提供了为EmptyView和StateView设置点击事件的方法，点击的范围是整个view
/**
* 设置Empty点击事件
* @param listener
*/
public void setEmptyClickListener(final OnClickListener listener) {
if( listener!=null )
findViewById(R.id.state_retry2).setOnClickListener(listener);
}
/**
* 设置State点击事件
* @param listener
*/
public void setStateClickListener( OnClickListener listener ){
if(listener!=null)
findViewById(R.id.state_retry).setOnClickListener(listener);
}
通过调用setEmptyClickListener和setStateClickListener处理事件的回调，这里考虑到自定义的三种状态的View里面可能需要设置点击事件，或者设置文本和图片，提供了以下方法来修改自定义的状态view的文本图片和添加事件
/**
* 设置自定义布局的点击事件
* @param resoureId
* @param listener
*/
public void setViewOncClickListener(int resoureId,OnClickListener listener) {
findViewById(resoureId).setOnClickListener(listener);
}
/**
* 设置自定义布局的view文本
* @param resoureId
* @param text
*/
public void setViewText(int resoureId,String text){
((TextView)findViewById(resoureId)).setText(text);
}
/**
* 设置自定义布局的image
* @param resoureId
* @param img
*/
public void setViewImage(int resoureId,int img ){
((ImageView)findViewById(resoureId)).setImageResource(img);
}
三种状态的view都是当前LoadingLayout的子view所以可以通过findViewById直接拿到。
最后一个方法就是showContent，很简单就是展示了除三种状态外的所有view。不过在写的时候因为LoadingLayout是继承FrameLayout所以建议用一个viewGroup包裹你的布局内容，比如LinearLayout，RelativeLayout。
/**
* 展示内容
*/
public void showContent() {
for (int i = 0; i < this.getChildCount(); i++) {
View child = this.getChildAt(i);
if (i > 2 ) {
child.setVisibility(VISIBLE);
} else {
child.setVisibility(GONE);
}
}
}
使用
使用超级简单，直接看代码吧。布局文件
<com.helin.loadinglayout.LoadingLayout
android:id="@+id/loading_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:dividerHeight="2dp"
android:layout_height="match_parent">
</ListView>
</com.helin.loadinglayout.LoadingLayout>
直接用LoadingLayout包裹你自己的布局就行了，注意默认是什么都没有的，需要什么状态直接show出来就行了。showLoading，showState()，showEmpty()，showContent。也可以自定义三种状态。
app:emptyView="@layout/empty_layout"
app:loadingView="@layout/loading_layout"
app:stateView="@layout/loadstate_layout"
通过LoadingLayout的setViewOncClickListener设置任何view的点击事件。setViewText设置TextView的文本信息，setViewImage设置ImageView的图片资源
//设置点击事件
mLoading.setViewOncClickListener(R.id.text_item, new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"1111",Toast.LENGTH_SHORT).show();
}
});
//设置文本
mLoading.setViewText(R.id.text_item,"2222");
//设置图片资源
mLoading.setViewImage(R.id.img,R.drawable.test_img);
简单实用，有问题欢迎交流。the end！
网友评论