【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android中怎么自定義一個(gè)密碼輸入框

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android中怎么自定義一個(gè)密碼輸入框

這篇文章給大家介紹Android中怎么自定義一個(gè)密碼輸入框，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。思路1.自定義EditText。2.背景為一個(gè)外圓環(huán)加內(nèi)實(shí)心圓。3.edittext的長度變化時(shí)候重新繪制背景或者紅色環(huán)位置。關(guān)鍵代碼代碼其實(shí)也很簡單，順手拿資源的請到文末。1.畫背景/**

*

繪制背景外圓

*/

private

void

drawOutRing(Canvas

canvas)

{

mPaint.setColor(mBgColor);

//

設(shè)置畫筆為空心

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.畫實(shí)心內(nèi)圓背景/**

*

繪制背景內(nèi)圓

*/

private

void

drawInRing(Canvas

canvas)

{

mPaint.setColor(mDivisionLineColor);

//

設(shè)置畫筆為實(shí)心

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.繪制輸入密碼的變化動(dòng)作/**

*

繪制隱藏的密碼

*/

private

void

drawHidePassword(Canvas

canvas)

{

int

passwordLength

=

getText().length();

if

(passwordLength

>

6)

passwordLength

=

6;

mPaint.setColor(mPasswordColor);

//

畫實(shí)心內(nèi)圓

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);

//

設(shè)置畫筆為空心

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.重寫onDrawint

passwordWidth

=

getWidth()

-

(mPasswordNumber

-

1)

*

mDivisionLineSize;

mPasswordItemWidth

=

passwordWidth

/

mPasswordNumber;

//

繪制背景外圓

drawOutRing(canvas);

//

繪制背景內(nèi)圓

drawInRing(canvas);

//

繪制密碼

drawHidePassword(canvas);5.xml引用<com***.PasswordView

android:id="@+id/password"

android:layout_width="240dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="10dp"

android:background="@null">

</com***.PasswordView>6.還可以設(shè)置些屬性在sytle中設(shè)置，通過xml中的app：xxx引用。<com.*.PasswordView

android:id="@+id/password"

android:layout_width="240dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="10dp"

xmlns:app="/apk/res-auto"

app:bgColor="#ffffff"

android:background="@null">

</com.*.PasswordView>完整代碼一些樣式，我設(shè)置了，結(jié)果直接沒用上<declare-styleable

name="PasswordView">

<!--

密碼的個(gè)數(shù)

-->

<attr

name="passwordNumber"

format="integer"/>

<!--

密碼圓點(diǎn)的半徑

-->

<attr

name="passwordRadius"

format="dimension"/>

<!--

密碼圓點(diǎn)的顏色

-->

<attr

name="passwordColor"

format="color"/>

<!--

外圈顏色

-->

<attr

name="outRingColor"

format="color"/>

<!--

外圓線條大小

-->

<attr

name="outRingLineSize"

format="color"/>

<!--

背景邊框的顏色

-->

<attr

name="bgColor"

format="color"/>

<!--

背景邊框的大小

-->

<attr

name="bgSize"

format="dimension"/>

<!--

背景邊框的圓角大小

-->

<attr

name="bgCorner"

format="dimension"/>

</declare-styleable>自定義Edittextimport

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;

//

一個(gè)密碼所占的寬度

private

int

mPasswordItemWidth;

//

密碼的個(gè)數(shù)默認(rèn)為6位數(shù)

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");

//

密碼圓點(diǎn)的半徑大小

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);

//

設(shè)置輸入模式是密碼

setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);

//

不顯示光標(biāo)

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);

}

/**

*

dip

轉(zhuǎn)

px

*/

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);

//

繪制背景內(nèi)圓

drawInRing(canvas);

//

繪制密碼

drawHidePassword(canvas);

}

@Override

public

void

setText(CharSequence

text,

BufferType

type)

{

super.setText(text,

type);

}

/**

*

繪制背景外圓

*/

private

void

drawOutRing(Canvas

canvas)

{

mPaint.setColor(mBgColor);

//

設(shè)置畫筆為空心

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);

//

設(shè)置畫筆為實(shí)心

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);

//

設(shè)置畫筆為空心

mPaint.setStyle(Paint.Style.STROKE);