SmartLoadingView2.0震撼来袭，跟着这篇自定义View，你不止用到，还能学到。一个自带dialog联网请求的button。

岩浆李的游鱼leo2
516 阅读6分钟

前言： 之前SmartLoadingView1.0的时候，我也发了一篇掘金。我把自己自定这个View的过程和细节及动画进行了讲解。反应还不错。但是虽然博客反应好，但是github的star量却少的可怜。我一直没有发现原因。直到最近我在重构MVVMdemo的时候，用了下自己的控件，虽然没有bug。但是api非常不好用，包括方法接口，太长。一个简单的功能，一大段代码。于是作者用了1周的时间，进行翻天覆地的改变。不但更新了api而且还增加了很多功能。那么接下来简单介绍下怎么用吧。

添加依赖

  • 项目build.gradle添加如下
    allprojects {
 	repositories {
 		maven { url 'https://jitpack.io' }
 	}
 }
  • app build.gradle添加如下
    dependencies {
        implementation 'com.github.lihangleo2:SmartLoadingView:2.0.1'
}

使用（下方有属性说明）

<com.lihang.smartloadview.SmartLoadingView
        android:id="@+id/smartLoadingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自带dialog按钮"
        android:textColor="#fff"
        android:textSize="15dp"
        app:background_normal="#fff"
        app:errorMsg="联网失败文案"
        app:background_error="#ED7676"
        app:background_cannotClick="#bbbbbb"
        app:cornerRaius="30dp"
        app:textScrollMode="marquee"
        app:smart_clickable="true"
        app:speed="400"
        />

效果展示（截图分辨率低，请扫描下文二维码体验效果）

一、开启动画和转场动画的使用

1.1、动画结束后自动跳转 1.2、自己监听动画实现逻辑

1.1、动画结束后自动跳转

这里点击事件和普通的控件点击事件一致。设置setOnClickListener()即可。

smartLoadingView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                smartLoadingView.start();
                Observable.timer(2000, TimeUnit.MILLISECONDS)
                        .observeOn(AndroidSchedulers.mainThread()).subscribe(along -> {
                    smartLoadingView.onSuccess(MainActivity.this, SecondActivity.class);
                });
            }
        });

点击按钮，联网开始时，启动动画

smartLoadingView.start();

这里我用了RxJava延迟了2s 模拟联网成功。你也可以用handler延迟实现这个功能,这里用了下lambda表达式，可以忽略，只要看下面代码。

//这样既可实现，从一个页面转场动画跳转到另外一个页面（注意这样跳转，第一个页面会被finish掉）。
smartLoadingView.onSuccess(MainActivity.this, SecondActivity.class);

1.2、自己监听动画实现逻辑

前面点击事件和启动动画和 1.1 都一样，不同的时，联网成功的时候，增加动画结束的监听（这里逻辑都是自己处理，不会关闭和跳转任何页面）

smartLoadingView.onSuccess(new SmartLoadingView.AnimationFullScreenListener() {
                        @Override
                        public void animationFullScreenFinish() {
                            Toast.makeText(MainActivity.this, "监听动画结束", Toast.LENGTH_SHORT).show();
                        }
                    });

二、联网请求失败的样式

2.1、请求失败，文案显示在控件上 2.2、请求失败，回到初始状态

2.1、请求失败，文案显示在控件上

这里点击和启动动画都和上面一致。如果你xml里设置了失败文案的话，联网失败时，只需要调用

smartLoadingView.netFaile();

当然，如果你再联网前并不知道失败文案也可以这样，带入当前失败的文案

smartLoadingView.netFaile(msg);

2.2、请求失败，回到初始状态

如果你们的需求是，失败文案显示在别的地方，或者只是弹一个toast,按钮箱回到初始状态，只需要这样

smartLoadingView.backToStart();

三、正常的联网请求（目前作者用于关注）

3.1、正常的联网，正常出结果 3.2、正常联网，打勾出结果
3.3、打勾出结果，打勾消失 3.4、打勾出结果，提醒用户

3.1、正常的联网，正常出结果

这里点击事件和启动动画都和之前一样。正常出结果，只需要结合失败的方法去使用，失败文案，失败背景设置成关注成功的样式，调用只需要这样

smartLoadingView.netFaile("关注成功");

再次点击后，回到初始状态。注意这里不能使用backToStart（）。因为backToStart（）是出结果时使用，即使你使用也不起效果，这里已经出了结果“关注成功”。所以此时，再次点击，需要如下

smartLoadingView.reset();

