Skip to content

Commit

Permalink
docs: 更新开发文档
Browse files Browse the repository at this point in the history
  • Loading branch information
liangjingkanji committed Aug 13, 2023
1 parent dcfc0b1 commit a11f616
Show file tree
Hide file tree
Showing 19 changed files with 319 additions and 658 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
- [x] 快速配置点击重试
- [x] 监听缺省页回调
- [x] 自定义动画/布局
- [x] [骨骼动画](https://liangjingkanji.github.io/StateLayout/skeleton/)
- [x] [骨骼动画](https://liangjingkanji.github.io/StateLayout/skeleton.html)
- [x] 传递标签
- [x] 异步线程使用
- [x] 自定义缺省页切换处理
Expand Down
100 changes: 53 additions & 47 deletions docs/animation.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
[生命周期](callback.md)中就提到StateLayout可以直接监听获取到缺省页的视图对话, 很方便地添加自定义动画
[生命周期](callback.md)中获取视图添加自定义动画

> 不推荐盲目追求动画, 过度动画会拖慢应用响应速度, 用户使用体验可能不太好 <br>
!!! warning "动画缺点"
过度使用动画会拖慢响应速度, 用户使用体验可能不太好

## 缺省页显示动画

这里演示如何创建缺省页显示时播放渐变动画, 如果想要其他动画可以自己拓展
以下为缺省页渐变动画演示

<img src="https://i.loli.net/2021/08/14/97rDSVuKIodF1wO.gif" width="250"/>

Expand Down Expand Up @@ -38,62 +39,67 @@
}
```

当然你也可以仅设置你指定的缺省页动画
当然也可以仅设置你指定的缺省页动画


## 缺省页切换动画

上面介绍的只是显示动画, 我们可能还需要处理前一个状态的隐藏以及新的状态的显示, 那么就需要实现接口`StateChangedHandler`自定义处理
如果需要处理前一个状态的隐藏以及新的状态的显示, 那么就得实现接口`StateChangedHandler`自定义处理

默认自带一个渐变透明处理者可以参考他的逻辑替换为其他动画框架
框架自带一个渐变透明`FadeStateChangedHandler`

```kotlin
/**
* 切换状态时使用渐变透明动画过渡
* @param duration 动画执行时间
*/
open class FadeStateChangedHandler(var duration: Long = 400) : StateChangedHandler {

private var stateLayout: StateLayout? = null

override fun onRemove(container: StateLayout, state: View, status: Status, tag: Any?) {
if (container != stateLayout && container.status == Status.LOADING) {
return super.onRemove(container, state, status, tag)
}
state.animate().setDuration(duration).alpha(0f).setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
// 等待动画执行完毕后删除旧的缺省页视图
StateChangedHandler.onRemove(container, state, status, tag)
??? example "参考源码 FadeStateChangedHandler.kt"
```kotlin
/**
* 切换状态时使用渐变透明动画过渡
* @param duration 动画执行时间
*/
open class FadeStateChangedHandler(var duration: Long = 400) : StateChangedHandler {

private var stateLayout: WeakReference<StateLayout> = WeakReference(null)

/**
* StateLayout删除缺省页, 此方法比[onAdd]先执行
* @param container StateLayout
* @param state 将被删除缺省页视图对象
* @param status 当前状态
* @param tag 显示状态传入的tag
*/
override fun onRemove(container: StateLayout, state: View, status: Status, tag: Any?) {
if (container != stateLayout.get() && status == Status.LOADING) {
return super.onRemove(container, state, status, tag)
}
}).start()
}
state.animate().setDuration(duration).alpha(0f).setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
// 等待动画执行完毕后删除旧的缺省页视图
StateChangedHandler.onRemove(container, state, status, tag)
}
}).start()
}

override fun onAdd(container: StateLayout, state: View, status: Status, tag: Any?) {
// 初次加载不应用动画
if (container != stateLayout && container.status == Status.LOADING) {
stateLayout = container
return super.onAdd(container, state, status, tag)
/**
* StateLayout添加缺省页
* @param container StateLayout
* @param state 将被添加缺省页视图对象
* @param status 当前状态
* @param tag 显示状态传入的tag
*/
override fun onAdd(container: StateLayout, state: View, status: Status, tag: Any?) {
// 初次加载不应用动画
if (container != stateLayout.get() && status == Status.LOADING) {
stateLayout = WeakReference(container)
return StateChangedHandler.onAdd(container, state, status, tag)
}
super.onAdd(container, state, status, tag)
state.alpha = 0f
state.animate().setDuration(duration).alpha(1f).start()
}
state.alpha = 0f
super.onAdd(container, state, status, tag)
state.animate().setDuration(duration).alpha(1f).start()
}
}
```
```


可以全局配置或者单例配置
可以全局/单例配置

```kotlin
// 单例
state.stateChangedHandler = StateChangedHandler()

// 全局
StateConfig.stateChangedHandler = StateChangedHandler()
```


## 骨骼动画

骨骼动画只是一种加载中状态动画, 你可以使用Gif图或者动画框架播放设计师提供的动画文件, 比如常用的[Lottie](https://airbnb.design/lottie/)动画框架创建一个xml布局包含动画控件即可自动播放

```
85 changes: 23 additions & 62 deletions docs/callback.md
Original file line number Diff line number Diff line change
@@ -1,92 +1,53 @@
我们可以通过监听缺省页显示的生命周期来获取其对应的视图对象(View), 在其回调中可以拿到缺省页的任何控件(类似于Activity的`onCreate`)
生命周期回调中可以获取状态参数/视图对象

| 函数 | 描述 |
|-|-|
| onEmpty | showEmpty 时回调 |
| onError | showError 时回调 |
| onContent | showContent 时回调 |
| onLoading | showLoading 时回调 |
| onRefresh | showLoading 时回调, 一般在其中执行加载网络或异步任务的逻辑, 而不是加载视图|
| onRefresh | showLoading 时回调, 一般在其中执行加载网络异步任务|
| stateChangedHandler | 完全接管缺省页状态变更时处理 |

每个StateLayout实例都可以设置单独的回调监听, 同时StateConfig可以设置全局的回调监听

> 你对缺省页有任何自定义的需求, 点击事件? 开始播放动画? 通过参数展示不同的错误页或者空页面? 都可以在这里判断! <br>
> `show*()`函数可以通过其参数Any传递任何对象到`on*()`生命周期回调中
## 监听缺省页显示

=== "示例"
```kotlin
state.onRefresh {
// 每次showLoading都会执行该回调
}
state.showLoading()
```

=== "链式调用"
```kotlin

state.onRefresh {
// 每次showLoading都会执行该回调
}.showLoading()
```
```kotlin
state.onRefresh {
// 执行请求
}.showLoading()
```

监听缺省页显示

=== "示例"
```kotlin
state.onEmpty {
findViewById<TextView>(R.id.msg).text = "空布局信息"
}

state.onError {

}

state.onLoading {

}

state.onRefresh {

}

state.onContent {

}
```

=== "链式调用"
```kotlin
state.onEmpty {

}.onError {
```kotlin
state.onEmpty {

}.onLoading {
}.onError {

}.onRefresh {
}.onLoading {

}
```
}.onRefresh {

`onRefresh``onLoading`触发的条件一样, 但是他们的函数参数接收者不一样, 他们所代表的的作用也不同
}
```

- onRefresh 中常见处理异步任务(例如网络请求)
- onLoading 中常见处理的是加载视图/动画
`onRefresh``onLoading`触发条件相同, 但是参数不同, 他们所代表的的作用也不同

## 自定义缺省页切换处理
1. `onRefresh` 中常见处理网络请求异步任务
2. `onLoading` 中常见处理的是加载视图/动画

创建`StateChangedHandler`来取代默认的缺省页切换逻辑, 可以自定义缺省页显示/隐藏动画, 并且可以自定义布局参数(宽高)
## 完全自定义

StateChangedHandler默认是removeView/addView, 如果你想改成visibility就可以实现接口自定义处理
实现`StateChangedHandler`可以实现最大程度自定义

可以全部配置或者单例配置
甚至来取代默认的缺省页切换逻辑, 可以自定义缺省页显示/隐藏动画, 并且可以自定义布局参数(宽高)

```kotlin
// 单例
state.stateChangedHandler = StateChangedHandler()

// 全局
StateConfig.stateChangedHandler = StateChangedHandler()
```
```

StateChangedHandler默认是removeView/addView, 如果你想改成visibility就请自定义
23 changes: 23 additions & 0 deletions docs/config.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
在Application中可以使用[StateConfig](https://github.com/liangjingkanji/StateLayout/blob/master/statelayout/src/main/java/com/drake/statelayout/StateConfig.kt)进行初始化配置

```kotlin
StateConfig.apply {
emptyLayout = R.layout.layout_empty
errorLayout = R.layout.layout_error
loadingLayout = R.layout.layout_loading

setRetryIds(R.id.msg) // 全局的重试Id

onLoading {

}

onEmpty {

}

onError {

}
}
```
Loading

0 comments on commit a11f616

Please sign in to comment.