Android custom View: Writing Custom listening events in observer mode and writing common vertical letter index Columns

Android custom View: Writing Custom listening events in observer mode and writing common vertical letter index Columns
Overview:

Currently, vertical index columns are still very popular, and are used by various common software such as Meituan and mobile phone address book.

Demo

Write a custom View and use the observer mode to customize click events.

Public class MySlider extends View {private int width; private int height; private float x; private float y; private float letterSize; private int index =-1; private char [] 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 ','#'}; private Paint mPaintText; private Paint mPaintTextSel; public MySlider (Context context) {super (context );} // Defines an interface as the observer public interface OnItemListener {public void onItemSelected (int index, String content);} // The object private OnItemListener listener for the observer to communicate; public void setOnItemListener (OnItemListener listener) {this. listener = listener;} public MySlider (Context context, AttributeSet attrs) {super (context, attrs); mPaintText = new Paint (); mPaintText. setColor (Color. BLACK); // place the letters in the center of mPaintText. se TTextAlign (Paint. align. CENTER); mPaintTextSel = new Paint (); mPaintTextSel. setColor (Color. RED); mPaintTextSel. setTextAlign (Paint. align. CENTER) ;}public int getIndex () {return index ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); width = getDefaultSize (getSuggestedMinimumWidth (), widthMeasureSpec); height = GetDefaultSize (getSuggestedMinimumHeight (), heightMeasureSpec); setMeasuredDimension (width, height); // setPaintText must be written here because the height value mPaintText is obtained only after onMeasure () is run. setTextSize (height/27-20); mPaintTextSel. setTextSize (height/27-20);}/*** custom Click event */@ Override public boolean onTouchEvent (MotionEvent event) {switch (event. getAction () {case MotionEvent. ACTION_MOVE: // If the break is intentionally not added here, the click event will be triggered as long as you move the letters on the screen. Case MotionEvent. ACTION_DOWN: // obtain the x and y coordinates of the touch point x = event. getX (); y = event. getY (); // obtain the clicked letter based on coordinates if (x> width-mPaintText.measureText (A) * 2) {index = (int) (y/(height/27 )); // The index value may be greater than or equal to 27, which may cause an out-of-bounds error of the letters array subscript. Therefore, make a judgment to prevent the index value from exceeding 26 if (index> = 27) {index = 26 ;} log. d (letter, letters [index] +); // call the onItemSelected () function of the listener object and input the index if (listener! = Null) {listener. onItemSelected (index, letters [index] +);} // Let the main thread re-paint invalidate (); return true;} break; default: break;} return super. onTouchEvent (event) ;}@ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); letterSize = mPaintText. measureText (A); for (int I = 0; I <27; I ++) {// determines whether the letter is clicked Based on the index value. The clicked letter is red, otherwise it is black if (index = I) {// draw down the letters in sequence canvas. drawText (letters [I] +, width-letterSize, height/27 * (I + 1), mPaintTextSel);} else {canvas. drawText (letters [I] +, width-letterSize, height/27 * (I + 1), mPaintText );}}}}

Main Activity Statement:

Public class TimerActivity extends Activity {private TextView mTextViewLetter; private MySlider mySlider; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_timer); mTextViewLetter = (TextView) findViewById (R. id. textView_letter); mySlider = (MySlider) findViewById (R. id. my_slider); mySlider. setOnItemListener (new MySlider. onItemListener () {@ Override public void onItemSelected (int index, String content) {// if you click a letter, the letter mTextViewLetter is printed. setText (content );}});}}

Activity_timer layout:

Result demonstration: