状态布局管理封装

95 阅读1分钟

源码地址:StateLayoutHelper

介绍

这是一个小巧灵活的状态布局管理封装库

本项目的思路参考了开源项目 yangchong211/YCStateLayout,并且在项目里用到了该库的一些资源及代码,在此先衷心感谢作者 yangchong211 的开源分享!

本项目的思路是通过动态填充状态布局到容器中实现状态的显示、隐藏、切换等管理,本库小巧灵活,核心代码在300行左右,并且具有解耦、方便易用等优点,同时也使用了 ViewStub 进行了性能上的优化。

Demo 截图(实际效果可以运行 demo 查看:joy:):

demo1 demo2 demo3 demo4 demo5

以下简单介绍下引入使用的方法,更多可以查看源码和 demo 进一步去了解。

引入依赖

Step 1. Add the JitPack repository to your build file

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.gitee.cbfg5210:StateLayoutHelper:$version'
}

使用

Step 1-1. 初始化方法一

class Demo1Activity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
     ...
     //初始化 StateLayoutHelper
     val statusLayoutHelper = StateLayoutHelper.Builder(container) //传入父容器
         .addState(STATE_CONTENT, STATE_CONTENT, lazyInflate = false) //不使用 ViewStub 管理,直接添加到容器布局
         .addState(
             STATE_EMPTY, //状态 id
             STATE_EMPTY, //状态布局
             lazyInflate = true, //使用 ViewStub 管理,后续显示状态的时候才填充
             LayoutParams(LayoutParams.MATCH, LayoutParams.MATCH) //默认是 MATCH,MATCH
         )
         .addState(STATE_ERROR,STATE_ERROR)
         .addState(STATE_LOADING,STATE_LOADING)
         .addState(STATE_NETWORK_ERROR,STATE_NETWORK_ERROR)
         .setStateClickListener { helper, state, view ->
             if (state == STATE_NETWORK_ERROR) {
                 //网络异常,点击重试:
                 helper.showState(STATE_LOADING)
             } else if (state == STATE_LOADING) {
                 //取消加载:
                 if (view.id == R.id.btnStateCancel) {
                     Toast.makeText(this@Demo1Activity, "兄台,加载取消啦!", Toast.LENGTH_SHORT).show()
                     helper.showState(STATE_CONTENT)
                 }
             } else {
                 helper.showState(STATE_CONTENT)
             }
         }
         .build()
     ...
    }

companion object {
    //根据需求定义状态及对应的布局,后面通过这个状态值来操作布局:
    private const val STATE_CONTENT = R.layout.activity_demo1_content
    private const val STATE_EMPTY = R.layout.layout_state_empty
    private const val STATE_ERROR = R.layout.layout_state_error
    private const val STATE_LOADING = R.layout.layout_state_loading
    private const val STATE_NETWORK_ERROR = R.layout.layout_state_network_error
    }
}

Step 1-2. 初始化方法二:在页面 xml 布局中定义好状态布局,然后通过 Builder2 传入

class Demo1Activity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
     ...
      val statusLayoutHelper = StateLayoutHelper.Builder2(binding.root)
                .addState(STATE_EMPTY, binding.vsEmpty)
                .addState(STATE_ERROR, binding.vsError)
                .addState(STATE_NETWORK_ERROR, binding.vsNetError)
                .setStateClickListener { _, state, view ->
                    Toast.makeText(
                        this,
                        "Click state:$state,viewId:${view.id}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
                .build()
     ...
    }

companion object {
    private const val STATE_EMPTY = 1
    private const val STATE_ERROR = 2
    private const val STATE_NETWORK_ERROR = 3
    }
}

Step 2. 状态控制

  //显示状态:
  statusLayoutHelper.showState(STATE_CONTENT)
  statusLayoutHelper.showState(STATE_EMPTY)
  statusLayoutHelper.showState(STATE_ERROR)
  statusLayoutHelper.showState(STATE_NETWORK_ERROR)
  statusLayoutHelper.showState(STATE_LOADING)

  //隐藏状态:
  statusLayoutHelper.hideState(STATE_EMPTY)
  statusLayoutHelper.hideState(STATE_ERROR)
  statusLayoutHelper.hideState(STATE_NETWORK_ERROR)
  statusLayoutHelper.hideState(STATE_LOADING)

  //修改显示图片及提示:
   statusLayoutHelper.showState(
      STATE_EMPTY,
      R.drawable.ic_state_empty,
      "兄台,没有数据"
  )
   statusLayoutHelper.showState(
      STATE_ERROR,
      R.drawable.ic_state_network_error,
      "兄台,错误数据"
  )

  //移除状态:
  statusLayoutHelper.removeState(STATE_EMPTY)
  statusLayoutHelper.removeState(STATE_NETWORK_ERROR)

  //清空状态:
  statusLayoutHelper.clearStates()

Step 3. 布局 id 定义说明

如果需要修改状态布局的图片、提示或者设置按钮的点击事件,那么布局里需要使用预定义的 id: ids

直达 DEMO