备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Android-来填写一个验证码吧！（二）

2018-11-08 1358
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

android

在开发中为了防止恶意破解、恶意提交等行为，所以我们在提交数据时，都会使用验证功能，去尽量区别人机。在Android应用中我们同样需要这一功能，去有效的避开恶意注册，恶意攻击。

上篇文章：Android-来填写一个验证码吧！（一）中，介绍了一种，数字英文随机生成的图片验证码，使用很简单，一行代码，调用一个工具类，就能完美的实现图片验证码的显示。

另外一种常见的，可以实现简单人机区别检测的方法，滑动验证条，效果如下：
滑动验证条
那么该如何实现呢？具体思路如下：
使用拓展自定义的SeekBar实现滑动条，根据触摸事件过滤错误操作，根据进度回调设置不同状态效果，再根据状态设置上不同的操作提示。

理清思路，接下来看下代码吧！

首先制作我们的拓展自定义SeekBar实现滑动条，然后根据dispatchTouchEvent进行事件的拦截，过滤非起始点的点击事件，避免SeekBar自带的点击跳转进度的效果，不然的话还叫什么滑动进度条。
这里的计算，是根据ValidationSeekBar的Left点坐标位为起始，根据thumb的大概大小计算出有效触摸范围，而其余的，通过 return true;来进行拦截。

public class ValidationSeekBar extends AppCompatSeekBar {
    //验证条的宽度
    private int index = 0;
    //点击状态
    private boolean k = true;
    private int xDOWN;

    class measureRunnable
            implements Runnable {
        @Override
        public void run() {
            //重新测绘获取验证条宽度
            ValidationSeekBar.this.measure(0, 0);
            index = ValidationSeekBar.this.getLeft();
            Log.e("ValidationSeekBar", "index:" + index);
        }
    }

    public ValidationSeekBar(Context context) {
        super(context);
        this.post(new measureRunnable());
    }

    public ValidationSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.post(new measureRunnable());
    }

    public ValidationSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.post(new measureRunnable());
    }


    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        int x = (int) event.getX();

        //过滤SeekBar的点击事件
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            xDOWN = (int) event.getX();
            k = true;
            if (xDOWN - index > 200) {
                k = false;
                return true;
            }
        }

        //过滤SeekBar的点击事件
        if (event.getAction() == MotionEvent.ACTION_UP) {
            k = true;
            if (xDOWN - index > 200) {
                k = false;
                return true;
            }
        }

        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            if (!k) {
                return true;
            }
        }
        return super.dispatchTouchEvent(event);
    }
}

以上，我的ValidationSeekBar就完成了。接下来去搭建我们的xml布局吧。以下是滑动条的布局：使用我们的ValidationSeekBar以及TextView组合出相关的提示效果。

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="30dp">

        <sakura.backdemo.ValidationSeekBar
            android:id="@+id/sb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/seekbar_bg"
            android:thumb="@drawable/thumb"
            android:thumbOffset="-3px" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="请按住滑块，拖动到最右边"
            android:textColor="#888888"
            android:textSize="14dp" />

    </RelativeLayout>

来看一下整体的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_red_light">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="设置登录密码"
            android:textColor="#fff"
            android:textSize="20sp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/bg"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:text="中国+86"
                android:textColor="#A2CD5A"
                android:textSize="16sp" />

            <View
                android:layout_width="0.1dp"
                android:layout_height="match_parent"
                android:background="#FF7F00" />

            <EditText
                android:id="@+id/et_forgetPass_PhoneNum"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:background="@null"
                android:digits="0123456789"
                android:hint="请填入您的手机号"
                android:inputType="number"
                android:maxLength="11"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="30dp">

        <sakura.backdemo.ValidationSeekBar
            android:id="@+id/sb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/seekbar_bg"
            android:thumb="@drawable/thumb"
            android:thumbOffset="-3px" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="请按住滑块，拖动到最右边"
            android:textColor="#888888"
            android:textSize="14dp" />

    </RelativeLayout>

    <Button
        android:id="@+id/getCode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="35dp"
        android:background="#ccc"
        android:text="获取验证码"
        android:textColor="#fff"
        android:textSize="18sp" />

</LinearLayout>

这样整个界面的布局就出来了，但是还不够，我们还希望为我们的ValidationSeekBar增加更多的状态反馈效果。那么我们需要制作一些progressDrawable和thumb

材料一：默认状态下的progressDrawable

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--seekBar背景-->
    <item android:id="@android:id/background">
        <!--形状-->
        <shape android:shape="rectangle">
            <!--大小-->
            <size android:height="42dp" />
            <!--圆角-->
            <corners android:radius="2dp" />
            <!--背景-->
            <solid android:color="#E7EAE9" />
            <!--边框-->
            <stroke
                android:width="1dp"
                android:color="#C3C5C4" />
        </shape>
    </item>
    <!--seekBar的进度条-->
    <item android:id="@android:id/progress">
        <clip>
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:innerRadius="120dp"
                android:shape="rectangle"
                android:thickness="1dp"
                android:useLevel="false">
                <solid android:color="#281991fa" />
                <stroke
                    android:width="1dp"
                    android:color="#1991FA" />
                <corners
                    android:bottomLeftRadius="2dp"
                    android:bottomRightRadius="2dp"
                    android:topLeftRadius="2dp"
                    android:topRightRadius="2dp" />
            </shape>
        </clip>
    </item>
