美文网首页
简单大方的状态视图,快了解一下!

简单大方的状态视图,快了解一下!

作者: 九心_ | 来源:发表于2019-10-21 20:03 被阅读0次

前言

状态视图是大家平时都会使用的视图,目的是为了灵活地切换数据错误加载空数据这几种状态,为方便平日使用,我就封装了一款简洁大方的状态视图,以下就是使用效果:

状态视图

特点

该状态视图的优点是:

  • 样式灵活:各状态下的文本、错误空数据状态下的Drawable和加载动画的颜色可随意修改,并且默认样式足够简洁美观
  • 状态切换灵活
  • 使用简单:提供默认样式

使用

第一步:添加依赖

在需要使用的模块中的build.gradle文件中添加:

implementation 'com.orient:Orient-Ui:1.0.1'

第二步:添加进布局文件xml

假设父布局是线性布局,数据视图为TextView,则我们的布局代码为:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>
      
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        .../>
          
    <!-- Data View'visibility should be gone  -->
    <TextView
        android:id="@+id/tv_name"
        ...
        android:visibility="gone"/>
          
    <com.orient.me.widget.placeholder.StatusView
        android:id="@+id/sv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:comEmptyText="@string/test_empty"
        app:comErrorText="@string/test_error"
        app:comLoadingText="@string/test_loading"
        app:comLoadingColor="@color/amber_300"
        />
          
</LinearLayout>

在这里我有必要介绍一下StatusView的六个属性:

名称 作用
app:comEmptyText 空数据状态下显示的文本
app:comErrorText 错误状态下显示的文本
app:comLoadingText 加载状态下显示的文本
app:comLoadingColor 加载动画的颜色
app:comEmptyDrawable 空数据状态下的Drawable资源文件
comErrorDrawable 错误状态下的Drawable资源文件

即使你一个值都不设置,它也是有默认值的,在上面的布局文件中,我只使用了以上属性的前四个,有需求的同学可以自行设置。

注意:数据视图的android:visibility需要设置为gone

第三步:获取并绑定

在这一步,我们需要获取状态视图和数据视图,然后进行绑定:

@BindView(R.id.toolbar)
Toolbar mToolbar;
@BindView(R.id.tv_name)
TextView mContent;
@BindView(R.id.sv_content)
StatusView mStatusView;

@Override
protected void initWidget() {
    super.initWidget();
    // 视图绑定
    mStatusView.bind(mContent);
    
    //  ... 状态事件切换设置
}

我在上面的代码中使用了ButterKnife,以及initWidget方法发生在Activity的生命周期onCreate中。

这里的状态视图是mStatusView,数据视图是TextView,当然,你也可以将RecycelrViewListView甚至布局文件设置为数据视图,然后调用StatusView#bind完成绑定。

第四步:状态切换

在第三步代码中我省略了状态切换的设置:

protected void initWidget() {
    super.initWidget();
    // 视图绑定
    mStatusView.bind(mContent);
    // 初始为 空数据 状态
    mStatusView.triggerEmpty();

    mToolbar.setNavigationOnClickListener(v -> onBackPressed());
    mToolbar.inflateMenu(R.menu.place_holder_menu);
    mToolbar.setOnMenuItemClickListener(item -> {
        switch (item.getItemId()){
            case R.id.menu_loading:
                // 切换为 加载 状态
                mStatusView.triggerLoading();
                return true;
            case R.id.menu_show_data:
                // 切换为 显示数据 的状态
                mStatusView.triggerOk();
                return true;
            case R.id.menu_error:
                // 切换为 显示错误 的状态
                mStatusView.triggerNetError();
                //mEmptyView.triggerError();
                return true;
            case R.id.menu_null:
                // 切换为错误状态
                mStatusView.triggerEmpty();
                // 需要条件的时候可以使用 mEmptyView.triggerOkOrEmpty(boolean isOk);
                return true;
            default:
                return false;
        }
    });
}

除了第三步的视图绑定,initWidget还做了:

  • StatusView初始为空数据状态
  • 设置Toolbar的菜单栏
  • 设置Toolbar菜单的点击事件,四个状态的切换方法可以从中看出

上述代码写完以后,效果就出现了:


效果

关于项目

项目地址:https://github.com/mCyp/Orient-Ui

如果你对时间轴感兴趣,也可以关注该项目或者阅读我的上篇文章:

《花式实现时间轴,样式由你来定!》

致谢

  • QiujuerStatusView改编自Qiujuer老师的慕课网视频中EmptyView
  • AVLoadingIndicatorView:加载动画的代码来自该库,效果很赞!
  • 旅游图标:对于这种彩色风格的图标,爱了爱了~❤️

相关文章

  • 简单大方的状态视图,快了解一下!

    前言 状态视图是大家平时都会使用的视图,目的是为了灵活地切换数据、错误、加载和空数据这几种状态,为方便平日使用,我...

  • iOS iPhoneX 适配

    一 iPhoneX各个视图值 1.简单定义一下IPoneX 2.了解IPhoneX各个视图的高度 状态栏 - st...

  • iOS-APP、应用程序生命周期

    上一篇: iOS-视图、控制器生命周期 前言,之前简单了解控制器视图的声明周期,当然要了解一下应用程序的生命周期。...

  • 初入VUE

    1.首先了解一下VUE是什么? 简单来说他是一套友好的渐进式框架,熟悉之后非常简便。他的核心在于视图层,什么是视图...

  • 初识:View【一】

    有了界面Activity,那就要在它上面显示各种View(视图)了。接下来我们将简单的了解View(视图) 视图分...

  • Swift 纯代码布局框架 SnapKit 基本用法

    本文就简单介绍一下SnapKit基本的使用。就说明一下视每种视图之间关系的情况下,怎么建立约束,从而见见了解Sna...

  • iOS中给view设置阴影效果

    iOS开发中我们经常会遇到给指定视图设置其阴影效果 今天就来简单整理一下这里只是简单的给视图添加上阴影的效果 简单...

  • 今天小弟来谈谈UITabBar

    UITabBarViewController(标签视图控制器) 用来管理没有层级关系的视图控制器先来了解一下UIT...

  • 简单大方

    我见过一个人,他穿着一身工作装,站在建设银行的门口,给来往的老百姓指导如何办卡。 只见他腰上挂着奔驰的车钥匙,...

  • 层动画Layer Animations

    前几篇主要是了解视图动画View Animations,现在可以了解一下核心动画Core Animation的ap...

网友评论

      本文标题:简单大方的状态视图,快了解一下!

      本文链接:https://www.haomeiwen.com/subject/fuezmctx.html