Action:alter

Description:修改VercodeEditText控件，修复下划线异常、height无法适配、宽度左右缩进问题; TODO:修复无法输入bug
2017-06-12 11:05:25 +08:00
parent b296fa6620
commit c158f81795
7 changed files with 410 additions and 30 deletions
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -11,7 +11,6 @@ android {
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode appVerCode
        versionName appVerName
-        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    compileOptions {
        sourceCompatibility rootProject.ext.sourceCompatibilityVersion
@@ -55,10 +54,6 @@ android {
 }

 dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
-        exclude group: 'com.android.support', module: 'support-annotations'
-    })
-    compule deps.appcompat_v7
-    testCompile deps.junit
+    compile deps.appcompat_v7
+    compile project(':vcedittext-lib')
 }
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,13 +1,54 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
-    tools:context="com.jkb.vercodeedittext.MainActivity">
+    android:background="@android:color/white"
+    android:orientation="vertical">

-    <TextView
-        android:layout_width="wrap_content"
+    <com.jkb.vcedittext.VerificationCodeEditText
+        android:layout_width="match_parent"
        android:layout_height="wrap_content"
-        android:text="Hello World!" />
+        android:layout_margin="20dp"
+        android:inputType="number"
+        android:text="123"
+        android:textColor="@color/colorPrimary"
+        android:textSize="40sp"
+        app:bottomLineHeight="2dp"
+        app:bottomLineNormalColor="@color/gravy_light"
+        app:bottomLineSelectedColor="@color/colorAccent"
+        app:figures="4"
+        app:selectedBackgroundColor="@color/colorPrimary_alpha33"
+        app:verCodeMargin="10dp" />
+
+    <com.jkb.vcedittext.VerificationCodeEditText
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="20dp"
+        android:inputType="number"
+        android:text="1234"
+        android:textColor="@color/colorPrimary"
+        android:textSize="40sp"
+        app:bottomLineHeight="2dp"
+        app:bottomLineNormalColor="@color/gravy_light"
+        app:bottomLineSelectedColor="@color/colorAccent"
+        app:figures="5"
+        app:selectedBackgroundColor="@color/colorPrimary_alpha33"
+        app:verCodeMargin="10dp" />
+
+    <com.jkb.vcedittext.VerificationCodeEditText
+        android:layout_width="match_parent"
+        android:layout_height="50dp"
+        android:layout_margin="20dp"
+        android:inputType="number"
+        android:text="12"
+        android:textColor="@color/colorPrimary"
+        android:textSize="40sp"
+        app:bottomLineHeight="2dp"
+        app:bottomLineNormalColor="@color/gravy_light"
+        app:bottomLineSelectedColor="@color/colorAccent"
+        app:figures="6"
+        app:selectedBackgroundColor="@color/colorPrimary_alpha33"
+        app:verCodeMargin="10dp" />

 </LinearLayout>
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#3F51B5</color>
-    <color name="colorPrimaryDark">#303F9F</color>
-    <color name="colorAccent">#FF4081</color>
+    <color name="colorPrimary">#bd3e27</color>
+    <color name="colorPrimaryDark">#702314</color>
+    <color name="colorAccent">#bd3e27</color>
+    <color name="colorPrimary_alpha33">#64e42604</color>
+    <color name="gravy_light">#999999</color>
 </resources>
--- a/vcedittext-lib/build.gradle
+++ b/vcedittext-lib/build.gradle
@@ -1,17 +1,27 @@
 apply plugin: 'com.android.library'
