页面加载状态布局

2020-07-16  本文已影响0人  TXswim

分享一个页面加载状态布局

public class LyLoadingLayout extends FrameLayout {

    public final static int Success = 0;
    public final static int Empty = 1;
    public final static int Error = 2;
    public final static int No_Network = 3;
    public final static int Loading = 4;
    private int mState;

    private Context mContext;
    private View loadingPage;
    private View errorPage;
    private View emptyPage;
    private View networkPage;
    private View defineLoadingPage;

    private ImageView errorImg;
    private ImageView emptyImg;
    private ImageView networkImg;

    private TextView errorText;
    private TextView emptyText;
    private TextView networkText;

    private TextView errorReloadBtn;
    private TextView networkReloadBtn;

    private View contentView;
    private OnReloadListener listener;
    //是否一开始显示contentview,默认不显示
    private boolean isFirstVisible;

    //配置
    private static Config mConfig = new Config();
    private static String emptyStr = "暂无数据";
    private static String errorStr = "请求错误,请重试";
    private static String netwrokStr = "找不到网络";
    private static String reloadBtnStr = "点击刷新";
    private static int emptyImgId = R.drawable.empty_com;
    private static int errorImgId = R.drawable.empty_com;
    private static int networkImgId = R.drawable.default_no_network;
    private static int reloadBtnId = R.drawable.verify_shape_main;
    private static int tipTextSize = 14;
    private static int buttonTextSize = 14;
    private static int tipTextColor = 0xff999999;
    private static int buttonTextColor = 0xff999999;
    private static int buttonWidth = -1;
    private static int buttonHeight = -1;
    private static int loadingLayoutId = R.layout.widget_loading_page;

