【Android】提升用户体验，ListView显示加载中动画及空数据视图

来源：互联网发布：mysql3306端口是udp 编辑：程序博客网时间：2024/06/10 08:39

场景分析：

在app开发中，我们为了保证用户体验往往需要在有ListView的地方添加加载中动画及数据为空的时候的提示界面，那么让我们一起来用最简单高效的方法去实现一下吧

第一步：设计空数据布局文件view_empty.xml

<?xml version="1.0" encoding="utf-8"?><cn.xx.widget.EmptyView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">        <ImageView            android:layout_width="60dp"            android:layout_height="60dp"            android:src="@drawable/empty_background" />        <TextView            android:id="@+id/txt_empty_tip"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="35dp"            android:text="@string/no_empty_tip"            android:textColor="@color/empty_text_color"            android:textSize="@dimen/font_size_16sp" />    </LinearLayout></cn.xx.widget.EmptyView>

此处我们看到使用了一个自定义View，对，在这里我们需要简单封装一下，设想在每一个界面，我们在数据为空的时候的提示信息可能会不一样，所以我们来看看怎么设计这个EmptyView吧

第二步：封装EmptyView.java

import android.content.Context;import android.util.AttributeSet;import android.widget.RelativeLayout;import android.widget.TextView;/** * 数据为空的界面 * Created by ccwant on 2016/9/8. */public class EmptyView extends RelativeLayout {    private TextView mTxtEmptyTip;    public EmptyView(Context context) {        super(context);    }    public EmptyView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public EmptyView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        mTxtEmptyTip=(TextView)findViewById(R.id.txt_empty_tip);    }    /**     * 设置提示信息     * @param tip     */    public void setEmptyTip(String tip){        mTxtEmptyTip.setText(tip);    }    /**     * 设置提示信息     * @param resId     */    public void setEmptyTip(int resId){        mTxtEmptyTip.setText(resId);    }}

此处我们注意到一个特殊的方法onFinishInflate，它是在xml布局加载完成之后调用的一个方法，在这里我们就可以获取到对应的子View对象了，然后我们在来看看EmptyView具体的用法

第三步：设计activity_main.xml

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    android:orientation="vertical">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        >        <ListView            android:id="@+id/lst_content"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:divider="@drawable/list_divider"            android:dividerHeight="0.3dp"            />        <include            android:id="@+id/inc_empty_view"            layout="@layout/view_empty"></include>        <include            android:id="@+id/inc_loading_view"            layout="@layout/view_loading"            ></include>    </FrameLayout></LinearLayout></span>

此处我们看到使用了帧布局，整个界面分三层，第一层是ListView控件，第二层是空数据界面，第三层是加载中界面

然后我们看看怎么去控制EmptyView显示隐藏，很多人对这里都是手动去判断，但是其实有一个非常简单的使用方法。在ListView中已经帮我们实现了这件事，只是很多人不知道ListView的setEmptyView方法

第四步：setEmptyView

mIEmptyView=(EmptyView)findViewById(R.id.inc_empty_view);mIEmptyView.setEmptyTip("暂无数据");mLstContent.setEmptyView(mIEmptyView);

ok，到这一步空数据层已经处理完毕了

第五步：设计加载中布局view_loading.xml

<?xml version="1.0" encoding="utf-8"?><cn.xx.widget.LoadingView xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@color/white"                android:visibility="visible">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">        <ImageView            android:id="@+id/img_loading"            android:layout_width="120dp"            android:layout_height="120dp"            android:src="@drawable/bg_loading"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="努力加载中..."            android:textColor="#aeaeae"            android:textSize="@dimen/font_size_16sp"/>    </LinearLayout></cn.xx.widget.LoadingView>

我们看到界面上显示了一个ImageView，这里主要用于显示帧动画效果

<?xml version="1.0" encoding="utf-8"?><animation-list    xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false"    >    <item        android:drawable="@drawable/bg_loading1"        android:duration="150"></item>    <item        android:drawable="@drawable/bg_loading2"        android:duration="150"></item>    <item        android:drawable="@drawable/bg_loading3"        android:duration="150"></item>    <item        android:drawable="@drawable/bg_loading4"        android:duration="150"></item></animation-list>

此处我们同样需要对LoadingView进行封装处理

import android.content.Context;import android.graphics.drawable.AnimationDrawable;import android.util.AttributeSet;import android.view.View;import android.widget.ImageView;import android.widget.RelativeLayout;/** * 数据加载中的界面 * Created by ccwant on 2016/9/8. */public class LoadingView extends RelativeLayout {    private ImageView mImgLoading;    public LoadingView(Context context) {        super(context);    }    public LoadingView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    /**     * 显示正在加载界面     */    public void showLoading(){        setVisibility(View.VISIBLE);        ((AnimationDrawable)mImgLoading.getDrawable()).start();    }    /**     * 隐藏正在加载界面     */    public void hideLoading(){        setVisibility(View.GONE);    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        mImgLoading=(ImageView)findViewById(R.id.img_loading);    }}

第六步：LoadingView的使用

它的使用方法就需要我们去手动调用了，在界面刚进来第一次请求网络数据的时候调用showLoading方法，在请求完数据的时候调用hideLoading方法

0 0