一个性能不错的多状态加载布局

什么是多状态加载布局

对于大多数 App 而言，项目中都有多状态加载 View 这种需求，如下图所示

效果图

对应到开发中，我们通常会开发一个对应的自定义 layout 用于根据页面不同的状态来显示不同的提示 view。

在项目中，我们大多会在开发初期就把这套 layout 框架写好，然后其他人的自己的开发过程中直接使用即可。如下所示：

<com.okada.StatusLayout
  android:id="@+id/statusLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@id/ll_btn_container"
  android:layout_margin="16dp"
  android:background="@android:color/holo_blue_light">

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="16dp"
      android:background="@android:color/holo_green_light"
      android:gravity="center"
      android:text="我是内容"
      android:textSize="18sp"/>
</com.yuejia.student.StatusLayout>

实现原理

在实现 StatusLayout 时，首先选择继承一个 ViewGroup 作为自己的父类。然后把子 View 分为 4 个部分：内容视图、加载中、空视图、错误视图。根据不同的的状态，控制不同状态下的 layout 显示。

StatusLayout 作为一个父容器只关心自己的 ContentView，异常页面和加载页面甚至可能没有机会出现，所以为了提高性能，用了 ViewStub 去懒加载视图

代码实现

把子 View 分为 4 个部分：内容视图、加载中、空视图、错误视图。如下:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/contentLayoutContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ViewStub
        android:id="@+id/viewStub_loading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_loading"/>

    <ViewStub
        android:id="@+id/viewStub_empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_empty"/>

    <ViewStub
        android:id="@+id/viewStub_error"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_error"/>
</merge>

核心代码

看一下

<com.okada.StatusLayout
  android:id="@+id/statusLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@id/ll_btn_container"
  android:layout_margin="16dp"
  android:background="@android:color/holo_blue_light">

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="16dp"
      android:background="@android:color/holo_green_light"
      android:gravity="center"
      android:text="我是内容"
      android:textSize="18sp"/>
</com.yuejia.student.StatusLayout>

要让 TextView add 到内容视图中，就需要重写 public void addView(View child, int index, ViewGroup.LayoutParams params) 方法。如下

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    if (mContentLayoutContainer == null) {
        // 这时候 mContentLayoutContainer 还没有加载好，Status 目前正在做
        // add mContentLayoutContainer 和另外 3 个 ViewStub 的工作
        super.addView(child, index, params);
    } else {
        if (mContentLayoutContainer.getChildCount() == 0) {
            // 把 TextView 加入到 mContentLayoutContainer 中
            mContentLayoutContainer.addView(child, index, params);
        } else {
            // 内容视图下只允许有一个子视图，其他视图就不要加到内容视图进去了
            super.addView(child, index, params);
        }
    }
}

完整代码

StatusLayout


import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewStub;
import android.widget.FrameLayout;

import com.yuejia.student.R;

public class StatusLayout extends FrameLayout {

    public static final int LOADING = 1;
    public static final int EMPTY = 2;
    public static final int CONTENT = 3;
    public static final int ERROR = 4;

    public StatusLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public StatusLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public StatusLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private int mLoadingLayoutResId;
    private int mEmptyLayoutResId;
    private int mErrorLayoutResId;

    private View mLoadingLayout;
    private View mEmptyLayout;
    private View mErrorLayout;

    private FrameLayout mContentLayoutContainer;
    private FrameLayout mLoadingLayoutContainer;
    private FrameLayout mEmptyLayoutContainer;
    private FrameLayout mErrorLayoutContainer;

