android滑动拼图验证码控件

最新推荐文章于 2024-04-10 01:19:01 发布
最新推荐文章于 2024-04-10 01:19:01 发布
阅读量557 收藏 2
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5bd94cc1f265da3934313e56
版权

滑动拼图验证码一般我们在网站上可以经常见到，本篇文章给大家介绍该效果在android端的是如何实现

首先看一下效果图：

  • 新建自定义view DragImageView主要方法：
  • 设置图片、滑块资源，设置图片、滑块之间的比例大小

  • 滑块滑到正确位置，拼图成功调用ok()方法
  • 滑块滑动位置错误，拼图失败调用fail()方法
  • 重新滑动，reset()方法

  • 拼图成功后，图片一道闪亮效果

  • 整个类代码如下：
public final class DragImageView extends FrameLayout implements SeekBar.OnSeekBarChangeListener {

private final int showTipsTime = 1500;
private final int animeTime = 333;
private final int flashTime = 800;
private ImageView ivCover;
private ImageView ivBlock;
private SeekBar sb;
private TextView tvTips2;
private DiyStyleTextView tvTips;
private View vFlash, flContent;

private Handler handler = new Handler();
private Bitmap cover, block, completeCover;
private boolean isNormal;

public DragImageView(Context context) {
    super(context);
    init();
}

public DragImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public DragImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

private void init() {
    View.inflate(getContext(), R.layout.drag_view, this);
    flContent = findViewById(R.id.drag_fl_content);
    ivCover = findViewById(R.id.drag_iv_cover);
    ivBlock = findViewById(R.id.drag_iv_block);
    tvTips = findViewById(R.id.drag_tv_tips);
    tvTips2 = findViewById(R.id.drag_tv_tips2);
    vFlash = findViewById(R.id.drag_v_flash);
    
    tvTips.setColorRegex("拼图|成功|失败|正确|[\\d\\.%]+", 0xfff75151);
    sb = findViewById(R.id.drag_sb);
    sb.setMax(getContext().getResources().getDisplayMetrics().widthPixels);
    sb.setOnSeekBarChangeListener(this);
    reset();
}


/**
 * 设置资源
 *
 * @param cover         拼图
 * @param block         滑块
 * @param completeCover 完成的拼图
 * @param block_y       滑块Y值比例
 */
public void setUp(Bitmap cover, Bitmap block, Bitmap completeCover, float block_y) {
    this.cover = cover;
    this.block = block;
    this.completeCover = completeCover;
    ivCover.setImageBitmap(completeCover);
    ivBlock.setImageBitmap(block);
    setLocation(1f * cover.getWidth() / cover.getHeight(), 1f * block.getHeight() / cover.getHeight(), block_y);
}

/**
 * 设置比例大小
 *
 * @param cover_wph  图片bili
 * @param block_size 滑块大小占高比
 * @param block_y    滑块位置占高比
 */
private void setLocation(final float cover_wph, final float block_size, final float block_y) {
    post(new Runnable() {
        @Override
        public void run() {
            final int w = flContent.getMeasuredWidth();
            int h = (int) (w / cover_wph);
            ViewGroup.LayoutParams l = flContent.getLayoutParams();
            l.width = w;
            l.height = h;
            flContent.setLayoutParams(l);

            ViewGroup.MarginLayoutParams l2 = (MarginLayoutParams) ivBlock.getLayoutParams();
            l2.height = (int) (h * block_size);
            l2.width = l2.height * block.getWidth() / block.getHeight();
            l2.topMargin = (int) (h * block_y);
            ivBlock.setLayoutParams(l2);
        }
    });

}

public void ok() {
    ivCover.setImageBitmap(completeCover);
    blockHideAnime();
    int penset = (int) (99 - (timeUse > 1 ? timeUse - 1 : 0) / 0.1f);
    if (penset < 1) penset = 1;
    tvTips.setText(String.format("拼图成功: 耗时%.1f秒,打败了%d%%的用户!", timeUse, penset));
    tipsShowAnime(true);
    flashShowAnime();
    sb.setEnabled(false);
}

public void fail() {
    twinkleImage(ivBlock);
    tvTips.setText("拼图失败: 请重新拖曳滑块到正确的位置!");
    tipsShowAnime(true);
    handler.postDelayed(resetRun, showTipsTime);
    sb.setEnabled(false);
}

public void reset() {
    final int position = sb.getProgress();
    if (position != 0) {
        ValueAnimator animator = ValueAnimator.ofFloat(1f, 0);
        animator.setDuration(animeTime).start();
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float f = (Float) animation.getAnimatedValue();
                sb.setProgress((int) (position * f));
            }
        });
    }
    tipsShowAnime(false);
    tips2ShowAnime(true);
    sb.setEnabled(true);
    ivBlock.setVisibility(GONE);
    vFlash.setVisibility(GONE);
    ivCover.setImageBitmap(completeCover);
    isNormal = true;
}

