Usage of Android pickerview scroll selector

Setting the alarm clock in the mobile phone needs to select the time. The control for selecting the time is the scroll selector. I brushed MIUI with the mobile phone a few days ago and found that the effect of the built-in time selector is very good, so I wrote one myself and had the right to practice. Let's look at the effect first:

Is the effect OK? The implementation idea is to customize a pickerview and scroll a pickerview separately. Obviously, there are minutes and seconds in the above figure, so two pickerviews are used in the layout. Since the click event of text is not involved here, you only need to inherit the view and draw text directly with canvas. Main difficulties in the implementation of pickerview:

Difficulty 1:

Gradient of font with distance. You can see that text changes with the distance from the center. What changes here are transparency alpha and font size texsize. I have set Max and min values to calculate scale through its distance from the center point. I use a parabola, scale = 1-ax ^ 2 (x < = height / 4), scale = 0 (x > height / 4), a = (4 / height) ^ 2. X is the offset from the center of the view. It is shown in pictures as follows:

Difficulty 2:

Text centered. When drawing text, you should not only center it in the X direction, but also in the Y direction. It is relatively simple in the X direction. Just set the align of paint to align.center, but it hurts in the Y direction. You need to calculate the baseline of text.

Difficulty 3:

Cycle scrolling. In order to solve the problem of circular scrolling, I spread out the list of stored text from the middle up and down, and make the selected text always be the middle position value of the list by constantly moving headtotail and movetailtohead.

The above are the difficulties. After understanding them, you can look at the code of pickerview:

The comments in the code are very clear. Next, let's use the written pickerview to realize the picture effect at the beginning of the article ~ first look at the layout of mainactivity:

Two pickerviews, two textviews, very simple. Here is the code for mainactivity:

OK, it's so simple to customize your own timerpicker

Source download: pickerview scroll selector

I hope this article is helpful for you to learn the scroll selector pickerview.