jiaoyaning/VerificationCodeView
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update README

Browse Source
This commit is contained in:
jiaoyaning
2019-08-09 10:43:35 +08:00
parent a9287bfe03
commit 6105b0e8a2
1 changed files with 40 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
README.md
View File

@@ -1,20 +1,22 @@
# VerificationCodeView # VerificationCodeView
> `Android` 自定义方形输入框，仿滴滴验证码、小篮单车验证码输入框 > `Android` 自定义方形输入框，仿滴滴验证码、小篮单车验证码输入框
--- ---
## 效果图 ## V1.0.1 版 效果图
## V1.0.1 版
![Screenshot](screenshot/screenshot_1.0.1.gif) ![Screenshot](screenshot/screenshot_1.0.1.gif)
+ `fix bug` ：[验证码输入错误清空输入框 #7](https://github.com/jiaoyaning/VerificationCodeView/issues/7) - `fix bug` ：[验证码输入错误清空输入框 #7](https://github.com/jiaoyaning/VerificationCodeView/issues/7)
+ `fix bug` ：[关于博主手机不好，经常点一次却触发两次`onKey`事件，就设置了一个防止多点击，间隔100毫秒。#6](https://github.com/jiaoyaning/VerificationCodeView/issues/6) - `fix bug` ：[关于博主手机不好，经常点一次却触发两次`onKey`事件，就设置了一个防止多点击，间隔 100 毫秒。#6](https://github.com/jiaoyaning/VerificationCodeView/issues/6)
+ `fix bug` ：暗文密码模式无效果问题 - `fix bug` ：暗文密码模式无效果问题
+ `update` ：添加输入框平分等间距模式，并可设置输入框间距 - `update` ：添加输入框平分等间距模式，并可设置输入框间距
+ `update` ：添加清空输入框方法 - `update` ：添加清空输入框方法
+ `update` ：修改`Listener`，添加文本改变时回调方法 - `update` ：修改`Listener`，添加文本改变时回调方法
### 监听 ### 监听
``` ```
public interface OnCodeFinishListener { public interface OnCodeFinishListener {
/** /**
@@ -30,6 +32,7 @@ public interface OnCodeFinishListener {
``` ```
### attr ### attr
``` ```
<!-- 自定义验证码输入框--> <!-- 自定义验证码输入框-->
<declare-styleable name="vericationCodeView"> <declare-styleable name="vericationCodeView">
@@ -60,82 +63,48 @@ public interface OnCodeFinishListener {
</declare-styleable> </declare-styleable>
``` ```
### Gradle ## Gradle
Step 1. Add it in your root build.gradle at the end of repositories:
``` ```
dependencies { allprojects {
implementation 'com.jyn.verificationcodeview:verificationcodeview:1.0.1' repositories {
...
maven { url 'https://jitpack.io' }
}
} }
``` ```
--- Step 2. Add the dependency
分割线
---
## V1.0.0版 (源码在`branch` [[`V1.0.0`]](https://github.com/jiaoyaning/VerificationCodeView/tree/V1.0.0))
![Screenshot](screenshot/screenshot.gif)
`GIF`被压缩的有点模糊，下面是截图
![Screenshot](screenshot/screenshot.jpg)
```
dependencies {
compile 'com.jyn.verificationcodeview:verificationcodeview:1.0.1'
}
```
## 用法 ## 用法
``` ```
<com.jyn.vcview.VerificationCodeView <com.jyn.vcview.VerificationCodeView
android:id="@+id/verificationcodeview"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="30dp" android:layout_marginTop="10dp"
android:gravity="center" android:gravity="center"
android:orientation="horizontal" android:orientation="horizontal"
app:vcv_et_bg="@drawable/et_login_code" app:vcv_et_bg="@drawable/et_code_test1"
app:vcv_et_cursor="@drawable/et_cursor" app:vcv_et_cursor="@drawable/et_cursor"
app:vcv_et_inputType="number" app:vcv_et_cursor_visible="false"
app:vcv_et_number="4" app:vcv_et_inputType="numberPassword"
app:vcv_et_text_color="@android:color/black" app:vcv_et_number="6"
app:vcv_et_spacing="6dp"
app:vcv_et_text_color="#FFC107"
app:vcv_et_text_size="6sp" /> app:vcv_et_text_size="6sp" />
``` ```
输入完成监听
```
verificationcodeview.setOnCodeFinishListener(new VerificationCodeView.OnCodeFinishListener() {
@Override
public void onComplete(String content) {
textView.setText(content);
}
});
```
所有属性
```
<declare-styleable name="vericationCodeView">
<!--输入框的数量-->
<attr name="vcv_et_number" format="integer" />
<!--输入类型-->
<attr name="vcv_et_inputType">
<enum name="number" value="0" />
<enum name="numberPassword" value="1" />
<enum name="text" value="2" />
<enum name="textPassword" value="3" />
</attr>
<!--输入框的宽度-->
<attr name="vcv_et_width" format="dimension|reference" />
<!--输入框文字颜色-->
<attr name="vcv_et_text_color" format="color|reference" />
<!--输入框文字大小-->
<attr name="vcv_et_text_size" format="dimension|reference" />
<!--输入框背景-->
<attr name="vcv_et_bg" format="reference" />
<!--光标样式-->
<attr name="vcv_et_cursor" format="reference" />
</declare-styleable>
```
`vcv_et_bg` 背景示例（默认） `vcv_et_bg` 背景示例（默认）
``` ```
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <selector xmlns:android="http://schemas.android.com/apk/res/android">
@@ -157,7 +126,9 @@ verificationcodeview.setOnCodeFinishListener(new VerificationCodeView.OnCodeFini
</item> </item>
</selector> </selector>
``` ```
`vcv_et_cursor` 光标示例（默认） `vcv_et_cursor` 光标示例（默认）
``` ```
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" <shape xmlns:android="http://schemas.android.com/apk/res/android"
@@ -167,28 +138,10 @@ verificationcodeview.setOnCodeFinishListener(new VerificationCodeView.OnCodeFini
</shape> </shape>
``` ```
> 备注：V1.0.0 版在 branch - [`V1.0.0`](https://github.com/jiaoyaning/VerificationCodeView/tree/V1.0.0)
## Gradle
Step 1. Add it in your root build.gradle at the end of repositories:
```
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
```
Step 2. Add the dependency
```
dependencies {
compile 'com.jyn.verificationcodeview:verificationcodeview:1.0.0'
}
```
## 开发思路 ## 开发思路
简书：[http://www.jianshu.com/p/781950fe5e73](http://www.jianshu.com/p/781950fe5e73) 简书：[http://www.jianshu.com/p/781950fe5e73](http://www.jianshu.com/p/781950fe5e73)
CSDN：[http://blog.csdn.net/jiaoyaning1210/article/details/78427818](http://blog.csdn.net/jiaoyaning1210/article/details/78427818) CSDN：[http://blog.csdn.net/jiaoyaning1210/article/details/78427818](http://blog.csdn.net/jiaoyaning1210/article/details/78427818)