3.2、正常联网，打勾出结果

前面都是一样的，只是出结果时，实现AnimationOKListener接口

smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
                            @Override
                            public void animationOKFinish() {
                                Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
                            }
                        });

3.3、打勾出结果，打勾消失

如果想实现抖音那样，打勾后，打勾消失，只需要实现，添加一个模式就好了,OKAnimationType.HIDE。（当然上面就是默认的OKAnimationType.NORMAL）

smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
                        @Override
                        public void animationOKFinish() {
                            Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
                        }
                    }, SmartLoadingView.OKAnimationType.HIDE);

3.4、打勾出结果，提醒用户

这个就有点类似提醒效果，不管你的控件在屏幕上的任何位置，最终都会运行到屏幕中间，提醒用户，成功了。也只需添加一个模式OKAnimationType.TRANSLATION_CENTER

smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
                        @Override
                        public void animationOKFinish() {
                            Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
                        }
                    }, SmartLoadingView.OKAnimationType.TRANSLATION_CENTER);

四、文字超出一行，文字自动滚动

设计这个的初衷是因为，可能按钮的错误文案太长了，按钮放不下时使用的

4.1、文字来回滚动 4.2、仿跑马灯滚动

4.1、文字来回滚动

只需要在xml里加上 app:textScrollMode="normal"。或者可以不加，因为默认滚动就是这种方式


4.2、仿跑马灯滚动

xml里只需要加上 app:textScrollMode="marquee"


五、设置不可点击状态

5.1、设置不可点击状态

5.1、设置不可点击状态

在xml里可以通过app:smart_clickable="false"进行设置。当然也能通过代码来设置

smartLoadingView.setSmartClickable(false);

六、这里作者还提供了2个小demo。登录demo和关注demo

6.1、登录demo 6.2、关注demo

可以下载demo自行查看

扫描二维体验效果(下载密码是：123456)


七、自定义属性

按钮文案

  • android:text="自带dialog按钮" 使用了textView的text文字属性

按钮文案颜色值

  • android:textColor="#fff" 使用了textView的textColor颜色值属性

按钮文案字体大小

  • android:textSize="15dp" 使用了textView的字体大小

正常情况下的背景颜色值

  • app:background_normal="#fff" 按钮正常的背景颜色值

联网失败文案

  • app:errorMsg="联网失败文案" 联网失败展示的文案，比如登录时，账号密码错误

联网失败下的背景颜色值

  • app:background_error="#ED7676" 联网失败时展示的背景颜色值，一般为殷红色

不可点击状态下的背景颜色值

  • app:background_cannotClick="#bbbbbb" 不可点击状态下的背景颜色值

圆角属性

  • app:cornerRaius="30dp" 背景的圆角属性

文字滚动模式（文字超过一行时，文字自动滚动）

  • app:textScrollMode="marquee" 比如联网失败后，失败文案太长了。文字自动滚动，这里有2种方式。1、normal来回滚动。 2、marquee跑马灯效果

文字滚动速度

  • app:speed="400" 文字的滚动速度。可以理解为一个文字滚动出屏幕外需要的时间

按钮的点击状态

  • app:smart_clickable="true" 不设置时，默认可以点击，为true。代码里也能通过 smartLoadingView9.setSmartClickable(false) 进行设置

这里稍微说下长宽

长宽都是用系统的layout_width和layout_height，包括设置padding。如果不设置，是有默认间距的


八、github地址

8.1、1.0版本的SmartLoadingView有详细讲解

  • 1.0版讲解
  • 2.0版本，改动很大。其中比如控件继承的是TextView。使用了系统的长宽等属性你，不需要自己去测量。代码也越来越规范了
  • 如果反应不错，作者会出一片从0开始讲解这篇自定义View的教程。兄弟们帮点个赞吧

8.2、关于作者。

Android工作多年了，一直向往大厂。在前进的道路上是孤独的。如果你在学习的路上也感觉孤独，请和我一起。让我们在学习道路上少些孤独

avatar
文章
阅读
粉丝
相关推荐
突破自定义View性能瓶颈
4.0k阅读
 · 
32点赞
Android 自定义 View 独家技巧
3.2k阅读
 · 
48点赞
Android 自定义开源库 EasyView
8.9k阅读
 · 
112点赞
总是跳转到国内版(cn.bing.com)？New Bing使用全攻略
474k阅读
 · 
146点赞
ChatGPT保姆级教程，一分钟学会使用ChatGPT！
794k阅读
 · 
546点赞