//===================seekbar监听===================
private long timeTemp;
private float timeUse;

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    int cw = ivCover.getMeasuredWidth();
    int bw = ivBlock.getMeasuredWidth();
    ViewGroup.MarginLayoutParams l = (MarginLayoutParams) ivBlock.getLayoutParams();
    l.leftMargin = (cw - bw) * progress / seekBar.getMax();
    ivBlock.setLayoutParams(l);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
    ivBlock.setVisibility(VISIBLE);
    ivCover.setImageBitmap(cover);
    tips2ShowAnime(false);
    timeTemp = System.currentTimeMillis();
    isNormal = false;
}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
    timeUse = (System.currentTimeMillis() - timeTemp) / 1000.f;
    if (dragListenner != null)
        dragListenner.onDrag(seekBar.getProgress() * 1f / seekBar.getMax());
}
//===================seekbar监听===================


//闪烁滑块
private void twinkleImage(final View view) {
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1.0F);
    animator.setTarget(view);
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(showTipsTime).start();
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float f = (Float) animation.getAnimatedValue();
            int time = (int) (showTipsTime * f);

            if (time < 125)
                view.setVisibility(INVISIBLE);
            else if (time < 250)
                view.setVisibility(VISIBLE);
            else if (time < 375)
                view.setVisibility(INVISIBLE);
            else
                view.setVisibility(VISIBLE);
        }
    });
}

//提示文本显示隐藏
private void tipsShowAnime(boolean isShow) {
    if ((tvTips.getVisibility() == VISIBLE) == isShow)
        return;
    TranslateAnimation translateAnimation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, isShow ? 1f : 0f,
            Animation.RELATIVE_TO_SELF, isShow ? 0f : 1f);
    translateAnimation.setDuration(animeTime);
    //translateAnimation.setInterpolator(new LinearInterpolator());
    tvTips.setAnimation(translateAnimation);
    tvTips.setVisibility(isShow ? VISIBLE : GONE);
}

//提示文本显示隐藏
private void tips2ShowAnime(boolean isShow) {
    if ((tvTips2.getVisibility() == VISIBLE) == isShow)
        return;
    AlphaAnimation translateAnimation = new AlphaAnimation(isShow ? 0 : 1, isShow ? 1 : 0);
    translateAnimation.setDuration(animeTime);
    //translateAnimation.setInterpolator(new LinearInterpolator());
    tvTips2.setAnimation(translateAnimation);
    tvTips2.setVisibility(isShow ? VISIBLE : GONE);
}

//成功完成拼图滑块消失
private void blockHideAnime() {
    AlphaAnimation translateAnimation = new AlphaAnimation(1, 0);
    translateAnimation.setDuration(animeTime);
    //translateAnimation.setInterpolator(new LinearInterpolator());
    ivBlock.setAnimation(translateAnimation);
    ivBlock.setVisibility(GONE);
}

//失败震动动画
private void failAnime() {

}

//成功高亮动画
private void flashShowAnime() {
    TranslateAnimation translateAnimation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 1f,
            Animation.RELATIVE_TO_SELF, -1f,
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, 0f);
    translateAnimation.setDuration(flashTime);
    //translateAnimation.setInterpolator(new LinearInterpolator());
    vFlash.setAnimation(translateAnimation);
    vFlash.setVisibility(VISIBLE);
    translateAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            vFlash.setVisibility(GONE);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
}

//失败延时重置控件
private Runnable resetRun = new Runnable() {

    @Override
    public void run() {
        tipsShowAnime(false);
        tips2ShowAnime(true);
        sb.setEnabled(true);

        final int position = sb.getProgress();
        ValueAnimator animator = ValueAnimator.ofFloat(1f, 0);
        animator.setDuration(animeTime).start();
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float f = (Float) animation.getAnimatedValue();
                sb.setProgress((int) (position * f));
            }
        });

        isNormal = true;
    }
};


//监听
private DragListenner dragListenner;

public interface DragListenner {

    void onDrag(float position);

}

public void setDragListenner(DragListenner dragListenner) {
    this.dragListenner = dragListenner;
}
}
复制代码

转载于:https://juejin.im/post/5bd94cc1f265da3934313e56

