十二、空白页

当某个页面无内容时，我们需要展示一个空白页给用户，用户才知道是没有加载出内容，点击空白页可以刷新页面。

自定义空白页面，经过前篇的自定义控件，写一个自定义空白页应该很简单了：

public class EmptyView extends LinearLayout{

private ImageView emptyImageView;
private TextView emptyTextView;
private RefreshListener mRefreshListener;

public EmptyView(Context context) {
this(context, null);
}

public EmptyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public EmptyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
LayoutInflater.from(context).inflate(R.layout.empty_view, this, true);
initView();
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.EmptyView);
Drawable drawable = ta.getDrawable(R.styleable.EmptyView_emptyDrawable);
if (drawable != null){
emptyImageView.setImageDrawable(drawable);
}
String emptyStr = ta.getString(R.styleable.EmptyView_emptyText);
if (!TextUtils.isEmpty(emptyStr)) {
emptyTextView.setText(emptyStr);
}
setVisibility(View.GONE);
ta.recycle();
}

private void initView() {
emptyImageView = (ImageView) findViewById(R.id.iv_empty);
emptyTextView = (TextView) findViewById(R.id.tv_empty);

emptyImageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mRefreshListener != null) {
// 回调刷新
mRefreshListener.onRefresh();
}
}
});
}

// 显示空白页
public void show() {
setVisibility(View.VISIBLE);
}

// 隐藏空白页
public void hide() {
setVisibility(View.GONE);
}

public void setRefreshListener(RefreshListener mRefreshListener) {
this.mRefreshListener = mRefreshListener;
}

/**
* 刷新回调
*/
public interface RefreshListener {
void onRefresh();
}

}

布局很简单，就一张图片和提示文字：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/match_match">

<ImageView
android:id="@+id/iv_empty"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:src="@drawable/empty_view_selector"/>

<TextView
android:id="@+id/tv_empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_empty"
android:layout_centerHorizontal="true"
android:text="@string/empty"
android:textColor="@color/font_not_select"
android:textSize="@dimen/font_defaul"
/>

</RelativeLayout>

使用空白页，先在xml文件中布局：

<com.hy.keng.ui.view.EmptyView
style="@style/empty_view"
keng:emptyText="网络不行啦"/>

style文件定义：

<style name="match_match">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
</style>

<!-- 空白页-->
<style name="empty_view" parent="match_match">
<item name="android:id">@id/empty_view</item>
</style>

在style文件中定义了id的name，就不要每次都给空白页@+id了，id在values/ids.xml文件中定义的：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="empty_view" type="id" />
</resources>

定义一个刷新回调，当点击空白页时，执行定义的刷新事件，这里我们暂时先toast显示“刷新”两个字：

private EmptyView mEmptyView;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (view == null) {
view = inflater.inflate(R.layout.fragment_home, container, false);
initView();
}
return view;
}

private void initView() {
mEmptyView = (EmptyView) view.findViewById(R.id.empty_view);
mEmptyView.setRefreshListener(new EmptyView.RefreshListener() {
@Override
public void onRefresh() {
}
});
mEmptyView.show();
}

空白页如下：



点击空白页中间的图标刷新：