# StateLayoutHelper

**Repository Path**: cbfg5210/StateLayoutHelper

## Basic Information

- **Project Name**: StateLayoutHelper
- **Description**: 这是一个小巧灵活的状态布局管理封装库
- **Primary Language**: Android
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-18
- **Last Updated**: 2022-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# StateLayoutHelper
[![](https://jitpack.io/v/com.gitee.cbfg5210/StateLayoutHelper.svg)](https://jitpack.io/#com.gitee.cbfg5210/StateLayoutHelper)

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

本项目的思路参考了开源项目 [yangchong211/YCStateLayout](https://github.com/yangchong211/YCStateLayout/blob/master/README_CH.md)，并且在项目里用到了该库的一些资源及代码，在此先衷心感谢作者 [yangchong211](https://github.com/yangchong211) 的开源分享!

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

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

![demo1](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/demo1.png)
![demo2](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/demo2.png)
![demo3](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/demo3.png)
![demo4](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/demo4.png)
![demo5](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/demo5.png)

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

### 引入依赖
#### Step 1. Add the JitPack repository to your build file
```gradle
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
```
#### Step 2. Add the dependency
```gradle
dependencies {
    implementation 'com.gitee.cbfg5210:StateLayoutHelper:$version'
}
```

### 使用
#### Step 1-1. 初始化方法一
```kotlin
class Demo1Activity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
     ...
     //初始化 StateLayoutHelper
     val statusLayoutHelper = StateLayoutHelper.Builder(container) //传入父容器
         .addState(STATE_CONTENT, STATE_CONTENT, lazyInflate = false) //直接添加到容器布局
         .addState(
             STATE_EMPTY, //状态 id
             STATE_EMPTY, //状态布局
             lazyInflate = true, //后续显示状态的时候才填充
         )
         .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 传入
```kotlin
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. 状态控制
```kotlin
  //显示状态：
  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](https://gitee.com/cbfg5210/StateLayoutHelper/raw/master/arts/ids.png)

### 直达 DEMO
* [基础使用 Demo](https://gitee.com/cbfg5210/StateLayoutHelper/blob/master/app/src/main/java/com/example/statelayouthelper/Demo1Activity.kt)
* [参数使用 Demo - index，addToFirstIfLinearLayout](https://gitee.com/cbfg5210/StateLayoutHelper/blob/master/app/src/main/java/com/example/statelayouthelper/Demo21Fragment.kt)
* [LayoutHandler Demo - 自行添加状态布局到容器](https://gitee.com/cbfg5210/StateLayoutHelper/blob/master/app/src/main/java/com/example/statelayouthelper/Demo22Fragment.kt)
* [Builder2 Demo](https://gitee.com/cbfg5210/StateLayoutHelper/blob/master/app/src/main/java/com/example/statelayouthelper/Demo3Activity.kt)