android自定義輸入,Android 自定義密碼輸入框實作代碼

效果

自定義密碼輸入框，項目的一個界面需求，我把這個自定義的輸入框提取出來作為這次内容的題目。

輸入前:

輸入後：

輸入1個字元就紅一個圈圈，很簡單的效果。

思路

1.自定義EditText。

2.背景為一個外圓環加内實心圓。

3.edittext的長度變化時候重新繪制背景或者紅色環位置。

關鍵代碼

代碼其實也很簡單，順手拿資源的請到文末。

1.畫背景

private void drawOutRing(Canvas canvas) {

mPaint.setColor(mBgColor);

// 設定畫筆為空心

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(mBgSize);

RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);

// 畫圓

for (int i = 0; i < mPasswordNumber; i++) {

int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint);

}

}

2.畫實心内圓背景

private void drawInRing(Canvas canvas) {

mPaint.setColor(mDivisionLineColor);

// 設定畫筆為實心

mPaint.setStyle(Paint.Style.FILL);

// 畫圈圈

for (int i = 0; i < mPasswordNumber; i++) {

int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);

}

}

}

3.繪制輸入密碼的變化動作

private void drawHidePassword(Canvas canvas) {

int passwordLength = getText().length();

if (passwordLength > 6) passwordLength = 6;

mPaint.setColor(mPasswordColor);

// 畫實心内圓

mPaint.setStyle(Paint.Style.FILL);

for (int i = 0; i < passwordLength; i++) {

int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);

}

//外圓顔色

mPaint.setColor(mPasswordColor);

// 設定畫筆為空心

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(mBgSize);

RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);

// 畫空心外圓

for (int i = 0; i < passwordLength; i++) {

int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint);

}

}

4.重寫onDraw

int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize;

mPasswordItemWidth = passwordWidth / mPasswordNumber;

// 繪制背景外圓

drawOutRing(canvas);

// 繪制背景内圓

drawInRing(canvas);

// 繪制密碼

drawHidePassword(canvas);

5.xml引用

android:id="@+id/password"

android:layout_width="240dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="10dp"

android:background="@null">

6.還可以設定些屬性

在sytle中設定，通過xml中的app：xxx引用。

android:id="@+id/password"

android:layout_width="240dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="10dp"

xmlns:app="http://schemas.android.com/apk/res-auto"

app:bgColor="#ffffff"

android:background="@null">

完整代碼

一些樣式，我設定了，結果直接沒用上

自定義Edittext

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.inputmethod.EditorInfo;

import android.widget.EditText;

public class PasswordView extends EditText {

// 畫筆

private Paint mPaint;

// 一個密碼所占的寬度

private int mPasswordItemWidth;

// 密碼的個數預設為6位數

private int mPasswordNumber = 6;

// 背景圓顔色

private int mBgColor = Color.parseColor("#d1d2d6");

// 背景大小

private int mBgSize = 1;

// 背景邊框圓角大小

private int mBgCorner = 0;

// 外圓的顔色

private int outRingLineColor = mBgColor;

// 外圓線條的大小

private int outRingLineSize = 1;

// 密碼輸入的顔色

private int mPasswordColor = Color.parseColor("#cb3435");

// 密碼圓點的半徑大小

private int mPasswordRadius = 6;

// 外圓半徑大小

private int mOutRadius = 25;

public PasswordView(Context context) {

this(context, null);

}

public PasswordView(Context context, AttributeSet attrs) {

super(context, attrs);

initPaint();

initAttributeSet(context, attrs);

// 設定輸入模式是密碼

setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);

// 不顯示光标

setCursorVisible(false);

}

private void initAttributeSet(Context context, AttributeSet attrs) {

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordView);

// 擷取大小

outRingLineSize = (int) array.getDimension(R.styleable.PasswordView_outRingLineSize, dip2px(outRingLineSize));

mPasswordRadius = (int) array.getDimension(R.styleable.PasswordView_passwordRadius, dip2px(mPasswordRadius));

mBgSize = (int) array.getDimension(R.styleable.PasswordView_bgSize, dip2px(mBgSize));

mBgCorner = (int) array.getDimension(R.styleable.PasswordView_bgCorner, 0);

// 擷取顔色

mBgColor = array.getColor(R.styleable.PasswordView_bgColor, mBgColor);

outRingLineColor = array.getColor(R.styleable.PasswordView_outRingColor, outRingLineColor);

mPasswordColor = array.getColor(R.styleable.PasswordView_passwordColor, mPasswordColor);

array.recycle();

}

private void initPaint() {

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

}

private int dip2px(int dip) {

return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

dip, getResources().getDisplayMetrics());

}

@Override

protected void onDraw(Canvas canvas) {

int passwordWidth = getWidth() - (mPasswordNumber - 1) * outRingLineSize;

mPasswordItemWidth = passwordWidth / mPasswordNumber;

// 繪制背景外圓

drawOutRing(canvas);

// 繪制背景内圓

drawInRing(canvas);

// 繪制密碼

drawHidePassword(canvas);

}

@Override

public void setText(CharSequence text, BufferType type) {

super.setText(text, type);

}

private void drawOutRing(Canvas canvas) {

mPaint.setColor(mBgColor);

// 設定畫筆為空心

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(mBgSize);

RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);

// 畫圓

for (int i = 0; i < mPasswordNumber; i++) {

int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint);

}

}

private void drawHidePassword(Canvas canvas) {

int passwordLength = getText().length();

if (passwordLength > 6) passwordLength = 6;

mPaint.setColor(mPasswordColor);

// 設定畫筆為實心

mPaint.setStyle(Paint.Style.FILL);

for (int i = 0; i < passwordLength; i++) {

int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);

}

//外圓

mPaint.setColor(mPasswordColor);

// 設定畫筆為空心

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(mBgSize);

RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);

// 如果沒有設定圓角，就畫矩形

for (int i = 0; i < passwordLength; i++) {

int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint);

}

}

private void drawInRing(Canvas canvas) {

mPaint.setColor(outRingLineColor);

// 設定畫筆為實心

mPaint.setStyle(Paint.Style.FILL);

// 畫圈圈

for (int i = 0; i < mPasswordNumber; i++) {

int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;

canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);

}

}

}

總結

以上所述是小編給大家介紹的Android 自定義密碼輸入框實作代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！