Android custom view implements address book alphabetic index (imitating wechat address book)

1、 Effect: we see that the address book of many software has an alphabetic index function on the right, such as wechat, Xiaomi address book, QQ, meituan's choice of region and so on. Here I cut a picture of meituan choosing a city to have a look;

Today we will implement the index function of the module on the right in the picture, including touching the display to select the index letter. Here, my UI interface is mainly implemented by referring to the wechat interface, so you can also compare it with wechat to see the effect. Don't say anything, only the effect picture is the most convincing!

2、 Analysis:

When we see such an effect, we all go back to ponder how it is realized;

First of all, it must be realized by customizing the view, because Android does not provide controls like this. The next step is how to customize our view. We know that the two main methods of customizing the view are OnDraw (canvas) and

Onmeasure (int widthmeasurespec, int hightmeasurespec) method. Of course, if it is a custom ViewGroup, it must be implemented

Onlayout (Boolean changed, int left, int top, int right, int bottom) method. Here, we can obviously use the custom view to realize this function. You can see the tape through the effect drawing. When touching this area, a suspended box similar to toast will pop up to display the selected index content. Therefore, we also need to rewrite the ontouchevent (motionevent) of the view Event, and finally the implementation of the suspension box. So let's start coding.

3、 Coding implementation:

We implement it according to the execution order of view

1. Implement the onmeasure (int widthmeasurespec, int hightmeasurespec) method. The function of this method is to measure our width and height. The specific implementation depends on the code

Two methods measurewidth (int) and measureheight (int) are defined here. You can clearly know from the method name that their functions are to measure width and height respectively. Go in and see how they are measured.

The above is the code for measuring the width. The code for measuring the height is roughly the same as the code for measuring the width, so it will not be posted. I will attach the source code at the end.

2. Implement the OnDraw (canvas C) method, which is very familiar to everyone. It is to draw the contents of these indexes on the view and display them, including the change of background color when selected;

Let me tell you something about the OnDraw method. First, draw the background color. Note that it is not drawn immediately, but when a finger touches it. Second, draw the content of the index. Here, the size and position of the drawn content need to be determined according to the width and height of the current view.

3. Implementation of ontouchevent (motionevent event) method

The code is also relatively simple. First, obtain the currently touched point, and obtain the position of the index according to the coordinates of the point, so as to get the position of the index.

4. In fact, we have achieved the desired effect here, but we still can't use it. Here we need to define a callback interface

Where do we call the callback interface? When we press the index with our finger, we actually need to determine which index we press, and the same is true when sliding. Therefore, this is not negotiable. We can directly put it in ontouchevent (motionevent event),

In the selectitem (int) method is the callback method executed.

5. Implement the floating box to display the selected index content

You need to use the WindowManager container here, but you need to attach a real view to it. When you press your finger, let the view display, and release it to not display

Similarly, if you need to change the displayed content, you need to set the current index content for the textview in the view where the callback is called.

Well, that's all the code for this view,

Next, post the XML referencing him and the XML of the floating view,

Referenced layout file

Floating view layout file

Floating view background

The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. At the same time, I also hope to support a lot of programming tips!