+apply plugin: 'com.novoda.bintray-release'
+
+def appVerCode = 1
+def appVerName = "1.0.0"
+
+publish {
+    userOrg = 'jkb'
+    groupId = 'com.justkiddingbaby'
+    artifactId = 'vercodeedittext'
+    publishVersion = appVerName
+    desc = 'An Android vercode edittext.（一个安卓验证码输入框）'
+    website = 'https://github.com/YangJing96/VercodeEditText'
+}

 android {
-    compileSdkVersion 25
-    buildToolsVersion "25.0.3"
+    compileSdkVersion Integer.parseInt(COMPILE_SDK_VERSION)
+    buildToolsVersion BUILDTOOLS_VERSION

    defaultConfig {
-        minSdkVersion 12
-        targetSdkVersion 25
-        versionCode 1
-        versionName "1.0"
-
-        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
-
+        minSdkVersion Integer.parseInt(MIN_SDK_VERSION)
+        targetSdkVersion Integer.parseInt(TARGET_SDK_VERSION)
+        versionCode appVerCode
+        versionName appVerName
    }
    buildTypes {
        release {
@@ -19,13 +29,9 @@ android {
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
+    lintOptions { abortOnError false }
 }

 dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
-        exclude group: 'com.android.support', module: 'support-annotations'
-    })
-    compile 'com.android.support:appcompat-v7:25.3.1'
-    testCompile 'junit:junit:4.12'
+    compile "com.android.support:appcompat-v7:${SUPPORT_LIB_VERSION}"
 }
