Android自定義字母導航欄

效果

實現邏輯

明確需求
字母導航欄在實際開發中還是比較多見的，城市選擇、名稱選擇等等可能需要到。現在要做到的就是在滑動控件過程中可以有內容以及下標的回調，方便處理其他邏輯！
整理思路
1、確定控件的尺寸，防止內容顯示不全。相關的邏輯在onMeasure()方法中處理；
2、繪製顯示的內容，在按下和擡起不同狀態下文字、背景的顏色。相關邏輯在onDraw()方法中；
3、滑動事件的處理以及事件回調。相關邏輯在onTouchEvent()方法中；
動手實現
在需求明確、思路清晰的情況下就要開始動手實現（需要了解自定義View的一些基礎API）。核心代碼就onDraw()中。在代碼中有思路和註釋，可以結合代碼一起看看。如果有疑惑、優化、錯誤的地方請在評論區提出，共同進步！

完整代碼

/**
 * 自定義字母導航欄
 * 
 * 總的來說就四步
 * 1、測量控件尺寸{@link #onMeasure(int, int)}
 * 2、繪製顯示內容（背景以及字符）{@link #onDraw(Canvas)}
 * 3、處理滑動事件{@link #onTouchEvent(MotionEvent)}
 * 4、暴露接口{@link #setOnNavigationScrollerListener(OnNavigationScrollerListener)}
 *
 * @attr customTextColorDefault  //導航欄默認文字顏色
 * @attr customTextColorDown  //導航欄按下文字顏色
 * @attr customBackgroundColorDown  //導航欄按下背景顏色
 * @attr customLetterDivHeight  //導航欄內容高度間隔
 * @attr customTextSize  //導航欄文字尺寸
 * @attr customBackgroundAngle //導航欄背景角度
 */
public class CustomLetterNavigationView extends View {
    private static final String TAG = "CustomLetterNavigation";
    //導航內容
    private String[] mNavigationContent;
    //導航欄內容間隔
    private float mContentDiv;
    //導航欄文字大小
    private float mContentTextSize;
    //導航欄文字顏色
    private int mContentTextColor;
    //導航欄按下時背景顏色
    private int mBackgroundColor;
    //導航欄按下時圓角度數
    private int mBackGroundAngle = 0;
    //導航欄按下時文字顏色
    private int mDownContentTextColor;
    private TextPaint mTextPaint;
    private Paint mPaintBackgrount;
    private boolean mEventActionState = false;
    private String mCurrentLetter = "";
    private OnNavigationScrollerListener mOnNavigationScrollerListener;
    private  final RectF mRectF = new RectF();
    public CustomLetterNavigationView(Context context) {
        this(context, null);
    }

