Android的多状态布局,可包括:加载中、加载出错、无数据、网络异常和正文内容布局。根据不同请求结果显示不同的布局,给人更加直观的感受,也更容易为用户所接受。

StatefulLayout

一个提供多状态布局的布局框架,支持自定义状态布局,提供默认5种状态布局内容:加载中、出错、空数据、离线、未打开定位。可全局配置他们的展现形式,也可以自定义布局样式。

  • 演示效果

StateLayout - 图1StateLayout - 图2StateLayout - 图3StateLayout - 图4StateLayout - 图5

  • 使用案例
  1. <com.xuexiang.xui.widget.statelayout.StatefulLayout
  2. android:id="@+id/ll_stateful"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:layout_margin="10dp"
  6. android:background="#e2e2e2"
  7. app:stf_animationEnabled="true"
  8. app:stf_inAnimation="@android:anim/slide_in_left"
  9. app:stf_outAnimation="@android:anim/slide_out_right">
  10. <include layout="@layout/layout_content_view" />
  11. </com.xuexiang.xui.widget.statelayout.StatefulLayout>
  • 属性表: (StateLayout)
属性名类型默认值备注
stf_animationEnabledbooleantrue是否启用切换动画
stf_inAnimationreferenceandroid.R.anim.fade_in进入的动画
stf_outAnimationreferenceandroid.R.anim.fade_out退出的动画

常用方法

  • 显示正文布局:showContent();

  • 显示加载中布局:

  1. showLoading()
  2. showLoading(String message)
  • 显示空内容布局:
  1. showEmpty()
  2. showEmpty(String message)
  • 显示出错布局:
  1. showError(OnClickListener clickListener)
  2. showError(String message, OnClickListener clickListener)
  3. showError(String message, String buttonText, OnClickListener clickListener)
  • 显示离线(网络异常)布局:
  1. showOffline(OnClickListener clickListener)
  2. showOffline(String message, OnClickListener clickListener)
  3. showOffline(String message, String buttonText, OnClickListener clickListener)
  • 显示自定义布局:showCustom(final CustomStateOptions options)

  • 设置全局多状态样式的方法:使用UIConfig的setStatefulLayoutConfig(StateLayoutConfig config)方法即可。

MultipleStatusView

一个提供布局状态切换管理的布局,支持:加载中、出错、空数据、离线和正文这5中状态布局。可以获得当前布局的状态,布局通过属性设置加载,当然也提供了默认的状态布局。

  • 演示效果

StateLayout - 图6StateLayout - 图7StateLayout - 图8StateLayout - 图9

  • 使用案例
  1. <com.xuexiang.xui.widget.statelayout.MultipleStatusView
  2. android:id="@+id/multiple_status_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:layout_marginTop="?attr/xui_actionbar_height"
  6. app:msv_contentView="@layout/layout_content_view"/>
  • 属性表: (MultipleStatusView)
    属性名类型默认值备注
    msv_loadingViewreferenceR.layout.msv_loading_view加载页面的布局
    msv_errorViewreferenceR.layout.msv_error_view错误页面的布局
    msv_emptyViewreferenceR.layout.msv_empty_view空页面的布局
    msv_noNetworkViewreferenceR.layout.msv_no_network_view没有网络的页面布局
    msv_contentViewreference/主内容页面的布局

常用方法

  • 获取当前状态:int getViewStatus()
  • 设置重试点击事件:setOnRetryClickListener(OnClickListener onRetryClickListener)
  • 显示空视图:showEmpty()
  • 显示错误视图:showError()
  • 显示加载中视图:showLoading()
  • 显示无网络视图:showNoNetwork()
  • 显示内容视图:showContent()

【注意】:自定义的状态布局的根布局一定要设有控件的ID,否则可能导致切换异常。

StatusView

可自定义状态显示的悬浮布局,常用于网络状态的信息提示等。

  • 演示效果

StateLayout - 图10StateLayout - 图11StateLayout - 图12

  • 使用案例
  1. mStatusView.setStatus(Status.COMPLETE); //成功的状态
  2. mStatusView.setStatus(Status.ERROR); //出错的状态
  3. mStatusView.setStatus(Status.LOADING); //加载中的状态
  4. mStatusView.setStatus(Status.NONE); //无状态
  • 属性表: (StatusView)
属性名类型默认值备注
sv_completereferenceR.layout.msv_loading_view加载页面的布局
sv_errorreferenceR.layout.msv_error_view错误页面的布局
sv_loadingreferenceR.layout.msv_empty_view空页面的布局
sv_customreferenceR.layout.msv_no_network_view没有网络的页面布局
sv_dismissOnCompleteboolean/主内容页面的布局