    public LyLoadingLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LoadingLayout);
        isFirstVisible = a.getBoolean(R.styleable.LoadingLayout_isFirstVisible, false);
        a.recycle();
    }

    public LyLoadingLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
    }

    public LyLoadingLayout(Context context) {
        super(context);
        this.mContext = context;
    }

    /**
     * contentView 当加载完成xml后执行
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() > 1) {
            throw new IllegalStateException("LyLoadingLayout can host only one direct child");
        }
        contentView = this.getChildAt(0);
        if (!isFirstVisible) {
            contentView.setVisibility(View.GONE);
        }
        build();
    }

    private void build() {

        loadingPage = LayoutInflater.from(mContext).inflate(loadingLayoutId, null);
        errorPage = LayoutInflater.from(mContext).inflate(R.layout.widget_error_page, null);
        emptyPage = LayoutInflater.from(mContext).inflate(R.layout.widget_empty_page, null);
        networkPage = LayoutInflater.from(mContext).inflate(R.layout.widget_nonetwork_page, null);
        defineLoadingPage = null;
        networkPage.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        netwrokStr = "重新加载";


        errorText = findViewById(errorPage, R.id.error_text);
        emptyText = findViewById(emptyPage, R.id.empty_text);
        networkText = findViewById(networkPage, R.id.no_network_text);

        errorImg = findViewById(errorPage, R.id.error_img);
        emptyImg = findViewById(emptyPage, R.id.empty_img);
        networkImg = findViewById(networkPage, R.id.no_network_img);

        errorReloadBtn = findViewById(errorPage, R.id.error_reload_btn);
        networkReloadBtn = findViewById(networkPage, R.id.no_network_reload_btn);

        errorReloadBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                if (listener != null) {
                    listener.onReload(v);
                }
            }
        });
        networkReloadBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                if (listener != null) {
                    listener.onReload(v);
                }
            }
        });

        errorText.setText(errorStr);
        emptyText.setText(emptyStr);
        networkText.setText(netwrokStr);

        errorText.setTextSize(tipTextSize);
        emptyText.setTextSize(tipTextSize);
        networkText.setTextSize(tipTextSize);

        errorText.setTextColor(ContextCompat.getColor(mContext, tipTextColor));
        emptyText.setTextColor(ContextCompat.getColor(mContext, tipTextColor));
        networkText.setTextColor(ContextCompat.getColor(mContext, tipTextColor));

        errorImg.setImageResource(errorImgId);
        emptyImg.setImageResource(emptyImgId);
        networkImg.setImageResource(networkImgId);


        errorReloadBtn.setBackgroundResource(reloadBtnId);
        networkReloadBtn.setBackgroundResource(reloadBtnId);

        errorReloadBtn.setText(reloadBtnStr);
        networkReloadBtn.setText(reloadBtnStr);

        errorReloadBtn.setTextSize(buttonTextSize);
        networkReloadBtn.setTextSize(buttonTextSize);

        errorReloadBtn.setTextColor(ContextCompat.getColor(mContext, buttonTextColor));
        networkReloadBtn.setTextColor(ContextCompat.getColor(mContext, buttonTextColor));

        if (buttonHeight != -1) {

            errorReloadBtn.setHeight(dp2px(mContext, buttonHeight));
            networkReloadBtn.setHeight(dp2px(mContext, buttonHeight));
        }
        if (buttonWidth != -1) {

            errorReloadBtn.setWidth(dp2px(mContext, buttonWidth));
            networkReloadBtn.setWidth(dp2px(mContext, buttonWidth));
        }

        this.addView(networkPage);
        this.addView(emptyPage);
        this.addView(errorPage);
        this.addView(loadingPage);
    }

    /**
     * 改变视图加载状态  需要手动触发
     *
     * @param state
     * @param mLyLoadingLayout
     */
    public void setLoadViewState(int state, LyLoadingLayout mLyLoadingLayout) {
        if (mLyLoadingLayout == null) return;
        if (state != mLyLoadingLayout.getStatus()) {
            mLyLoadingLayout.setStatus(state);
        }
    }

    /**
     * 设置当天状态
     *
     * @param status Success:加载成功;Loading:加载中;
     *               Empty:数据为空;Error:加载失败
     *               No_Network:无网络
     */
    public void setStatus(@Flavour int status) {

        this.mState = status;

        switch (status) {
            case Success:
                animateVisible(contentView);
                emptyPage.setVisibility(View.GONE);
                errorPage.setVisibility(View.GONE);
                networkPage.setVisibility(View.GONE);
                if (defineLoadingPage != null) {
                    animateGone(defineLoadingPage);
                } else {
                    animateGone(loadingPage);
                }
                break;

            case Loading:
                contentView.setVisibility(View.GONE);
                emptyPage.setVisibility(View.GONE);
                errorPage.setVisibility(View.GONE);
                networkPage.setVisibility(View.GONE);
                if (defineLoadingPage != null) {
                    animateVisible(defineLoadingPage);
                } else {
                    animateVisible(loadingPage);
                }
                break;

            case Empty:
                contentView.setVisibility(View.GONE);
                animateVisible(emptyPage);
                errorPage.setVisibility(View.GONE);
                networkPage.setVisibility(View.GONE);
                if (defineLoadingPage != null) {
                    animateGone(defineLoadingPage);
                } else {
                    animateGone(loadingPage);
                }
                break;

            case Error:
                contentView.setVisibility(View.GONE);
                emptyPage.setVisibility(View.GONE);
                animateVisible(errorPage);
                networkPage.setVisibility(View.GONE);
                if (defineLoadingPage != null) {
                    animateGone(defineLoadingPage);
                } else {
                    animateGone(loadingPage);
                }
                break;

            case No_Network:
                contentView.setVisibility(View.GONE);
                emptyPage.setVisibility(View.GONE);
                errorPage.setVisibility(View.GONE);
                animateVisible(networkPage);
                if (defineLoadingPage != null) {
                    animateGone(defineLoadingPage);
                } else {
                    animateGone(loadingPage);
                }
                break;

            default:
                break;
        }

    }

    /**
     * View淡入
     */
    public void animateVisible(View view) {
        if (view == null) return;
        view.setAlpha(0f);
        view.setVisibility(View.VISIBLE);
        view.animate().alpha(1f).setDuration(450).setListener(null);
    }

    /**
     * View 淡出
     */
    public void animateGone(final View view) {
        if (view == null) return;
        view.animate().alpha(0f).setDuration(400).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }
        });
    }


    /**
     * 返回当前状态{Success, Empty, Error, No_Network, Loading}
     *
     * @return
     */
    public int getStatus() {

        return mState;
    }

    /**
     * 设置Empty状态提示文本,仅对当前所在的地方有效
     *
     * @param text
     * @return
     */
    public LyLoadingLayout setEmptyText(String text) {

        emptyText.setText(text);
        return this;
    }

    /**
     * 设置Error状态提示文本,仅对当前所在的地方有效
     *
     * @param text
     * @return
     */
    public LyLoadingLayout setErrorText(String text) {
        errorText.setText(text);
        return this;
    }

    /**
     * 设置No_Network状态提示文本,仅对当前所在的地方有效
     *
     * @param text
     * @return
     */
    public LyLoadingLayout setNoNetworkText(String text) {

        networkText.setText(text);
        return this;
    }

    /**
     * 设置Empty状态显示图片,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setEmptyImage(@DrawableRes int id) {


        emptyImg.setImageResource(id);
        return this;
    }

    /**
     * 设置Error状态显示图片,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setErrorImage(@DrawableRes int id) {

        errorImg.setImageResource(id);
        return this;
    }

    /**
     * 设置No_Network状态显示图片,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setNoNetworkImage(@DrawableRes int id) {

        networkImg.setImageResource(id);
        return this;
    }

    /**
     * 设置Empty状态提示文本的字体大小,仅对当前所在的地方有效
     *
     * @param sp
     * @return
     */
    public LyLoadingLayout setEmptyTextSize(int sp) {

        emptyText.setTextSize(sp);
        return this;
    }

    /**
     * 设置Error状态提示文本的字体大小,仅对当前所在的地方有效
     *
     * @param sp
     * @return
     */
    public LyLoadingLayout setErrorTextSize(int sp) {

        errorText.setTextSize(sp);
        return this;
    }

    /**
     * 设置No_Network状态提示文本的字体大小,仅对当前所在的地方有效
     *
     * @param sp
     * @return
     */
    public LyLoadingLayout setNoNetworkTextSize(int sp) {

        networkText.setTextSize(sp);
        return this;
    }

    /**
     * 设置Empty状态图片的显示与否,仅对当前所在的地方有效
     *
     * @param bool
     * @return
     */
    public LyLoadingLayout setEmptyImageVisible(boolean bool) {

        if (bool) {
            emptyImg.setVisibility(View.VISIBLE);
        } else {
            emptyImg.setVisibility(View.GONE);
        }
        return this;
    }

    /**
     * 设置Error状态图片的显示与否,仅对当前所在的地方有效
     *
     * @param bool
     * @return
     */
    public LyLoadingLayout setErrorImageVisible(boolean bool) {

        if (bool) {
            errorImg.setVisibility(View.VISIBLE);
        } else {
            errorImg.setVisibility(View.GONE);
        }
        return this;
    }

    /**
     * 设置No_Network状态图片的显示与否,仅对当前所在的地方有效
     *
     * @param bool
     * @return
     */
    public LyLoadingLayout setNoNetworkImageVisible(boolean bool) {

        if (bool) {
            networkImg.setVisibility(View.VISIBLE);
        } else {
            networkImg.setVisibility(View.GONE);
        }
        return this;
    }

    /**
     * 设置ReloadButton的文本,仅对当前所在的地方有效
     *
     * @param text
     * @return
     */
    public LyLoadingLayout setReloadButtonText(@NonNull String text) {

        errorReloadBtn.setText(text);
        networkReloadBtn.setText(text);
        return this;
    }

    /**
     * 设置ReloadButton的文本字体大小,仅对当前所在的地方有效
     *
     * @param sp
     * @return
     */
    public LyLoadingLayout setReloadButtonTextSize(int sp) {

        errorReloadBtn.setTextSize(sp);
        networkReloadBtn.setTextSize(sp);
        return this;
    }

    /**
     * 设置ReloadButton的文本颜色,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setReloadButtonTextColor(@ColorRes int id) {

        errorReloadBtn.setTextColor(ContextCompat.getColor(mContext, id));
        networkReloadBtn.setTextSize(ContextCompat.getColor(mContext, id));
        return this;
    }

    /**
     * 设置ReloadButton的背景,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setReloadButtonBackgroundResource(@DrawableRes int id) {

        errorReloadBtn.setBackgroundResource(id);
        networkReloadBtn.setBackgroundResource(id);
        return this;
    }

    /**
     * 设置ReloadButton的监听器
     *
     * @param listener
     * @return
     */
    public LyLoadingLayout setOnReloadListener(OnReloadListener listener) {

        this.listener = listener;
        return this;
    }

    /**
     * 自定义加载页面,仅对当前所在的Activity有效
     *
     * @param view
     * @return
     */
    public LyLoadingLayout setLoadingPage(View view) {

        defineLoadingPage = view;
        this.removeView(loadingPage);
        defineLoadingPage.setVisibility(View.GONE);
        this.addView(view);
        return this;
    }

    /**
     * 自定义加载页面,仅对当前所在的地方有效
     *
     * @param id
     * @return
     */
    public LyLoadingLayout setLoadingPage(@LayoutRes int id) {

        this.removeView(loadingPage);
        View view = LayoutInflater.from(mContext).inflate(id, null);
        defineLoadingPage = view;
        defineLoadingPage.setVisibility(View.GONE);
        this.addView(view);
        return this;
    }

    /**
     * 获取当前自定义的loadingpage
     *
     * @return
     */
    public View getLoadingPage() {

        return defineLoadingPage;
    }


    /**
     * 获取全局使用的loadingpage
     *
     * @return
     */
    public View getGlobalLoadingPage() {

        return loadingPage;
    }

    @IntDef({Success, Empty, Error, No_Network, Loading})
    @Retention(RetentionPolicy.SOURCE)
    public @interface Flavour {

    }

    public interface OnReloadListener {

        void onReload(View v);
    }

    /**
     * 获取全局配置的class
     *
     * @return
     */
    public static Config getConfig() {

        return mConfig;
    }

    /**
     * 全局配置的Class,对所有使用到的地方有效
     */
    public static class Config {

        public Config setErrorText(@NonNull String text) {

            errorStr = text;
            return mConfig;
        }

        public Config setEmptyText(@NonNull String text) {

            emptyStr = text;
            return mConfig;
        }

        public Config setNoNetworkText(@NonNull String text) {

            netwrokStr = text;
            return mConfig;
        }

        public Config setReloadButtonText(@NonNull String text) {

            reloadBtnStr = text;
            return mConfig;
        }

        /**
         * 设置所有提示文本的字体大小
         *
         * @param sp
         * @return
         */
        public Config setAllTipTextSize(int sp) {

            tipTextSize = sp;
            return mConfig;
        }

        /**
         * 设置所有提示文本的字体颜色
         *
         * @param color
         * @return
         */
        public Config setAllTipTextColor(@ColorRes int color) {

            tipTextColor = color;
            return mConfig;
        }

        public Config setReloadButtonTextSize(int sp) {

            buttonTextSize = sp;
            return mConfig;
        }

        public Config setReloadButtonTextColor(@ColorRes int color) {

            buttonTextColor = color;
            return mConfig;
        }

        public Config setReloadButtonBackgroundResource(@DrawableRes int id) {

            reloadBtnId = id;
            return mConfig;
        }

        public Config setReloadButtonWidthAndHeight(int width_dp, int height_dp) {

            buttonWidth = width_dp;
            buttonHeight = height_dp;
            return mConfig;
        }

        public Config setErrorImage(@DrawableRes int id) {

            errorImgId = id;
            return mConfig;
        }

        public Config setEmptyImage(@DrawableRes int id) {

            emptyImgId = id;
            return this;
        }

        public Config setNoNetworkImage(@DrawableRes int id) {

            networkImgId = id;
            return mConfig;
        }

        public Config setLoadingPageLayout(@LayoutRes int id) {

            loadingLayoutId = id;
            return mConfig;
        }

    }

    public int dp2px(Context context, int dip) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dip * scale + 0.5f);
    }

    public <T extends View> T findViewById(View v, int id) {
        return (T) v.findViewById(id);
    }
}

