Android——页面Loading控件封装

概述

在Android开发过程中通常在有网络请求的页面，需要设计加载中、加载失败等UI效果，来提升用户体验。本文就此需求实现了一个简单的LoadingLayout控件，可以比较方便的实现加载中、加载失败、网络错误等UI效果，并提供失败点击重试等操作。

实现思路

常用一般有以下几种请求状态：

• LOADING_STATE 加载中状态
• LOAD_SUCCESS_STATE 加载成功状态
• LOAD_FAILURE_STATE 加载失败状态（包含超时、404、接口数据错误等）
• NULL_DATA_STATE 没有数据状态（接口访问成功，接口没有数据）
• NET_ERROR_STATE 网络错误状态（未连接网络）

除加载成功状态每种状态都对应着一种UI效果对应各自View，不同状态的View的展示和消失肯定是通过在ViewGroup添加和删除View实现的，所以我们的LoadingLayout需要继承一个ViewGroup，此ViewGroup我们选择为FrameLayout，不同状态的View可以通过自定义属性自由指定，然后通过开放接口实现切换UI的效果就可以了。

代码实现

定义自定义属性

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

    <declare-styleable name="LoadingLayout">
        <attr name="loadingViewDrawable" format="reference"/>
        <attr name="loadFailureViewDrawable" format="reference"/>
        <attr name="netErrorViewDrawable" format="reference"/>
        <attr name="nullDataViewDrawable" format="reference"/>
    </declare-styleable>
</resources>

定义了一个默认ID和四种UI状态的属性。

java代码实现

public class LoadingLayout extends FrameLayout {
    private static final String TAG = LoadingLayout.class.getSimpleName();

    /** 加载中 */
    public static final int LOADING_STATE = 0x001;
    /** 加载成功 */
    public static final int LOAD_SUCCESS_STATE = 0x002;
    /** 网络错误 */
    public static final int NET_ERROR_STATE = 0x003;
    /** 加载失败，超时、接口错误、404等 */
    public static final int LOAD_FAILURE_STATE = 0x004;
    /** 没有数据 */
    public static final int NULL_DATA_STATE = 0x005;

    private View loadingView;       //loading 加载中。。
    private View netErrorView;      //网络错误View
    private View loadFailureView;   //加载失败View
    private View nullDataView;      //没有数据View

    //定义注释限定参数值，可以去掉
    @IntDef({LOADING_STATE, LOAD_SUCCESS_STATE, NET_ERROR_STATE, LOAD_FAILURE_STATE,NULL_DATA_STATE})
    public @interface LoadingState{}

    private final LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    public LoadingLayout(@NonNull Context context) {
        this(context, null);
    }

    public LoadingLayout(@NonNull  Context context, @NonNull  AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadingLayout(@NonNull  Context context, @NonNull  AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //指定默认ID
        if(getId() == -1){
            setId(R.id.loading_layout_id);
        }

        try{
            TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.LoadingLayout, 0, 0);
            //为每种状态指定默认效果
            int progressViewRes = a.getResourceId(R.styleable.LoadingLayout_loadingViewDrawable,
                    R.layout.default_loading_layout);
            int netErrorViewRes = a.getResourceId(R.styleable.LoadingLayout_netErrorViewDrawable,
                    R.layout.default_net_error_layout);
            int loadFailureViewRes = a.getResourceId(R.styleable.LoadingLayout_loadFailureViewDrawable,
                    R.layout.default_load_failure_layout);
            int nullDataViewRes = a.getResourceId(R.styleable.LoadingLayout_nullDataViewDrawable,
                    R.layout.default_null_data_layout);

            loadingView = LayoutInflater.from(context).inflate(progressViewRes, null, true);
            netErrorView = LayoutInflater.from(context).inflate(netErrorViewRes, null, true);
            loadFailureView = LayoutInflater.from(context).inflate(loadFailureViewRes, null, true);
            nullDataView = LayoutInflater.from(context).inflate(nullDataViewRes, null, true);
        } catch (Exception e){
            e.printStackTrace();
        } finally {
            a.recycle();
        }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        this.layoutParams.width = this.getMeasuredWidth();
        this.layoutParams.height = this.getMeasuredHeight();
    }


