SmartLoadingView

Project Url: lihangleo2/SmartLoadingView
Introduction: 一个自带 dialog 联网请求的 button。且自带多种酷炫效果：有转场效果，和正常联网请求等。支持设置圆角；支持设置背景颜色值；设置字体颜色值；字体大小；自带 dialog；字体超过一行，自动滚动（带 2 种滚动样式）；通过对动画的不同监听可以实现不同的效果。具体看 README
More: Author   ReportBugs   
Tags:

  • 支持在任何布局上使用
  • 支持转场动画（可用于登录）
  • 支持正常网络请求且带有多种酷炫效果


添加依赖

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


使用（下方有属性说明）

<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、打勾出结果，提醒用户 


//2.0.2 后把关注方式做成了属性，切记，如果你想用哪种方式，务必要在 xml 上写上
 <attr name="click_mode">
            <!-- 正常的样式 -->
            <enum name="normal" value="1" />
            <!-- 隐藏的样式 -->
            <enum name="hide" value="2" />
            <!-- 平移到中间的样式-->
            <enum name="translate_center" value="3" />
            <!-- 走失败模式的样式-->
            <enum name="like_faile" value="4" />

        </attr>

3.1、正常的联网，正常出结果 app:click_mode="like_faile"

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

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

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

smartLoadingView.reset();


3.2、正常联网，打勾出结果 app:click_mode="normal"

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

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


3.3、打勾出结果，打勾消失 app:click_mode="hide"

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

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


3.4、打勾出结果，提醒用户 app:click_mode="translate_center"

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

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


3.5、上个版本很多朋友说，没有默认选中的状态。在 xml 里写上你的 click_mode 后，只需一句代码

binding.smartLoadingViewNormal.setFollow(true);


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

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

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)


自定义属性

1、按钮文案

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

    2、按钮文案颜色值

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

    3、按钮文案字体大小

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

    4、正常情况下的背景颜色值

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

    5、联网失败文案

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

    6、联网失败下的背景颜色值

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

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

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

    8、圆角属性

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

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

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

    10、文字滚动速度

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

    11、按钮的点击状态

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

    12、这里稍微说下长宽

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

    13、click_mode 关注方式

  • 这里有四种模式，like_faile、normal、hide、translate_center；不管用哪种模式，xml 一定要加上这个属性。like_faile：像联网失败的方式展示关注成功；normal：正常的关注打勾动画；hide：正常打勾关注后，按钮消失。translate_center：打勾关注后，移动到屏幕中心提醒。


    关于作者。

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

  • QQ 群： 209010674 android 交流群（点击图标，可以直接加入）


LICENSE

MIT License

Copyright (c) 2019 leo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

Highly Recommended：Google Play 4.7 Star Android Developer Tools, Decompile, View Manifest, Open Debug Options Quickly

Apps
Android Developer Tools
Android Developer Tools Pro
About Me
Tools: TimeShining
GitHub: Trinea
Facebook: Dev Tools