布局文件

widget_error_page.xml

<?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:gravity="center"
    android:orientation="vertical"
    android:visibility="gone">

    <ImageView
        android:id="@+id/error_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/empty_com" />

    <TextView
        android:id="@+id/error_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:layout_marginTop="10dp"
        android:textColor="#999999" />

    <TextView
        android:id="@+id/error_reload_btn"
        android:layout_width="140dp"
        android:layout_height="36dp"
        android:clickable="true"
        android:gravity="center"
        android:text="重新加载"
        android:textSize="14sp"
        android:textColor="#999999" />


</LinearLayout>
widget_loading_page.xml

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:orientation="horizontal"
    android:visibility="gone">

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar"
        android:indeterminateDuration="1000"
        android:indeterminateOnly="true"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:indeterminateDrawable="@drawable/content_loading"
        />

</LinearLayout>
widget_nonetwork_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mLlNoNetwork"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:visibility="gone">

    <ImageView
        android:id="@+id/no_network_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/default_no_network" />

    <TextView
        android:id="@+id/no_network_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:textSize="14sp"
        android:layout_marginTop="10dp"
        android:textColor="#999999"
        tools:text="网络错误" />

    <TextView
        android:id="@+id/no_network_reload_btn"
        android:layout_width="140dp"
        android:layout_height="36dp"
        android:clickable="true"
        android:gravity="center"
        android:text="重新加载"
        android:textSize="14sp"
        android:textColor="#999999" />


