Shulou(Shulou.com)06/02 Report--

This article mainly explains "Android how to implement custom password input box," interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "Android how to implement custom password input box"!

I. Effect and Scheme

Expected effect map:

As shown above, to implement a password input box style like this, the native does not provide a similar effect, so you need to implement it in a custom control way.

Expected base effect:

Accepts numbers only;

Support input encryption display;

Support deletion;

The number of password bits can be configured;

Text size, color, number box background configurable;

Protocol analysis:

Problems to be solved:

configurability;

How to enter and delete?

How is the overall UI implemented?

1. For input deletion you can listen for events on the software disk via setOnKeyListener.

2. Configurable data can be configured via custom property files;

3. For UI effects:

A: You can develop based on native controls, each digital layout corresponds to a TextView, select a data structure to manage it, and then select a container layout, such as LinearLayout to add.

B: Developed by custom View, you need to draw it yourself. The drawn content includes background, password content and password encryption style content.

II. Realization

Here, we choose the way of Scheme B to implement, try to use fewer controls to implement, and use at least a combination of 5 native controls in Scheme A.

1. Inherit ViewGrop or View?

If you choose scheme A, it is actually an inheritance of ViewGrop, and the internal single number is regarded as an independent child control, so it can inherit ViewGrop.

, but obviously do not need to be so troublesome (need to deal with layout, etc.), this password input is a separate control does not need to add child controls, so directly inherit View.

class PasswordEditText @JvmOverloads constructor( context: Context, attributeSet: AttributeSet? = null,) : View(context, attributeSet, 0) { }

2. If you inherit View, you need to process wrap_content, so you need to override onMeasure, that is, you need to be able to display measurements normally when no specific width is set. First define some variables for width and height colors:

//Number of digits private var passwordLength = 4 private var textColor = 0 //Interval-> dp2px private var itemPadding = 5 //Single number includes background width dp2px private var itemWidth = 30 private var bgItemColor = 0 privateval mPaintBg = Paint() //Used to store the password entered privateval password = arrayOfNulls(passwordLength)

Width is relatively easy to calculate:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) var width = 0 when (MeasureSpec.getMode(widthMeasureSpec)) { MeasureSpec.UNSPECIFIED,MeasureSpec.AT_MOST ->{ width = itemWidth * passwordLength + itemPadding * (passwordLength-1) } MeasureSpec.EXACTLY ->{ width = MeasureSpec.getSize(widthMeasureSpec) itemWidth = (width - itemPadding *(passwordLength -1)) / passwordLength } } setMeasuredDimension(width,itemWidth) }

Looking at the UI diagram, you can basically calculate it without involving too complicated calculations. Here, the height is not processed. In theory, the height value should be specified.

This is basically the measurement that needs to be done. Let's start drawing the background:

It is also very simple to draw a rounded rectangle according to the passwordLength loop, and the parameters are also well calculated:

private fun drawBgItems(canvas: Canvas) { for (i in password.indices) { Unprocessed padding value plus val rect = RectF( (i * itemWidth + (i) * itemPadding).toFloat(), 0f, ((i+1) * itemWidth + i * itemPadding).toFloat(), itemWidth.toFloat() ) canvas.drawRoundRect(rect, 5f, 5f, mPaintBg) } }

In order to make the effect more obvious, draw a bright color first:

Background, then draw OK, the next thing to do is to monitor the event and then draw the password content;

To implement an OnKeyListener

//keyboard monitor privateval keyListener = OnKeyListener { v, keyCode, event -> val action = event.action if (action == KeyEvent.ACTION_DOWN) { if (keyCode == KeyEvent.KEYCODE_DEL) { //Delete return@OnKeyListener true } if (keyCode >= KeyEvent.KEYCODE_0 && keyCode = KeyEvent.KEYCODE_0 && keyCode = KeyEvent.KEYCODE_0 && keyCode

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.