    private void init(Context context, AttributeSet attrs, int defStyle) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.StatusLayout);
        try {
            mLoadingLayoutResId = typedArray.getResourceId(R.styleable.StatusLayout_stl_loadingLayout,
                    R.layout.status_layout_loading);
            mEmptyLayoutResId = typedArray.getResourceId(R.styleable.StatusLayout_stl_emptyLayout,
                    R.layout.status_layout_empty);
            mErrorLayoutResId = typedArray.getResourceId(R.styleable.StatusLayout_stl_errorLayout,
                    R.layout.status_layout_error);
        } finally {
            typedArray.recycle();
        }

        LayoutInflater.from(context).inflate(R.layout.status_layout, this);

        mContentLayoutContainer = (FrameLayout) findViewById(R.id.contentLayoutContainer);
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (mContentLayoutContainer == null) {
            super.addView(child, index, params);
        } else {
            if (mContentLayoutContainer.getChildCount() == 0) {
                mContentLayoutContainer.addView(child, index, params);
            } else {
                super.addView(child, index, params);
            }
        }
    }

    public void setMode(@StateLayoutMode int mode) {
        switch (mode) {
            case LOADING:
                setLoadingLayoutVisibility(true);

                setEmptyLayoutVisibility(false);
                setErrorLayoutVisibility(false);
                setContentLayoutVisibility(false);
                break;

            case EMPTY:
                setEmptyLayoutVisibility(true);

                setLoadingLayoutVisibility(false);
                setErrorLayoutVisibility(false);
                setContentLayoutVisibility(false);
                break;

            case CONTENT:
                setContentLayoutVisibility(true);

                setEmptyLayoutVisibility(false);
                setLoadingLayoutVisibility(false);
                setErrorLayoutVisibility(false);
                break;

            case ERROR:
                setErrorLayoutVisibility(true);

                setEmptyLayoutVisibility(false);
                setLoadingLayoutVisibility(false);
                setContentLayoutVisibility(false);
                break;
        }
    }

    public void setLoadingLayout(View loadingLayout) {
        mLoadingLayout = loadingLayout;
    }

    public void setEmptyLayout(View emptyLayout) {
        mEmptyLayout = emptyLayout;
    }

    public void setErrorLayout(View errorLayout) {
        mErrorLayout = errorLayout;
    }

    private void setLoadingLayoutVisibility(boolean visible) {
        if (mLoadingLayoutContainer == null) {
            if (visible) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.viewStub_loading);
                viewStub.inflate();
                mLoadingLayoutContainer = (FrameLayout) findViewById(R.id.status_loading);
                if (mLoadingLayout == null) {
                    LayoutInflater.from(getContext()).inflate(mLoadingLayoutResId, mLoadingLayoutContainer);
                } else {
                    mLoadingLayoutContainer.addView(mLoadingLayout);
                }
                mLoadingLayoutContainer.setVisibility(View.VISIBLE);
            }
        } else {
            mLoadingLayoutContainer.setVisibility(visible ? View.VISIBLE : View.GONE);
        }
    }

    private void setEmptyLayoutVisibility(boolean visible) {
        if (mEmptyLayoutContainer == null) {
            if (visible) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.viewStub_empty);
                viewStub.inflate();
                mEmptyLayoutContainer = (FrameLayout) findViewById(R.id.status_empty);
                if (mEmptyLayout == null) {
                    LayoutInflater.from(getContext()).inflate(mEmptyLayoutResId, mEmptyLayoutContainer);
                } else {
                    mEmptyLayoutContainer.addView(mEmptyLayout);
                }
                mEmptyLayoutContainer.setVisibility(View.VISIBLE);
            }
        } else {
            mEmptyLayoutContainer.setVisibility(visible ? View.VISIBLE : View.GONE);
        }
    }

    private void setErrorLayoutVisibility(boolean visible) {
        if (mErrorLayoutContainer == null) {
            if (visible) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.viewStub_error);
                viewStub.inflate();
                mErrorLayoutContainer = (FrameLayout) findViewById(R.id.status_error);
                if (mErrorLayout == null) {
                    LayoutInflater.from(getContext()).inflate(mErrorLayoutResId, mErrorLayoutContainer);
                } else {
                    mErrorLayoutContainer.addView(mErrorLayout);
                }
                mErrorLayoutContainer.setVisibility(View.VISIBLE);
            }
        } else {
            mErrorLayoutContainer.setVisibility(visible ? View.VISIBLE : View.GONE);
        }
    }

    private void setContentLayoutVisibility(boolean visible) {
        mContentLayoutContainer.setVisibility(visible ? View.VISIBLE : View.GONE);
    }
}