</LinearLayout>
widget_empty_page.xml

<?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:gravity="center"
    android:orientation="vertical"
    android:visibility="gone"
    >

    <ImageView
        android:id="@+id/empty_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/empty_com"
        />

    <TextView
        android:id="@+id/empty_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:lineSpacingExtra="4dp"
        android:textSize="14sp"
        android:textColor="#999999"
        />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LoadingLayout">
        <attr name="isFirstVisible" format="boolean" />
    </declare-styleable>

</resources>

下面介绍用法

LoadingLayout支持全局配置,对所有使用到的地方都起效,需要在Application中配置,如下:

public class App extends Application {

   @Override
   public void onCreate() {
     super.onCreate();
     LyLoadingLayout.getConfig()
                  .setErrorText("出错啦~请稍后重试!")
                  .setEmptyText("抱歉,暂无数据")
                  .setNoNetworkText("无网络连接,请检查您的网络···")
                  .setErrorImage(R.mipmap.define_error)
                  .setEmptyImage(R.mipmap.define_empty)
                  .setNoNetworkImage(R.mipmap.define_nonetwork)
                  .setAllTipTextColor(R.color.gray)
                  .setAllTipTextSize(14)
                  .setReloadButtonText("点我重试哦")
                  .setReloadButtonTextSize(14)
                  .setReloadButtonTextColor(R.color.gray)
                  .setReloadButtonWidthAndHeight(150,40);
   }
}

