Customize view----Click to swipe to select a list of letters

Because the project needs, and do not want to use the Web-based control, so the dead self defined a control, hereby record the success. The effect is as follows:

The first thing you need to do is draw all the letters:

Private StaticString letters[] = {"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"};//Paint BrushPrivatePaint Mpaint;//Width height of the current controlPrivate intMwidth;Private intMhegiht;//height of each text itemPrivate intLetteritemheight;Private void Init() {//Initialize brushMpaint =NewPaint (Paint.anti_alias_flag);        Mpaint.setcolor (Color.gray); Mpaint.settextsize (32.0f); }@Override    protected void OnLayout(BooleanChangedintLeftintTopintRightintBottom) {Super. OnLayout (changed, left, top, right, bottom);        Mwidth = GetWidth ();        Mhegiht = GetHeight ();    Letteritemheight = Mhegiht/letters.length; }@Override    protected void OnDraw(Canvas canvas) { for(intI=0; i<letters.length; i++) {//Calculate the X value of the text drawn: half of the width of the control minus half the width of the measurement text            floatx = mwidth/2-Mpaint.measuretext (Letters[i])/2;floaty = (i +1) *letteritemheight;        Canvas.drawtext (Letters[i], x, y, mpaint); }    }

Initializes the brush and its brush color and brush size in the Init method, obtaining the control width and height of each letter item for the current custom view when onlayout the layout. The next is to draw, in the drawing, you need to get the X, Y value of each letter, the X value is: The left edge of the letter to the left edge of the control distance: (tease, figure too ugly not comment Orz)

, the blue box represents the custom control, the red box represents the letter, the Purple Line is half the width of the control, the Green Line is half the width of the letter, and the pink is the X value of the text to be drawn. So, obviously x = purple-Green.
The value of y is calculated, because the text is drawn based on the baseline baseline, so the baseline for each letter item is (i + 1) letteritemheight. Specific can learn more about the Big God love Brother's Custom View series blog

Add a touch event and get the letter you clicked:

PrivateOntouchletterslistener Ontouchletterslistener;@Override     Public Boolean dispatchtouchevent(Motionevent event) {Final floaty = event.gety ();//Array subscript        Final intindex = (int) (y/mhegiht*letters.length);FinalOntouchletterslistener listener = Ontouchletterslistener;Final intAction = Event.getaction ();Switch(action) { CaseMotionEvent.ACTION_UP:setBackgroundColor (Getresources (). GetColor (Android.                R.color.transparent)); Invalidate (); Break;default: SetBackgroundColor (Getresources (). GetColor (R.color.gray));if(Index >=0&& Index < letters.length) {if(Listener! =NULL){//Put the clicked letter back to the userListener.ontouchletters (Letters[index]); }} invalidate (); Break; }return true; } Public  interface ontouchletterslistener{         Public void ontouchletters(String s); } Public void Setontouchletterslistener(Ontouchletterslistener Ontouchletterslistener) { This. Ontouchletterslistener = Ontouchletterslistener; }

Overriding the Dispatchtouchevent event method, first getting the Y value of each click relative to the current view, by Y/mhegiht*letters.length is the approximate proportion of the total length of the array based on the clicked in the entire control, Calculates the subscript value to get the letter callback from the letters array. (This is a approximate value, the error will not be large)
In ACTION_UP we set the background color of the control to transparent. Other conditions set a gray value.

Use this custom control:

<relativelayout xmlns:android="Http://schemas.android.com/apk/res/android"Android:layout_width="Match_parent"android:layout_height="Match_parent"> <com.jerry.testproject.view.lettersiderbar android:id="@+id/letter"Android:layout_centerinparent="true"Android:layout_width="45DP"android:layout_height="Match_parent"/></relativelayout> PackageCom.jerry.testproject;ImportAndroid.os.Bundle;ImportAndroid.support.design.widget.Snackbar;Importandroid.support.v7.app.AppCompatActivity;ImportCom.jerry.testproject.view.LetterSiderBar;ImportCom.lidroid.xutils.ViewUtils;ImportCom.lidroid.xutils.view.annotation.ViewInject; Public  class mainactivity extends appcompatactivity  implements  Lettersiderbar. Ontouchletterslistener {    @ViewInject(R.id.letter)PrivateLettersiderbar Mlettersiderbar;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main); Viewutils.inject ( This); Mlettersiderbar.setontouchletterslistener ( This); }//methods to implement callbacks    @Override     Public void ontouchletters(String s) {Snackbar.make (Mlettersiderbar,"You have chosen:"+ S, snackbar.length_short). Show (); }}

This uses the view annotations of the Xutils open Source component to initialize the control. As well as a toast-like hint control using the 22.2.0 API support package design Snackbar as a hint, as developers simply introduce: Compile ' com.android.support:design:22.2.0 ' can be used.

here are the projects:
http://download.csdn.net/detail/abren32/8895649

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Customize view----Click to swipe to select a list of letters