The ListView with indexed columns, which is very common in Android development, makes it easy for users to index letters, just like in the Address book:
Today, we implement this ListView with an indexed column from zero to one.
How to implement this control, we should comb out a way of thinking.
① first, you should inherit the letter's index column with a control and draw the letter by OnDraw method.
② then we should listen to the Ontouch event of the letter control to determine if the user actually pressed the letter.
③ is the linkage between this index bar and the ListView, which is to slide the ListView to the position where the letter is pressed.
The general flowchart is as follows:
With the front cushion, we lead this article-code.
First, the index bar is the code that controls how letters are drawn on the control:
/*** The side bar displays letters*/ Privatestring[] Words = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#" }; /*** Methods for drawing list controls * The letters to be drawn are drawn in a specified area from top to bottom * If the selected letter is highlighted*/@Overrideprotected voidOnDraw (canvas canvas) {//TODO auto-generated Method Stub Super. OnDraw (canvas); intHeight = getheight ();//get the corresponding height intwidth = getwidth ();//get the corresponding width intSingleheight = Height/words.length;//get the height of each letter for(inti = 0; i < words.length; i++) {Paint.setcolor (Color.rgb (33, 65, 98)); //Paint.setcolor (color.white);Paint.settypeface (Typeface.default_bold); Paint.setantialias (true); Paint.settextsize (20f); //the selected state if(Isdown) {Paint.setcolor (Color.parsecolor ("#ffffff")); //Paint.setfakeboldtext (true); } //The x-coordinate is equal to the middle-half of the string width. floatXPos = WIDTH/2-Paint.measuretext (Words[i])/2; floatYPos = singleheight * i +Singleheight; Canvas.drawtext (Words[i], XPos, YPos, paint); Paint.reset ();//Reset Brush } }
With the above code, we can draw the following conclusion: the letters to be drawn are drawn in a specified area from top to bottom, each letter has the same x coordinate, and the X coordinate is half the width of the control. If the current letter is selected, the highlight is displayed. Ideas:
Next, we come to the second step, to determine exactly what the user click is the letter, the code is as follows:
/*** How to handle touch events * The user presses the time, the entire control background changes * According to the Y coordinate to determine exactly what the user pressed the letter * The current letter highlighting the letter displayed in the center of the ListView*/@Override Public Booleandispatchtouchevent (Motionevent event) {intAction =event.getaction (); Final floaty = event.gety ();//Click y coordinate Final intOldchoose =Choose; FinalItouchingletterchangedlistener listener =Ontouchingletterchangedlistener; Final intc = (int) (Y/getheight () * words.length);//Click the percentage of the total height of the y-coordinate *b the length of the array is equal to the number of hits in B. Switch(action) { CaseMotionEvent.ACTION_UP:isdown=false; Setbackgroundresource (Android. R.color.transparent); Choose=-1;//invalidate (); if(Textviewdialog! =NULL) {textviewdialog.setvisibility (view.invisible); } Break; default: Isdown=true; Setbackgroundresource (R.color.sidebar_bg_color); if(Oldchoose! =c) {if(c >= 0 && C <words.length) {if(Listener! =NULL) {listener. Ontouchingletterchanged (Words[c]); } if(Textviewdialog! =NULL) {Textviewdialog.settext (words[c]); Textviewdialog.setvisibility (view.visible); } Choose=C; Invalidate (); } } Break; } return true; }
Through the above code, we can summarize: when the user presses, the entire control background changes, according to the user pressed the y-coordinate to determine whether the user is pressed the letter, and will press the letter to display the center of the screen, as follows:
Finally, move the ListView to the corresponding position of the letter, with the following code:
/*** Move the ListView to the appropriate location according to the user clicking on the letter*/Sidebar.setontouchingletterchangedlistener (NewItouchingletterchangedlistener () {@Override Public voidontouchingletterchanged (String cString) {intPosition =-1; if(Cstring.length () > 0) {Position=myadapter.getpositionforsection (cString. CharAt (0)); } if(Position! =-1) {listview.setselection (position); } Else if(Cstring.contains ("#") {listview.setselection (0); } } });
Great length said so much, the effect of the control is:
The source code address is:
Http://pan.baidu.com/s/1dDMDjhR
The old pig takes you to play. Android Custom Control Two--Custom index bar ListView