一个自定义滑动验证组件

最新推荐文章于 2024-08-20 17:03:48 发布
最新推荐文章于 2024-08-20 17:03:48 发布
阅读量580 收藏 1
点赞数
分类专栏： android开发 文章标签： android 滑动验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MingHuang2017/article/details/106983326
版权

一个自定义滑动验证组件

前段时间项目要求登录的时候加个滑动验证的功能。效果如下：

在这里插入图片描述
乍一看，还真不知道怎么下手，后来想了想之前做过一个左滑删除的控件
源码在这里

在这里插入图片描述

觉得可以将这个改一下拿来用，只是换个滑动方向，估计成功概率比较大。接着就把以前的代码翻出来，看看怎么改，虽然修改过程中遇到些问题，但最终还是达到了想要的效果。

下面说说实现的原理：

实现过程中借助了ViewDragHelper这个类来简化代码，ViewDragHelper的用法可以参考这篇文章。实现原理是这样的，用一个水平方向的LinearLayout包裹两个view，A在左，B在右，且B可以被拖动，初始状态下A被隐藏起来，当B被往右拖动时，改变A的left/right坐标，再重绘，看起来就像A是被B拖出来的一样。

在这里插入图片描述
初始状态，只显示滑块，蓝色块被隐藏

在这里插入图片描述
拖动滑块带出蓝色块

在这里插入图片描述
直到拖出全部

原理就是这样的，很简单，具体代码的话就看源码吧，有注释，也好理解。有apk，可以先下来看看效果。下载apk

demo源码：https://github.com/MingHuang1024/SwipeLayoutForCheck




由于水平有限，如果文中存在错误之处，请大家批评指正，欢迎大家一起来分享、探讨！

博客：http://blog.csdn.net/MingHuang2017

GitHub：https://github.com/MingHuang1024

Email： MingHuang1024@foxmail.com

ang1024)

Email： MingHuang1024@foxmail.com

微信：724360018

MingHuang1024
关注
专栏目录
Taro React组件开发 —— RuiVerifySlider 行为验证码之滑动拼图
止于至善
05-27 527
修改后发现并没有那么麻烦，所以不要自己设置心理障碍，遇到需求要有研究的欲望；多研究大佬的框架代码，学习大佬的开发习惯，我发现随着时间越来越开发的没有欲望，在混日子一样；不断的激发自己的兴趣，学习开发更多的东西。
react实现图形验证码_基于react的滑动图片验证码组件
weixin_39874795的博客
02-11 2332
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。效果图使用方式在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。class App extends Component {state = {url: ""}componentDidMount() {this.setState({ url: getImage() })}onReload = ()...
滑动拼图验证
07-24
插件描述：实现滑动图片验证的JS插件 使用方法： 引入jigsaw.js 和 jigsaw.css <link rel="stylesheet" href="jigsaw.css"> [removed][removed] 1 jigsaw.init(element[, success][, fail]) jigsaw.init接收三个参数，第一个参数为页面容器元素， 第二和第三个参数分别为验证成功和失败的回调函数。 特性： 图片由 https://picsum.photos/ 随机产生，然后使用canvas裁剪生成。 未编译ES6语法，建议使用现代浏览器体验。
自定义滑动验证
白云天的博客
09-20 266
滑动验证实现方式有很多，这里是自定义View的方式，通过按住验证图片移动到目标阴影位置完成验证 public class SlidingVerificationView extends View { //原图 private Bitmap bitmap; //画笔 private Paint paint; //阴影区域 private Rec...
Vue - 详细介绍 vue-monoplasty-slide-verify & vue3-puzzle-vcode 滑动验证组件
最新发布
miaomiaowins的博客
08-20 1549
本篇详细介绍了vue-monoplasty-slide-verify和vue3-puzzle-vcode两种滑动验证组件在Vue2和Vue3中的实际运用，对于实际项目中可以通过搭配其他UI组件库如Element - UI 的弹窗效果更佳。
python自动化操作浏览器 识别滑动验证
萤火虫草花星的博客
08-14 568
import os from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from time import sleep import urllib.request import cv2 import numpy as np import xlrd from xlutils.copy import copy from selenium.common.exceptions .
全栈的自我修养 ———— react实现滑动验证
2401_82752568的博客
04-09 2131
需要准备两张图片一个是核验图形，一个是原图------> 这个方法小编试了后感觉比较麻烦，这边就不继续写了。在其中bgSize必须要注意！属性必须和图片一样！这个工具会接受一个照片，然后自动分割出适当的验证尺寸。
React/Umi中实现移动端滑动图片验证功能
weixin_62889848的博客
03-08 1104
React/Umi中实现移动端滑动图片验证功能
Android自定义滑动验证条的示例代码
08-29
Android 自定义滑动验证条是 Android 开发中常用的一个组件，用于验证用户的身份或完成某些操作。今天，我们将介绍如何使用 SeekBar 实现自定义滑动验证条的示例代码。 SeekBar 的基本使用 SeekBar 是 Android ...
android 自定义图片滑动验证
02-07
最后，为了使代码更易维护和复用，可以将滑动验证组件封装成一个自定义View。这样，在多个地方需要使用时，只需添加一个XML标签即可。 在Eclipse中实现这个功能，主要的步骤与Android Studio相似，只是导入库、布局...
Android滑动验证自定义
Free_Yu
10-17 1978
最近运用ImageView结合Ontouchlistener自定义了个滑块验证控件，具体详情看代码：package yqdj.delivery.CostomView;import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphic
手机端滑动验证组件基于zepto
08-10
总结来说，sliderDrag是一个基于Zepto.js的移动端滑动验证组件，通过与用户的互动防止恶意注册和机器人攻击。它利用Zepto.js的特性实现了触摸事件监听、滑动逻辑判断以及动画效果，提供了良好的可定制性和易用性。在...
滑动验证
猫猫很优雅的博客
03-15 970
滑动布局验证
2022-06-01 学习记录--React-简易滑动验证之react组件(react-simple-verify)
weixin_48850734的博客
06-02 2310
React-简易滑动验证之react组件(react-simple-verify)
拖动滑块验证
01-18
插件描述：拖动滑块进行验证.
滑块验证登录
09-14
仿阿里云，滑块验证登录插件，亲测，兼容PC和移动端.
微信小程序 --- 自定义组件之滑动验证组件
删库跑路
08-15 6194
先看效果图： 目录结构： 点击这里，浏览器打开弹窗，点击打开微信这开发工具，导入微信开发者工具中，就可以在微信开发者工具观看所有代码，无需复制黏贴 调用组件的index文件 //index.js const app = getApp() Page({ data: { }, myEventListener: function(e) { //获取到...
react的滑动图片验证码组件的示例代码
12-03
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。 效果图 使用方式 在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。 class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({ url: getImage() }) } render() { r
slider滑块，验证登录滑块
07-25
jQuery阿里云登录滑块拖动验证，适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗
【react+ts】react+ts实现双滑块移动效果，包含交叉和碰撞
weixin_42582523的博客
12-15 1362
import React, { Component } from "react"; import "./block.scss"; interface Props {} interface state { left1: number; left2: number; maxWidth: number; } class BlockDrog extends Component<Props, state> { slideButton1: any = React.createRef().
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值