Android缺省页的正确打开方式(优雅的处理loading、error、empty各种状态缺省)

MultiStatePage

下载Demo

github项目地址

Activity	Fragment	View	ViewPager2

Lottie拓展（自定义State）	State刷新	网络请求	mock

MultiStatePage的功能及特点

• 无需在布局添加视图代码
• 可显示自定义状态视图,任意拓展
• 可用于 Activity、Fragment、或指定的 View
• 自定义重新请求监听
• 可动态更新视图样式
• 可结合第三方控件使用
• 支持状态回调监听
• kotlin开发更易用的API

开始

添加依赖

Add the JitPack repository to your build file

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

Add the dependency

dependencies {
    implementation 'com.github.Zhao-Yan-Yan:MultiStatePage:1.0.0'
}

1.生成MultiStateContainer

在View上使用

基础用法

val multiStateContainer = MultiStatePage.multiState(view)

kotlin 拓展方法

val multiStateContainer = view.multiState()

在Activity 根View中使用

基础用法

class MultiStateActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.xxx)
       val multiStateContainer = MultiStatePage.multiStateActivity(this)
    }
}

kotlin 拓展方法

class MultiStateActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.xxx)
        val multiStateContainer = multiStateActivityRoot()
    }
}

在Fragment根View中使用

class MultiStateFragment : BaseFragment<FragmentMultiStateBinding>() {
    private lateinit var multiStateContainer: MultiStateContainer
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val root = inflater.inflate(R.layout.activity_api, container, false)
        multiStateContainer = MultiStatePage.multiState(root)
        return multiStateContainer
    }
}

2.切换状态

调用 MultiStateContainer.show<T>() 方法

默认内置3种状态

val multiStateContainer = MultiStatePage.multiState(view)
//成功页 
multiStateContainer.show<SuccessState>()
//错误页
multiStateContainer.show<ErrorState>()
//空页面
multiStateContainer.show<EmptyState>()
//加载状态页
multiStateContainer.show<LoadingState>()

动态设置state

multiStateContainer.show<ErrorState>{errorState->
    errorState.setErrorMsg("xxx出错了")
}

设置重试回调

val multiStateContainer = MultiStatePage.multiState(view){
    Toast.makeText(context, "retry", Toast.LENGTH_SHORT).show()
}

自定义State

1.继承MultiState

class LottieWaitingState : MultiState() {
    override fun onCreateMultiStateView(
        context: Context,
        inflater: LayoutInflater,
        container: MultiStateContainer
    ): View {
        return inflater.inflate(R.layout.multi_lottie_waiting, container, false)
    }

    override fun onMultiStateViewCreate(view: View) {
        //逻辑处理
    }

    override fun enableReload(): Boolean = false
}

enableReload() 是否允许retry回调 false不允许

2.使用前需register

class LottieExtActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MultiStatePage.register(LottieWaitingState())
        val multiStateContainer = multiStateActivityRoot()
        multiStateContainer.show<LottieWaitingState>()
    }
}

也可以在Application中注册(建议)

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        MultiStatePage.register(CustomState(), OtherState())
    }
}

小技巧

可以借助kotlin的拓展函数封装常用的状态

fun MultiStateContainer.showSuccess(callBack: (SuccessState) -> Unit = {}) {
    show<SuccessState> {
        callBack.invoke(it)
    }
}

fun MultiStateContainer.showError(callBack: (ErrorState) -> Unit = {}) {
    show<ErrorState> {
        callBack.invoke(it)
    }
}

fun MultiStateContainer.showEmpty(callBack: (EmptyState) -> Unit = {}) {
    show<EmptyState> {
        callBack.invoke(it)
    }
}

fun MultiStateContainer.showLoading(callBack: (LoadingState) -> Unit = {}) {
    show<LoadingState> {
        callBack.invoke(it)
    }
}

调用

val multiStateContainer = multiStateActivityRoot()
multiStateContainer.showLoading()

Thanks

• DylanCaiCoding/LoadingHelper
• KingJA/LoadSir
• airbnb/lottie-android
• lottie动画资源社区