    public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultData();//初始化默認數據
        initAttrs(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        /**
         * <P>
         *     這裏我們分爲兩步
         *
         *     1、繪製背景
         *        這裏簡單，直接調用Canvas的drawRoundRect()方法直接繪製
         *     2、繪製顯示文本
         *        繪製文字首先要定位，定位每個字符的座標
         *        X軸簡單，寬度的一半
         *        Y軸座標通過每個字符的高heightShould乘以已繪製字符的數目
         * </P>
         */
        int mViewWidth = getWidth();
        //繪製背景
        mRectF.set(0, 0, mViewWidth, getHeight());
        if (mEventActionState) {
            mTextPaint.setColor(mDownContentTextColor);
            mPaintBackgrount.setColor(mBackgroundColor);
            canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
        } else {
            mTextPaint.setColor(mContentTextColor);
            mPaintBackgrount.setColor(Color.TRANSPARENT);
            Drawable mBackground = getBackground();
            if (mBackground instanceof ColorDrawable) {
                mPaintBackgrount.setColor(((ColorDrawable) mBackground).getColor());
            }
            canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
        }
        //繪製文本
        float textX = mViewWidth / 2;
        //X軸座標
        int contentLenght = getContentLength();
        //Y軸座標（這裏在測量的時候多加入了兩個間隔高度要減去，同時還有Padding值）
        float heightShould = (getHeight() - mContentDiv * 2 - getPaddingTop() - getPaddingBottom()) / contentLenght;
        for (int i = 0; i < contentLenght; i++) {
            //計算Y軸的座標
            float startY = ((i + 1) * heightShould) + getPaddingTop();
            //繪製文字
            canvas.drawText(mNavigationContent[i], textX, startY, mTextPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /**
         * 這裏主要處理手指滑動事件
         */
        float mEventY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //手指按下的時候，修改Enent狀態、重繪背景、觸發回調
                mEventActionState = true;
                invalidate();
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onDown();
                }
                scrollCount(mEventY);
                break;
            case MotionEvent.ACTION_MOVE:
                scrollCount(mEventY);
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                //手指離開的時候，修改Enent狀態、重繪背景、觸發回調
                mEventActionState = false;
                invalidate();
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onUp();
                }
                break;
        }
        return true;
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * <p>
         *     這裏做了簡單的適應，其目的就是爲了能夠正常的顯示我們的內容
         *
         *     不管設置的是真實尺寸或者是包裹內容，都會以內容的最小尺寸爲
         *     基礎，如果設置的控件尺寸大於我們內容的最小尺寸，就使用控件
         *     尺寸，反之使用內容的最小尺寸!
         * </p>
         */
        int widhtMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //獲取控件的尺寸
        int actualWidth = MeasureSpec.getSize(widthMeasureSpec);
        int actualHeight = MeasureSpec.getSize(heightMeasureSpec);
        int contentLegth = getContentLength();
        //計算一個文字的尺寸
        Rect mRect = measureTextSize();
        //內容的最小寬度
        float contentWidth = mRect.width() + mContentDiv * 2;
        //內容的最小高度
        float contentHeight = mRect.height() * contentLegth + mContentDiv * (contentLegth + 3);
        if (MeasureSpec.AT_MOST == widhtMode) {
            //寬度包裹內容
            actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
        } else if (MeasureSpec.EXACTLY == widhtMode) {
            //寬度限制
            if (actualWidth < contentWidth) {
                actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
            }
        }
        if (MeasureSpec.AT_MOST == heightMode) {
            //高度包裹內容
            actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
        } else if (MeasureSpec.EXACTLY == widhtMode) {
            //高度限制
            if (actualHeight < contentHeight) {
                actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
            }
        }
        setMeasuredDimension(actualWidth, actualHeight);
    }


    /**
     * 初始化默認數據
     */
    private void initDefaultData() {
        mNavigationContent = 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"};
        mContentDiv = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());
        mContentTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 14, getResources().getDisplayMetrics());
        mContentTextColor = Color.parseColor("#333333");
        mDownContentTextColor = Color.WHITE;
        mBackgroundColor = Color.parseColor("#d7d7d7");
        mBackGroundAngle = 0;
        //繪製文字畫筆
        mTextPaint = new TextPaint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(mContentTextSize);
        mTextPaint.setColor(mContentTextColor);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        //繪製背景畫筆
        mPaintBackgrount = new Paint();
        mPaintBackgrount.setAntiAlias(true);
        mPaintBackgrount.setStyle(Paint.Style.FILL);
    }

    /**
     * 初始化自定義屬性
     *
     * @param context
     * @param attrs
     */
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLetterNavigationView);
        mContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDefault, mContentTextColor);
        mBackgroundColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customBackgroundColorDown, mBackgroundColor);
        mDownContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDown, mDownContentTextColor);
        mContentTextSize = mTypedArray.getDimension(R.styleable.CustomLetterNavigationView_customTextSize, mContentTextSize);
        mContentDiv = mTypedArray.getFloat(R.styleable.CustomLetterNavigationView_customLetterDivHeight, mContentDiv);
        mBackGroundAngle = mTypedArray.getInt(R.styleable.CustomLetterNavigationView_customBackgroundAngle, mBackGroundAngle);
        mTypedArray.recycle();
    }


    /**
     * 獲取內容長度
     *
     * @return 內容長度
     */
    private int getContentLength() {
        if (mNavigationContent != null) {
            return mNavigationContent.length;
        }
        return 0;
    }

    /**
     * 滑動計算
     *
     * @param mEventY Y軸滑動距離
     */
    private void scrollCount(float mEventY) {
        //滑動的時候利用滑動距離和每一個字符高度進行取整，獲取到Index
        Rect mRect = measureTextSize();
        int index = (int) ((mEventY - getPaddingTop() - getPaddingBottom() - mContentDiv * 2) / (mRect.height() + mContentDiv));
        //防止越界
        if (index >= 0 && index < getContentLength()) {
            String newLetter = mNavigationContent[index];
            //防止重複觸發回調
            if (!mCurrentLetter.equals(newLetter)) {
                mCurrentLetter = newLetter;
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onScroll(mCurrentLetter, index);
                }
            }
        }
    }

    /**
     * 測量文字的尺寸
     *
     * @return 一個漢字的矩陣
     */
    public Rect measureTextSize() {
        Rect mRect = new Rect();
        if (mTextPaint != null) {
            mTextPaint.getTextBounds("田", 0, 1, mRect);
        }
        return mRect;
    }


    /**
     * 設置導航欄滑動監聽
     *
     * @param onNavigationScrollerListener
     */
    public void setOnNavigationScrollerListener(OnNavigationScrollerListener onNavigationScrollerListener) {
        this.mOnNavigationScrollerListener = onNavigationScrollerListener;
    }

    /**
     * 設置導航欄顯示內容
     *
     * @param content 需要顯示的內容
     */
    public void setNavigationContent(String content) {
        if (!TextUtils.isEmpty(content)) {
            mNavigationContent = null;
            mNavigationContent = new String[content.length()];
            for (int i = 0; i < content.length(); i++) {
                mNavigationContent[i] = String.valueOf(content.charAt(i));
            }
        }
        //需要重新測量
        requestLayout();
    }

    public interface OnNavigationScrollerListener {
        //按下
        void onDown();

        //滑動
        void onScroll(String letter, int position);

        //離開
        void onUp();

    }
}

自定義屬性

    <declare-styleable name="CustomLetterNavigationView">
        <attr name="customTextColorDefault" format="color" />
        <attr name="customTextColorDown" format="color" />
        <attr name="customBackgroundColorDown" format="color" />
        <attr name="customLetterDivHeight" format="dimension" />
        <attr name="customTextSize" format="dimension" />
        <attr name="customBackgroundAngle" format="integer" />
    </declare-styleable>

Android師哥

發佈了10 篇原創文章 · 獲贊 6 · 訪問量 3528

私信關注

Android自定義字母導航欄

效果

實現邏輯

完整代碼

vue綁定對象，綁定的值不改變的問題

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

記一些CISP-PTE題目解析

瞭解RecyclerView的分割線

Android Studio快捷鍵以及常用配置

Android自定義View實現拖動自動吸邊效果

Android開源庫收集（持續更新）

設計模式二（代理模式）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結