</layer-list>

材料二：错误状态下的progressDrawable

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--seekBar背景-->
    <item android:id="@android:id/background">
        <!--形状-->
        <shape android:shape="rectangle">
            <!--大小-->
            <size android:height="42dp" />
            <!--圆角-->
            <corners android:radius="2dp" />
            <!--背景-->
            <solid android:color="#E7EAE9" />
            <!--边框-->
            <stroke
                android:width="1dp"
                android:color="#C3C5C4" />
        </shape>
    </item>
    <!--seekBar的进度条-->
    <item android:id="@android:id/progress">
        <clip>
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:innerRadius="120dp"
                android:shape="rectangle"
                android:thickness="1dp"
                android:useLevel="false">
                <solid android:color="#28f57a7a" />
                <stroke
                    android:width="1dp"
                    android:color="#F57A7A" />
                <corners
                    android:bottomLeftRadius="2dp"
                    android:bottomRightRadius="2dp"
                    android:topLeftRadius="2dp"
                    android:topRightRadius="2dp" />
            </shape>
        </clip>
    </item>
</layer-list>

材料三：完成状态下的progressDrawable

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--seekBar背景-->
    <item android:id="@android:id/background">
        <!--形状-->
        <shape android:shape="rectangle">
            <!--大小-->
            <size android:height="42dp" />
            <!--圆角-->
            <corners android:radius="2dp" />
            <!--背景-->
            <solid android:color="#E7EAE9" />
            <!--边框-->
            <stroke
                android:width="1dp"
                android:color="#C3C5C4" />
        </shape>
    </item>
    <!--seekBar的进度条-->
    <item android:id="@android:id/progress">
        <clip>
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:innerRadius="120dp"
                android:shape="rectangle"
                android:thickness="1dp"
                android:useLevel="false">
                <solid android:color="#2829946b" />
                <stroke
                    android:width="1dp"
                    android:color="#29946b" />
                <corners
                    android:bottomLeftRadius="2dp"
                    android:bottomRightRadius="2dp"
                    android:topLeftRadius="2dp"
                    android:topRightRadius="2dp" />
            </shape>
        </clip>
    </item>
</layer-list>

材料四：各状态下的thumb

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态-->
    <item android:drawable="@drawable/dw" android:state_pressed="true" />

    <!-- 有焦点状态 -->
    <item android:drawable="@drawable/de" android:state_focused="true" />

    <!-- 普通状态 -->
    <item android:drawable="@drawable/de" />
</selector>

到这里，我们的界面以及材料都已经准备好了，接下里我们去Activity中看一下操作流程吧

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    private TextView tv;
    private ValidationSeekBar seekBar;
    Handler handler = new Handler();
    private Button getCode;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getCode = (Button) findViewById(R.id.getCode);
        tv = (TextView) findViewById(R.id.tv);
        seekBar = (ValidationSeekBar) findViewById(R.id.sb);
        seekBar.setOnSeekBarChangeListener(this);

    }

    /**
     * seekBar进度变化时回调
     *
     * @param seekBar
     * @param progress
     * @param fromUser
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        if (seekBar.getProgress() == seekBar.getMax()) {
        } else {
            tv.setVisibility(View.INVISIBLE);
        }
    }

    /**
     * seekBar开始触摸时回调
     *
     * @param seekBar
     */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

    /**
     * seekBar停止触摸时回调
     *
     * @param seekBar
     */
    @Override
    public void onStopTrackingTouch(final SeekBar seekBar) {

        //验证错误时的滑动条样式
        if (seekBar.getProgress() != seekBar.getMax()) {
            seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar_error_bg));
            seekBar.setThumb(getResources().getDrawable(R.drawable.er));
            seekBar.setThumbOffset(0);
            int progress = seekBar.getProgress();
            seekBar.setProgress(0);
            seekBar.setProgress(progress);
            //错误状态延时警示
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    //错误回退动画效果
                    runFloat(seekBar.getProgress());
                }
            }, 400);
        }

        //设置验证成功的滑动条样式
        if (seekBar.getProgress() == seekBar.getMax()) {
            seekBar.setThumb(getResources().getDrawable(R.drawable.gd));
            seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar_good_bg));
            seekBar.setProgress(0);
            seekBar.setThumbOffset(-3);
            seekBar.setProgress(100);
            //成功时的提示信息
            tv.setVisibility(View.VISIBLE);
            tv.setTextColor(Color.rgb(0x29, 0x94, 0x6b));
            tv.setText("完成验证");
            //按钮状态
            getCode.setBackgroundColor(getResources().getColor(android.R.color.holo_red_light));
        }

    }

    private void runFloat(int Progress) {
        //使用ValueAnimator进行进度的偏移。
        ValueAnimator valueAnimator = ValueAnimator.ofInt(Progress, 0);
        //动画时间，可根据需要调整
        valueAnimator.setDuration(200);
        //动画更新监听
        valueAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        //设置进度
                        seekBar.setProgress(Integer.parseInt(valueAnimator
                                .getAnimatedValue().toString()));
                    }
                });
        //动画状态监听
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //重置默认的滑动条样式
                seekBar.setThumb(getResources().getDrawable(R.drawable.thumb));
                seekBar.setThumbOffset(-1);
                seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar_bg));
                //重置提示信息
                tv.setVisibility(View.VISIBLE);
                tv.setTextColor(Color.GRAY);
                tv.setText("请按住滑块，拖动到最右边");
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        //开启valueAnimator
        valueAnimator.start();
    }

}

