Android自定義字母選擇側邊欄
本文實例為大傢分享瞭Android自定義字母選擇側邊欄的具體代碼,供大傢參考,具體內容如下
LetterSideBar.java
package com.zb.customview.widgets; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.text.TextUtils; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import androidx.annotation.Nullable; import com.zb.customview.R; public class LetterSideBar extends View { private Paint mPaint; private int color, selectedColor; private float textSize, spacing; private String mChoosing = "Z"; private OnLetterSelectedListener listener; private int width, height; private String[] LETTERS = new String[] {"#", "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"}; public interface OnLetterSelectedListener { //空表示取消選中 void onSelected(String letter); } public void setOnLetterSelectedListener(OnLetterSelectedListener listener) { this.listener = listener; } public LetterSideBar(Context context) { this(context, null); } public LetterSideBar(Context context, @Nullable AttributeSet attrs) { super(context, attrs); if(null != attrs) { TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LetterSideBar); color = ta.getColor(R.styleable.LetterSideBar_LetterSideBar_textColor, Color.BLACK); selectedColor = ta.getColor(R.styleable.LetterSideBar_LetterSideBar_textSelectedColor, Color.RED); textSize = ta.getDimensionPixelSize(R.styleable.LetterSideBar_LetterSideBar_textSize, sp2px(12)); spacing = ta.getDimensionPixelSize(R.styleable.LetterSideBar_LetterSideBar_spacing, dp2px(5)); ta.recycle(); } init(); } private void init() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(color); mPaint.setTextSize(textSize); } @Override protected void onDraw(Canvas canvas) { drawText(canvas); drawSelectedText(canvas, mChoosing); } private void drawText(Canvas canvas) { mPaint.setColor(color); for (int i=0; i<LETTERS.length; i++) { drawLetterAt(canvas, i, LETTERS[i]); } } private void drawSelectedText(Canvas canvas, String selected) { if(TextUtils.isEmpty(selected)) return; mPaint.setColor(selectedColor); int position = -1; for(int i=0; i<LETTERS.length; i++) { if(selected.equals(LETTERS[i])) { position = i; break; } } if(position < 0 || position >= LETTERS.length) return; drawLetterAt(canvas, position, selected); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: float x = event.getX(); float y = event.getY(); if(isTouchInsideView(x, y)) { //觸摸在控件內 int position = caculatePosition(y); if(position >= 0 && position < LETTERS.length) { //合規位置 String letter = LETTERS[position]; if(!letter.equals(mChoosing)) { //與選中的不符 去刷新控件 mChoosing = letter; performListener(mChoosing); invalidate(); } } else { //不合規位置 if(null != mChoosing) { mChoosing = null; performListener(mChoosing); invalidate(); } } } else if(null != mChoosing) { //點擊事件不在view內部 mChoosing = null; performListener(mChoosing); invalidate();//觸摸在view之外 取消選中 } return true; default: if(mChoosing != null) { mChoosing = null; performListener(mChoosing); invalidate(); } break; } return super.onTouchEvent(event); } private void performListener(String letter) { if(null != listener) listener.onSelected(letter); } private boolean isTouchInsideView(float x, float y) { //左右可以適當判斷在控件內 if(x >= 0 && x <= width && y >= getPaddingTop() && y < height) return true; return false; } /** * 計算觸摸的位置 * @param y * @return */ private int caculatePosition(float y) { float heightWithOutPadding = height - getPaddingTop() - getPaddingBottom(); float eachElementHeight = heightWithOutPadding / LETTERS.length; y -= getPaddingTop(); int position = (int) (y / eachElementHeight); return position; } private void drawLetterAt(Canvas canvas, int position, String letter) { float heightForEach = ((height * 1f - getPaddingTop() - getPaddingBottom()) - (LETTERS.length - 1) * spacing) / LETTERS.length; float spacingInUp = spacing * (position - 1); if(spacingInUp < 0) spacingInUp = 0; float currentTop = getPaddingTop() + (heightForEach * position) + spacingInUp; float currentBottom = currentTop + heightForEach; Paint.FontMetrics fmi = mPaint.getFontMetrics(); float x = (width - getPaddingLeft() - getPaddingRight() - mPaint.measureText(letter)) / 2f + getPaddingLeft(); float baseLine = (fmi.descent + Math.abs(fmi.ascent)) / 2f - fmi.descent; float y = (currentBottom + currentTop) / 2f + baseLine; canvas.drawText(letter, 0, 1, x, y, mPaint); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if(changed) { width = getWidth(); height = getHeight(); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int textWidth = (int) (getPaddingLeft() + getPaddingRight() + mPaint.measureText("A")); Rect textBounds = new Rect(); mPaint.getTextBounds("A", 0, 1, textBounds); int singleTextHeight = textBounds.height(); int totalHeight = (int) (27f * singleTextHeight + 26f * spacing) + getPaddingBottom() + getPaddingTop();//26個字母+1個# int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(widthMeasureSpec); int specWidth = MeasureSpec.getSize(widthMeasureSpec); int specHeight = MeasureSpec.getSize(widthMeasureSpec); int realWidth, realHeight; if(widthMode == MeasureSpec.EXACTLY) { realWidth = specWidth; } else { realWidth = textWidth; } if(heightMode == MeasureSpec.EXACTLY) { realHeight = specHeight; } else { realHeight = totalHeight; } setMeasuredDimension(realWidth, realHeight); } protected int dp2px(int dp) { return (int) (getContext().getResources().getDisplayMetrics().density * dp + 0.5); } protected int sp2px(int sp) { return (int) (getContext().getResources().getDisplayMetrics().scaledDensity * sp + 0.5); } }
attrs.xml
<declare-styleable name="LetterSideBar"> <attr name="LetterSideBar_textColor" format="color"/> <attr name="LetterSideBar_textSelectedColor" format="color"/> <attr name="LetterSideBar_textSize" format="dimension"/> <attr name="LetterSideBar_spacing" format="dimension"/> </declare-styleable>
layout.xml
<com.zb.customview.widgets.LetterSideBar android:id="@+id/letterSideBar" android:layout_width="wrap_content" android:layout_height="wrap_content" app:LetterSideBar_textSize="14sp" app:LetterSideBar_textColor="#FFFFFF" android:padding="10dp" app:LetterSideBar_textSelectedColor="#FF0000" app:LetterSideBar_spacing="2dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:background="#A4A4A4"/>
代碼中使用
sideBar.setOnLetterSelectedListener(new LetterSideBar.OnLetterSelectedListener() { @Override public void onSelected(String letter) { if(TextUtils.isEmpty(letter)) { P.p("取消選中"); letterTxt.setVisibility(View.GONE); } else { P.p("選中" + letter); letterTxt.setText(letter); letterTxt.setVisibility(View.VISIBLE); } } });
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Android顏色處理SweepGradient掃描及梯度渲染示例
- Android使用貝塞爾曲線畫心形
- 詳解Android如何自定義view實現圓形進度條
- Android實現漸變色水波紋效果
- Android自定義view實現圓形進度條效果