Android imitates wechat contact index list function

preface

  because I need a listview sorted from A-Z in a small software I'm making, I naturally think of wechat contacts. That's what I want. I didn't intend to write it myself. I wanted something written by a third party. After searching several, I found that some were too complex and some were simple, but they didn't meet my requirements, so I came to integrate complexity and simplicity.

realization

  let's look at the renderings first:

Key point analysis

  to achieve this effect, we need to consider the following issues:

  let's solve these problems, and then we can have the above effect.

[step 1]

    we need to customize a class, called slidebar, to inherit the button. Then we override the OnDraw method and draw the letters A-Z to show the effect of the letter bar on the right.

Take a look at the source code:

    just look at the OnDraw method first. Don't look at other contents first. First get the width and height of the control, then calculate the height that each letter should occupy, and then draw the letter in the middle of the space occupied by each letter. The code is relatively simple, so there is no need to explain this part in detail.

[step 2]

   we need to add a click event. When you click the slidebar, you can first see that the clicked letters in the right column become larger to distinguish them from the non clicked letters, and then pop up something similar to dialog to display the clicked letters. This effect is also very good.    in the slidebar, another method we need to cover is dispatchtouchevent(). After we click the slidebar, the next action may be sliding and lifting. We need to respond to the action after clicking. If it is lifting, the displayed dialog like things will disappear, and the enlarged letters will return to the original state. If it is sliding, When you slide to a letter, the corresponding letter will become larger and displayed.     from the above source code, it can be seen that the effect of increasing the letter is well realized. Just increase the textsize value of the paint object painting the selected letter. Then, something similar to dialog is realized with popupwindow. When clicking and sliding, popupwindow will be displayed. When lifting or sliding out of the slidebar range, popupwindow will disappear. Finally, it should be noted that the invalidate () method must not be forgotten to call. This method is used to redraw the picture.

[step 3]

  I think the most important and difficult thing is that the Chinese characters are sorted from a to Z. Fortunately, however, this has been realized. Let's talk about the so-called "bringing doctrine". There is a characterparser class in the project. This class encapsulates the operation of converting Chinese characters to Pinyin. The function of getselling (string s) method is to pass in Chinese character strings to get the Pinyin of Chinese characters. Sure enough, it is a good method. I like it!! In this way, we can get the Pinyin initials of the Chinese character strings to be displayed, and then sort all the strings according to letters to get an ordered list from A-Z. Because listview is usually bound to a list object, and then a series of objects are saved in the list object. Here I use an object:

  in this object, you should pay attention to two member variables, item_ Type and item_ EN, indicating whether the object is a normal object to be displayed or a letter separator object, according to item_ Different types, when we write the getview method of the adapter, we can return different view objects, and then we can realize the normal item and letter separator item in the rendering. item_ EN represents the name variable, that is, the Pinyin string of the Chinese character string, which is mainly used to obtain the initial letter and compare the strings.

    now suppose you have a list object with some databeans stored in it, then the problem comes, how to sort these databean objects according to Pinyin string and how to add a databean object representing letter separator in the list object?

  first solve the problem of sorting, which is relatively simple:

  the sort method of collections is used here. This method has two parameters, one is the list object with sorting, and the other is the object of the class that implements the comparator interface, which is used to explain how to sort and which member variable to sort.

  pinyincomparator class implements comparator:

  you can see that the two databean objects are based on the variable item_ EN is the Pinyin string to sort. It is more convenient to implement. You don't need to write your own sorting algorithm. Of course, you don't object to sorting by yourself.

   after sorting by the sort function of collections, now the databean objects saved in the list object are sorted according to A-Z. what we need to do now is to insert some objects representing the letter separator databean into these objects. This implementation should be relatively simple, and my method is relatively stupid / (ㄒ o ㄒ)/~~

  this class implements adding some objects representing letter separators to the list object by setting item_ The value of the type variable is different. Different item displays can be realized by returning different views according to this value in the adapter.

   well, there is only one problem left up to now, that is, after clicking the letter, listview sets the item corresponding to the letter to be displayed in the first place. This implementation is not difficult. After obtaining the letter in the clicked letter, traverse all databean objects, find the first letter separator object matching the current letter, and then get the position value of the item, Set the position of the selected item in the listview to the position of the found item.

  finally, all the problems have been solved. Let's see if we can achieve this effect now? If not, you can refer to my source code.

Summary

  originally, I didn't know much about this, but I forced myself to read the source code, because the things written by the great God on the Internet may not 100% meet my requirements, so if I can understand the source code, I can modify it myself.

The source code is downloaded here.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.