weixin_34075551
关注
android 拼图验证码,android滑动拼图验证码控件
weixin_33586594的博客
05-29 1080
滑动拼图验证码一般我们在网站上可以经常见到，本篇文章给大家介绍该效果在android端的是如何实现首先看一下效果图：新建自定义view DragImageView主要方法：设置图片、滑块资源，设置图片、滑块之间的比例大小滑块滑到正确位置，拼图成功调用ok()方法滑块滑动位置错误，拼图失败调用fail()方法重新滑动，reset()方法拼图成功后，图片一道闪亮效果整个类代码如下：public fin...
验证码之滑动拼图
Anwug的博客
03-22 2875
1、效果图 2、下载js、css文件 3、html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动拼图验证码</title> <link rel="stylesheet" href="jigsaw.c...
[Android实例] 拖动滑块进行图片拼合验证方式的实现
01-05
博客地址：http://blog.csdn.net/krubo1/article/details/50462163
Android拼图滑块验证码控件
热门推荐
LawCoder的博客
01-22 2万+
大咖好，博主毕业工作半年多了。今天给大噶呈献博主博客处女作——Android拼图滑块验证码控件。由于初写博客，很多地方可能不够好，望各位多多给点意见。工作半年才送出第一篇博客很惭愧555。 概述       验证码是可以区分用户是人还是计算机。可以防止破解密码、刷票等恶意行为。客户端上多数用在关键操作上，比如购买、登录、注册等场景。本文将介绍Android拼图滑块验证码控件是如何一步一步编
Android拼图滑块验证码
02-02
验证码是可以区分用户是人还是计算机。可以防止破解密码、刷票等恶意行为。
Android滑块拼图验证码控件
qq_33209777的博客
07-08 799
https://github.com/luozhanming/Captcha Android滑块拼图验证码控件 https://blog.csdn.net/sdfsdfdfa/article/details/79120665 Android拼图滑块验证码控件 https://github.com/mcxtzhang/SwipeCaptcha Swipe captcha of Android pla...
仿斗鱼滑动拼图验证码控件
郭霖
01-04 1807
动一动手指完成验证。
android滑动图形验证码,Android使用更简单的方式实现滑块拼图验证码功能
weixin_33372672的博客
05-29 2014
实现滑块拼图验证码功能之前已经写过一篇了，上一篇使用的是自定义控件的方式实现这个功能，主要还是想让童鞋们知其然更知其所以然，还没看的童鞋可以先看看Android实现滑块拼图验证码功能这篇。在项目的开发过程中，时间比较紧急，通过自定义的方式很显然需要耗费很多时间去写，所以我们需要使用更简单的方式实现，这样会帮我们节省很多时间去解决其它的问题，使用依赖库的方式显然是最节省时间的，下面我们来看看是怎么实...
Android 高仿斗鱼滑动验证码
01-04
如下图。在Android上实现起来就不太容易，有些效果还是不如web端酷炫。） 我们的Demo,Ac娘镇楼 (图很渣，也忽略底下的SeekBar，这不是重点) ...抠图验证码区域，绘制一个用于联动滑动的验证码滑块。验
Android-Android滑块验证码控件
08-13
在Android应用开发中，滑块验证码控件是一种常见的安全机制，用于验证用户是人类而非机器人。它通过提供一种交互式的验证方式，要求用户手动拖动一个滑块来完成一段图像或拼图，从而防止自动化的恶意操作。这篇文档...
android 自定义图片滑动验证
02-07
目前只做了Android studio 的demo 用eclipse的程序猿们只要改下就好
Android-Android平台的滑动验证码
08-13
在 Android端app上，自定义View，仿一个斗鱼web端滑动验证码
android自动滑块验证码
12-04
微信自动注册脚本已开始使用，以上代码完全可以用。设计思想是截两次图（滑动之前与滑动之后），对比图片，找出左边滑块起始位置与大小，然后横向向右对比区域灰质图片的像素值。左边区域颜色值减右边区域颜色值在一个区间内，则算找到的点，这个区域这样的点的比例算出来，然后找出比例最高的区域，即是我们要移动到的区域。
Android基础控件——SeekBar的使用、仿淘宝滑动验证
11-22
Android基础控件——SeekBar的使用、仿淘宝滑动验证
Android 拼图验证码
韩小呆的博客
08-18 649
公司提了个需求，要求弄个图片验证码代替之前登陆界面手输验证码，对于用户确实很方便，杠杠的提升用户体验，但是对于开发者来说，嘿嘿，恶意满满。折腾一番弄出了一个 Kotlin 版本的简单实现 对了目前还得依靠一下 glide 待过些日子不忙的时候再进行完善吧。投一下效果如下： 一、绘制滑块 1、绘制凸起和凹槽 下面的操作，可以绘制出滑块上面的小凸起，或者小凹槽，类似于一个工具类，之前原版是 Java 版本的，我给弄成了 Kotlin 了，算是我已经迈向 Kotlin 的一次声明展示吧，掌握的 Kotlin
【Android】仿斗鱼滑动拼图验证码控件
最新发布
2401_84132393的博客
04-10 1371
*没推导之前的公式在这里//上左半圆 顺时针//上右半圆:顺时针} else {//下左半圆 逆时针//下右半圆 逆时针} else {//下右半圆 顺时针//下左半圆 顺时针}*/这里用的是推导之后的公式，没推导前的也在注释里。简单说，先计算出中点和半径，利用三次贝塞尔曲线绘制一个圆（c和gap1 都是和三次贝塞尔曲线相关）。关于三次贝塞尔曲线就不展开了，网上很多资料，我也是现学的。
Android Studio实现滑动图片验证码
weixin_74239923的博客
08-10 1279
【代码】Android Studio实现滑动图片验证码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值