Custom View ---- click to slide to select the letter list, view ---- slide

Custom View ---- click to slide to select the letter list, view ---- slide

As a result of the project's needs, and do not want to use a good control on the Internet, so I have defined a control, and I hereby record the success. The effect is as follows:

First, you need to draw all the letters:

Private static String 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 brush private Paint mPaint for painting; // the width and height of the current control private int mWidth; private int mHegiht; // The height of each text item private int letterItemHeight; private void init () {// initialize the Paint brush mPaint = new Paint (Paint. ANTI_ALIAS_FLAG); mPaint. setColor (Color. GRAY); mPaint. setTextSize (32.0f) ;}@ Override protected void onLayout (boolean changed, int left, int top, int right, int bottom) {super. onLayout (changed, left, top, right, bottom); mWidth = getWidth (); mHegiht = getHeight (); letterItemHeight = mHegiht/letters. length ;}@ Override protected void onDraw (Canvas canvas) {for (int I = 0; I <letters. length; I ++) {// calculate the x value drawn by text: half of the control width minus half of the width of the measured text float x = mWidth/2-mPaint. measureText (letters [I])/2; float y = (I + 1) * letterItemHeight; canvas. drawText (letters [I], x, y, mPaint );}}

In the init method, initialize the paint brush, its color, and its size. In the onLayout layout, obtain the control width and height of the current custom View and the height of each item. The next step is drawing. You need to obtain the x and y values of each letter during painting. The x value is the distance from the left edge of the letter to the left edge of the control: (funny ratio, the figure is too ugly to comment on orz)

A blue box represents a custom control, a red box represents a letter, a purple line represents half of the width of the control, and a green line represents half of the width of the letter and text, pink is the x value of the text to be drawn. Therefore, it is clear that x = purple-green.
Y value calculation. Because the text is drawn based on the baseline, the baseline of each letter item is (I + 1) letterItemHeight. You can learn more about the custom View series blog by IGO.

Add the Touch event and get the letters clicked:

Private OnTouchLettersListener onTouchLettersListener; @ Override public boolean dispatchTouchEvent (MotionEvent event) {final float y = event. getY (); // array subscript final int index = (int) (y/mHegiht * letters. length); final OnTouchLettersListener listener = onTouchLettersListener; final int action = event. getAction (); switch (action) {case MotionEvent. ACTION_UP: setBackgroundColor (getResources (). getColor (and Roid. r. color. transparent); invalidate (); break; default: setBackgroundColor (getResources (). getColor (R. color. gray); if (index> = 0 & index <letters. length) {if (listener! = Null) {// call back the clicked letter information to the listener user. onTouchLetters (letters [index]) ;}} invalidate (); break;} return true;} public interface OnTouchLettersListener {public void onTouchLetters (String s );} public void setOnTouchLettersListener (OnTouchLettersListener onTouchLettersListener) {this. onTouchLettersListener = onTouchLettersListener ;}

Override the dispatchTouchEvent method, first obtain the y value of each click relative to the current View, through y/mHegiht * letters. length refers to the total length of the array according to the approximate proportion of the total number of clicks in the entire control *, and the following value is calculated to get the letters in the letters array for callback. (This is an approximate value, and the error is not big)
When ACTION_UP, we set the background color of the control to transparent. In other cases, a gray value is set.

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> package com. jerry. testproject; import android. OS. bundle; import android. support. design. widget. snackbar; import android. support. v7.app. appCompatActivity; import com. jerry. testproject. view. letterSiderBar; import com. lidroid. xutils. viewUtils; import com. lidroid. xutils. view. annotation. viewInject; public class MainActivity extends AppCompatActivity implements LetterSiderBar. onTouchLettersListener {@ ViewInject (R. id. letter) private LetterSiderBar mLetterSiderBar; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); ViewUtils. inject (this); mLetterSiderBar. setOnTouchLettersListener (this);} // method for implementing callback @ Override public void onTouchLetters (String s) {Snackbar. make (mLetterSiderBar, "you selected:" + s, Snackbar. LENGTH_SHORT ). show ();}}

The view annotation method of the xUtils open-source component is used to initialize the control. AS well AS the use of the 22.2.0 api support package design similar to the Toast prompt control Snackbar to serve AS a prompt, AS developers only need to introduce: compile 'com. android. support: design: 22.2.0.

The following are projects:
Http://download.csdn.net/detail/abren32/8895649

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.