The old pig takes you to play. Android Custom Control Two--Custom index bar ListView

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