--- a/vcedittext-lib/src/main/java/com/jkb/vcedittext/VerificationAction.java
+++ b/vcedittext-lib/src/main/java/com/jkb/vcedittext/VerificationAction.java
@@ -0,0 +1,62 @@
+package com.jkb.vcedittext;
+
+import android.support.annotation.ColorRes;
+
+/**
+ * 填写验证码支持的Action
+ * Created by yj on 2017/5/11.
+ */
+
+interface VerificationAction {
+
+    /**
+     * 设置位数
+     */
+    void setFigures(int figures);
+
+    /**
+     * 设置验证码之间的间距
+     */
+    void setVerCodeMargin(int margin);
+
+    /**
+     * 设置底部选中状态的颜色
+     */
+    void setBottomSelectedColor(@ColorRes int bottomSelectedColor);
+
+    /**
+     * 设置底部未选中状态的颜色
+     */
+    void setBottomNormalColor(@ColorRes int bottomNormalColor);
+
+    /**
+     * 设置选择的背景色
+     */
+    void setSelectedBackgroundColor(@ColorRes int selectedBackground);
+
+    /**
+     * 设置底线的高度
+     */
+    void setBottomLineHeight(int bottomLineHeight);
+
+    /**
+     * 设置当验证码变化时候的监听器
+     */
+    void setOnVerificationCodeChangedListener(OnVerificationCodeChangedListener listener);
+
+    /**
+     * 验证码变化时候的监听事件
+     */
+    interface OnVerificationCodeChangedListener {
+
+        /**
+         * 当验证码变化的时候
+         */
+        void onVerCodeChanged(CharSequence s, int start, int before, int count);
+
+        /**
+         * 输入完毕后的回调
+         */
+        void onInputCompleted(CharSequence s);
+    }
+}
--- a/vcedittext-lib/src/main/java/com/jkb/vcedittext/VerificationCodeEditText.java
+++ b/vcedittext-lib/src/main/java/com/jkb/vcedittext/VerificationCodeEditText.java
@@ -0,0 +1,262 @@
+package com.jkb.vcedittext;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.support.annotation.ColorRes;
+import android.support.v4.content.ContextCompat;
+import android.text.Editable;
+import android.text.TextPaint;
+import android.text.TextWatcher;
+import android.util.AttributeSet;
+import android.util.DisplayMetrics;
+import android.util.TypedValue;
+import android.view.WindowManager;
+
+
+/**
+ * 验证码的EditText
+ * Created by yj on 2017/6/12.
+ */
+
+public class VerificationCodeEditText extends android.support.v7.widget.AppCompatEditText implements
+        VerificationAction, TextWatcher {
+
+    private int mFigures;//需要输入的位数
+    private int mVerCodeMargin;//验证码之间的间距
+    private int mBottomSelectedColor;//底部选中的颜色
+    private int mBottomNormalColor;//未选中的颜色
+    private float mBottomLineHeight;//底线的高度
+    private int mSelectedBackgroundColor;//选中的背景颜色
+
+    private OnVerificationCodeChangedListener onCodeChangedListener;
+    private int mCurrentPosition = 0;
+    private int mEachRectLength = 0;//每个矩形的边长
+    private Paint mSelectedBackgroundPaint;
+    private Paint mNormalBackgroundPaint;
+    private Paint mBottomSelectedPaint;
+    private Paint mBottomNormalPaint;
+
+    public VerificationCodeEditText(Context context) {
+        this(context, null);
+    }
+
+    public VerificationCodeEditText(Context context, AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public VerificationCodeEditText(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        initAttrs(attrs);
+        setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent));//防止出现下划线
+        initPaint();
+        super.addTextChangedListener(this);
+    }
+
+    /**
+     * 初始化paint
+     */
+    private void initPaint() {
+        mSelectedBackgroundPaint = new Paint();
+        mSelectedBackgroundPaint.setColor(mSelectedBackgroundColor);
+        mNormalBackgroundPaint = new Paint();
+        mNormalBackgroundPaint.setColor(getColor(android.R.color.transparent));
+
+        mBottomSelectedPaint = new Paint();
+        mBottomNormalPaint = new Paint();
+        mBottomSelectedPaint.setColor(mBottomSelectedColor);
+        mBottomNormalPaint.setColor(mBottomNormalColor);
+        mBottomSelectedPaint.setStrokeWidth(mBottomLineHeight);
+        mBottomNormalPaint.setStrokeWidth(mBottomLineHeight);
+    }
+
+    /**
+     * 初始化Attrs
+     */
+    private void initAttrs(AttributeSet attrs) {
+        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.VerCodeEditText);
+        mFigures = ta.getInteger(R.styleable.VerCodeEditText_figures, 4);
+        mVerCodeMargin = (int) ta.getDimension(R.styleable.VerCodeEditText_verCodeMargin, 0);
+        mBottomSelectedColor = ta.getColor(R.styleable.VerCodeEditText_bottomLineSelectedColor,
+                getCurrentTextColor());
+        mBottomNormalColor = ta.getColor(R.styleable.VerCodeEditText_bottomLineNormalColor,
+                getColor(android.R.color.darker_gray));
+        mBottomLineHeight = ta.getDimension(R.styleable.VerCodeEditText_bottomLineHeight,
+                dp2px(5));
+        mSelectedBackgroundColor = ta.getColor(R.styleable.VerCodeEditText_selectedBackgroundColor,
+                getColor(android.R.color.darker_gray));
+        ta.recycle();
+    }
+
+
+    @Override
+    final public void setCursorVisible(boolean visible) {
+        super.setCursorVisible(false);//隐藏光标的显示
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        int widthResult = 0, heightResult = 0;
+        //最终的宽度
+        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
+        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
+        if (widthMode == MeasureSpec.EXACTLY) {
+            widthResult = widthSize;
+        } else {
+            widthResult = getScreenWidth(getContext());
+        }
+        //每个矩形形的宽度
+        mEachRectLength = (widthResult - (mVerCodeMargin * (mFigures - 1))) / mFigures;
+        //最终的高度
+        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
+        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
+        if (heightMode == MeasureSpec.EXACTLY) {
+            heightResult = heightSize;
+        } else {
+            heightResult = mEachRectLength;
+        }
+        setMeasuredDimension(widthResult, heightResult);
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        mCurrentPosition = getText().length();
+        int width = mEachRectLength - getPaddingLeft() - getPaddingRight();
+        int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();
+        for (int i = 0; i < mFigures; i++) {
+            canvas.save();
+            int start = width * i + i * mVerCodeMargin;
+            int end = width + start;
+            //画一个矩形
+            if (i == mCurrentPosition) {//选中的下一个状态
+                canvas.drawRect(start, 0, end, height, mSelectedBackgroundPaint);
+            } else {
+                canvas.drawRect(start, 0, end, height, mNormalBackgroundPaint);
+            }
+            canvas.restore();
+        }
+        //绘制文字
+        String value = getText().toString();
+        for (int i = 0; i < value.length(); i++) {
+            canvas.save();
+            int start = width * i + i * mVerCodeMargin;
+            float x = start + width / 2;
+            TextPaint paint = getPaint();
+            paint.setTextAlign(Paint.Align.CENTER);
+            paint.setColor(getCurrentTextColor());
+            Paint.FontMetrics fontMetrics = paint.getFontMetrics();
+            float baseline = (height - fontMetrics.bottom + fontMetrics.top) / 2
+                    - fontMetrics.top;
+            canvas.drawText(String.valueOf(value.charAt(i)), x, baseline, paint);
+            canvas.restore();
+        }
+        //绘制底线
+        for (int i = 0; i < mFigures; i++) {
+            canvas.save();
+            float lineY = height - mBottomLineHeight / 2;
+            int start = width * i + i * mVerCodeMargin;
+            int end = width + start;
+            if (i < mCurrentPosition) {
+                canvas.drawLine(start, lineY, end, lineY, mBottomSelectedPaint);
+            } else {
+                canvas.drawLine(start, lineY, end, lineY, mBottomNormalPaint);
+            }
+            canvas.restore();
+        }
+    }
+
+    @Override
+    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
+        mCurrentPosition = getText().length();
+        postInvalidate();
+    }
+
+    @Override
+    public void onTextChanged(CharSequence s, int start, int before, int count) {
+        mCurrentPosition = getText().length();
+        postInvalidate();
+        if (onCodeChangedListener != null) {
+            onCodeChangedListener.onVerCodeChanged(getText(), start, before, count);
+        }
+    }
+
+    @Override
+    public void afterTextChanged(Editable s) {
+        mCurrentPosition = getText().length();
+        postInvalidate();
+        if (getText().length() == mFigures) {
+            if (onCodeChangedListener != null) {
+                onCodeChangedListener.onInputCompleted(getText());
+            }
+        } else if (getText().length() > mFigures) {
+            getText().delete(mFigures, getText().length());
+        }
+    }
+
+    @Override
+    public void setFigures(int figures) {
+        mFigures = figures;
+        postInvalidate();
+    }
+
+    @Override
+    public void setVerCodeMargin(int margin) {
+        mVerCodeMargin = margin;
+        postInvalidate();
+    }
+
+    @Override
+    public void setBottomSelectedColor(@ColorRes int bottomSelectedColor) {
+        mBottomSelectedColor = getColor(bottomSelectedColor);
+        postInvalidate();
+    }
+
+    @Override
+    public void setBottomNormalColor(@ColorRes int bottomNormalColor) {
+        mBottomSelectedColor = getColor(bottomNormalColor);
+        postInvalidate();
+    }
+
+    @Override
+    public void setSelectedBackgroundColor(@ColorRes int selectedBackground) {
+        mSelectedBackgroundColor = getColor(selectedBackground);
+        postInvalidate();
+    }
+
+    @Override
+    public void setBottomLineHeight(int bottomLineHeight) {
+        this.mBottomLineHeight = bottomLineHeight;
+        postInvalidate();
+    }
+
+    @Override
+    public void setOnVerificationCodeChangedListener(OnVerificationCodeChangedListener listener) {
+        this.onCodeChangedListener = listener;
+    }
+
+    /**
+     * 返回颜色
+     */
+    private int getColor(@ColorRes int color) {
+        return ContextCompat.getColor(getContext(), color);
+    }
+
+    /**
+     * dp转px
+     */
+    private int dp2px(int dp) {
+        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
+                getResources().getDisplayMetrics());
+    }
+
+    /**
+     * 获取手机屏幕的宽度
+     */
+    static int getScreenWidth(Context context) {
+        DisplayMetrics metrics = new DisplayMetrics();
+        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+        wm.getDefaultDisplay().getMetrics(metrics);
+        return metrics.widthPixels;
+    }
+}
--- a/vcedittext-lib/src/main/res/values/attrs.xml
+++ b/vcedittext-lib/src/main/res/values/attrs.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--验证码的属性-->
+    <declare-styleable name="VerCodeEditText">
+        <attr name="figures" format="integer" />
+        <attr name="verCodeMargin" format="dimension" />
+        <attr name="bottomLineSelectedColor" format="reference" />
+        <attr name="bottomLineNormalColor" format="reference" />
+        <attr name="bottomLineHeight" format="dimension" />
+        <attr name="selectedBackgroundColor" format="reference" />
+    </declare-styleable>
+</resources>