使用注解定义状态，而不是使用枚举

import android.support.annotation.IntDef;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

@IntDef({
        StatusLayout.LOADING,
        StatusLayout.EMPTY,
        StatusLayout.ERROR,
        StatusLayout.CONTENT
})
@Retention(RetentionPolicy.SOURCE)
public @interface StateLayoutMode {
}

用到的布局文件

status_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/contentLayoutContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ViewStub
        android:id="@+id/viewStub_loading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_loading"/>

    <ViewStub
        android:id="@+id/viewStub_empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_empty"/>

    <ViewStub
        android:id="@+id/viewStub_error"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/status_layout_container_error"/>

</merge>

status_layout_container_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/status_loading"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

status_layout_container_error.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/status_error"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

status_layout_container_empty.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/status_empty"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

status_layout_loading.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="加载中..."
        android:textSize="18sp"/>

</LinearLayout>

status_layout_error.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="哎呀，发生了错误"
        android:textSize="18sp"/>

</LinearLayout>

status_layout_empty.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="暂无数据"
        android:textSize="18sp"/>

</LinearLayout>

使用

定义好布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_status_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.okada.StatusLayoutActivity">

    <LinearLayout
        android:id="@+id/ll_btn_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Content"/>

        <Button
            android:id="@+id/btn_loading"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Loading"/>

        <Button
            android:id="@+id/btn_empty"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Empty"/>

        <Button
            android:id="@+id/btn_error"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Error"/>
    </LinearLayout>

    <com.okada.StatusLayout
        android:id="@+id/statusLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ll_btn_container"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="我是内容"
            android:textSize="18sp"/>
    </com.okada.StatusLayout>

</RelativeLayout>

监听按钮，改变状态

public class StatusLayoutActivity extends AppCompatActivity implements View.OnClickListener {

    private StatusLayout mStatusLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_status_layout);

        mStatusLayout = (StatusLayout) findViewById(R.id.statusLayout);

        View loadingView = getLayoutInflater().inflate(R.layout.abc_loading, null);
        loadingView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(StatusLayoutActivity.this, "Loading", Toast.LENGTH_SHORT).show();
            }
        });
        mStatusLayout.setLoadingLayout(loadingView);

        View emptyView = getLayoutInflater().inflate(R.layout.abc_empty, null);
        emptyView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(StatusLayoutActivity.this, "EMPTY", Toast.LENGTH_SHORT).show();
            }
        });
        mStatusLayout.setEmptyLayout(emptyView);

        View errorView = getLayoutInflater().inflate(R.layout.abc_error, null);
        errorView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(StatusLayoutActivity.this, "ERROR", Toast.LENGTH_SHORT).show();
            }
        });
        mStatusLayout.setErrorLayout(errorView);

        findViewById(R.id.btn_content).setOnClickListener(this);
        findViewById(R.id.btn_loading).setOnClickListener(this);
        findViewById(R.id.btn_empty).setOnClickListener(this);
        findViewById(R.id.btn_error).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_content:
                mStatusLayout.setMode(StatusLayout.CONTENT);
                break;

            case R.id.btn_loading:
                mStatusLayout.setMode(StatusLayout.LOADING);
                break;

            case R.id.btn_empty:
                mStatusLayout.setMode(StatusLayout.EMPTY);
                break;

            case R.id.btn_error:
                mStatusLayout.setMode(StatusLayout.ERROR);
                break;
        }
    }
}

效果

加载中

空视图

内容视图

出错视图

最后编辑于：2017.12.08 02:10:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342