至此，我们的整个滑动验证码的制作流程就结束了，以上代码基本实现文章开头效果图以及常规的滑动验证码的需求逻辑，整体代码逻辑还是比较清晰了然的，使用起来也很方便。

**当然一定还有更多方法和更优化的逻辑，还请大家提出，共同完善，
有了需求才有了功能，有了想法才有了创作，你的反馈会是使我进步的最大动力。**

觉得还不够方便？还想要什么功能？告诉我！欢迎反馈，欢迎Star。

文章标签：
Android开发
数据格式
XML
关键词：
Android验证码
Android填写验证码
sakura_echo
目录
相关文章
热烈的马
|
4月前
|
XML 算法 Java
Android 开发人脸识别之自动识别验证码功能讲解及实现（超详细 附源码）
Android 开发人脸识别之自动识别验证码功能讲解及实现（超详细 附源码）
热烈的马
62 0
热烈的马
|
4月前
|
XML Java Android开发
Android Studio App开发之利用图片加载框架Glide实现刷新验证码功能（附源码 简单易懂）
Android Studio App开发之利用图片加载框架Glide实现刷新验证码功能（附源码 简单易懂）
热烈的马
33 0
小陆要努力
|
Android开发
关于Android自定义View实现验证码输入框
在做校验验证的时候，经常需要手机接收短信，获取验证码，输入验证码，实现起来其实也不难，今天对输入框简单做了一个封装，通过自定义View来实现。
小陆要努力
160 1
关于Android自定义View实现验证码输入框
Swift社区
|
XML Java Android开发
Android 获取验证码倒计时实现
验证码输入框和获取验证码按钮布局
Swift社区
187 0
游客vbdg4m5hinns2
|
XML Android开发 数据格式
Android 自定义View之随机数验证码（仿写鸿洋）
Android 【(w.　p.　5.　1)(8.　5.　6.　6)】自定义View之随机数验证码（仿写鸿洋）
游客vbdg4m5hinns2
118 0
yechaoa
|
XML Android开发 数据格式
Android 自定义View之随机数验证码（仿写鸿洋）
Android 自定义View之随机数验证码（仿写鸿洋）
yechaoa
111 0
Android 自定义View之随机数验证码（仿写鸿洋）
yechaoa
|
Android开发
Android发送验证码倒计时，时间倒计时
Android发送验证码倒计时，时间倒计时
yechaoa
123 0
Android发送验证码倒计时，时间倒计时
长沙红胖子Qt
|
Android开发
项目实战：Qt+Android模拟操作器（模拟操作app，打开，点击，输入，获取验证码等等）
项目实战：Qt+Android模拟操作器（模拟操作app，打开，点击，输入，获取验证码等等）
长沙红胖子Qt
459 0
项目实战：Qt+Android模拟操作器（模拟操作app，打开，点击，输入，获取验证码等等）
程思扬
|
Android开发
Android自动填充短信验证码
Android自动填充短信验证码
程思扬
444 0
Android自动填充短信验证码
sakura_echo
|
前端开发 Android开发
Android-来填写一个验证码吧！（一）
sakura_echo
1392 0

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 4
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 5
    安卓安全性指南：保护用户数据免受恶意攻击
  • 6
    安卓多线程和并发处理：提高应用效率
  • 7
    安卓UI/UX设计原则：打造引人入胜的用户体验
  • 8
    Android为什么不能在子线程更新UI
  • 9
    构建高效Android应用：从优化用户体验到提升性能
  • 10
    安卓投屏神器 Scrcpy安 报错ERROR: Could not find any ADB device
  • 1
    构建高效Android应用：Kotlin协程的实践指南
    17
  • 2
    构建高效Android应用：Kotlin与协程的完美融合
    27
  • 3
    【Android平板编程】远程Ubuntu服务器code-server编程写代码
    53
  • 4
    android 使用GSON 序列化对象出现字段被优化问题解决方案
    17
  • 5
    构建高效安卓应用：探究Kotlin与Java的性能对比
    68
  • 6
    构建高效安卓应用：探究Kotlin与Java的性能差异
    19
  • 7
    ADB 下载、安装及使用教程：让你更好地管理 Android 设备
    513
  • 8
    前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
    58
  • 9
    构建高效的安卓应用：探究Kotlin与Java的性能差异
    20
  • 10
    构建高效Android应用：探究Kotlin与Java的性能差异
    53

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）