    /**
     * 通过状态刷新界面显示
     * @param state 当前状态
     */
    public void refreshView(@LoadingState int state){
        refreshView(state, null);
    }

    /**
     * 通过状态刷新界面显示
     * @param state 当前状态
     * @param onClickListener 点击监听
     */
    public void refreshView(@LoadingState int state, OnClickListener onClickListener){
        switch (state){
            case LOAD_SUCCESS_STATE:
                //加载成功，移除所有状态View
                removeStateView();
                break;
            case LOADING_STATE:
                showLoading();
                break;
            case NET_ERROR_STATE:
                showNetErrorMessage(onClickListener);
                break;
            case LOAD_FAILURE_STATE:
                showLoadFailureMessage(onClickListener);
                break;
            case NULL_DATA_STATE:
                showNullDataMessage();
                break;
            default:
                Log.d(TAG, "state error");
                break;
        }
    }

    /**
     * 显示loading
     */
    public void showLoading(){
        removeStateView();

        if(loadingView != null){
            this.addView(loadingView);
        } else{
            Log.d(TAG, "Please init loadingView first");
        }
    }

    /**
     * 显示网络错误提示
     */
    public void showNetErrorMessage(){
       showNetErrorMessage(null);
    }

    /**
     * 显示网络错误提示
     * @param onClickListener 指定点击效果监听
     */
    public void showNetErrorMessage(OnClickListener onClickListener){
        removeStateView();

        if(netErrorView != null){
            if(onClickListener != null){
                netErrorView.setOnClickListener(onClickListener);
            }
            this.addView(netErrorView);
        } else{
            Log.d(TAG, "Please init netErrorView first");
        }
    }

    /**
     * 显示无数据提示
     */
    public void showNullDataMessage(){
        removeStateView();

        if(nullDataView != null){
            this.addView(nullDataView);
        } else{
            Log.d(TAG, "Please init nullDataView first");
        }
    }

    /**
     * 显示加载失败提示
     */
    public void showLoadFailureMessage(){
        showLoadFailureMessage(null);
    }

    /**
     * 显示加载失败提示
     * @param onClickListener 指定点击效果监听
     */
    public void showLoadFailureMessage(OnClickListener onClickListener){
        removeStateView();

        if(loadFailureView != null){
            if(onClickListener != null){
                loadFailureView.setOnClickListener(onClickListener);
            }

            this.addView(loadFailureView);
        } else{
            Log.d(TAG, "Please init loadFailureView first");
        }
    }

    /**
     * 移除所有状态View
     */
    private void removeStateView(){
        if(loadingView != null){
            this.removeView(loadingView);
        }
        if(netErrorView != null){
            this.removeView(netErrorView);
        }
        if(loadFailureView != null){
            this.removeView(loadFailureView);
        }
        if(nullDataView != null){
            this.removeView(nullDataView);
        }
    }
}

代码注释比较详细了，不过多解释。

默认UI样式

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <ProgressBar
        android:layout_width="50dp"
        android:layout_height="50dp"
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/loading_anim"/>
</RelativeLayout>

loading_anim:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading"
    android:duration="100"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="720" />

其他的样式比较简单，就不一一列举了。

使用

布局：

    <com.zhong.loadingview.view.LoadingLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/net_error_btn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" >

        <ImageView
            android:id="@+id/image_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center" />

    </com.zhong.loadingview.view.LoadingLayout>

需要在父布局中引用自定义属性LoadingLayout。

代码实现：

在代码中需要通过loadingLayout.showLoading();,loadingLayout.refreshView(state);等方法来控制状态展示效果。

扩展

在写完这个控件之后发现网上有好多类似的实现，好吧。。。至少说明我的实现思路应该是没问题的。但是这种实现其实并不完美：

• 每次使用时需要在父布局中使用自定义布局LoadingLayout略显繁琐；
• 在某些特殊布局中需要为此效果单独添加一层父布局LoadingLayout，会在一定程度上造成资源上的浪费；
• 因为使用了自定义属性和布局指定默认UI样式，也不利于维护和使用。

源码：LoadingLayout

转载于:https://my.oschina.net/zhongsm/blog/3068932