由于“加载中”的页面,可能每个App都不一样,因此,LoadingLayout支持自定义LoadingPage,如下:

LyLoadingLayout.getConfig().setLoadingPageLayout(R.layout.define_loading_page);

同时,为了适应个别界面的“特殊需求”,LoadingLayout也支持局部设置各种属性,仅对当前对象生效,不影响全局。如下:

LyLoadingLayout  loading = (LyLoadingLayout  ) findViewById(R.id.loading_layout);
loading.setLoadingPage(R.layout.define_loading_page)
       .setEmptyText("暂无报告数据")
       .setErrorText("")
       .setNoNetworkText("")
       .setErrorImage(R.mipmap.ic_launcher)
       .setErrorTextSize(16)
       .setReloadButtonText("点我重新加载哦"); //等等

为ReloadButton设置监听:

  loadingLayout.setOnReloadListener(new LyLoadingLayout.OnReloadListener() {
    @Override
    public void onReload(View v) {
      
    }
    });

设置显示的页面:

loadingLayout.setStatus(LyLoadingLayout.Loading);//加载中
loadingLayout.setStatus(LyLoadingLayout.Empty);//无数据
loadingLayout.setStatus(LyLoadingLayout.Error);//错误
loadingLayout.setStatus(LyLoadingLayout.No_Network);//无网络
loadingLayout.setStatus(LyLoadingLayout.Success);//加载成功

最后,在xml里面使用:

<LyLoadingLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent
    app:isFirstVisible="true">

<TextView
    android:background="@color/colorPrimary"
    android:visibility="visible"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="ContentView"/>

</LyLoadingLayout>

注意:

上一篇下一篇

猜你喜欢

热点阅读