Android實現(xiàn)字母導(dǎo)航控件的示例代碼

更新時間：2022年01月19日 15:43:26 作者：ax2djmti

這篇文章主要介紹了通過自定義View實現(xiàn)字母導(dǎo)航控件的示例代碼，文中的實現(xiàn)過程講解詳細(xì)，對我們學(xué)習(xí)或工作有一定幫助，感興趣的可以學(xué)習(xí)一下

今天分享一個以前實現(xiàn)的通訊錄字母導(dǎo)航控件，下面自定義一個類似通訊錄的字母導(dǎo)航 View，可以知道需要自定義的幾個要素，如繪制字母指示器、繪制文字、觸摸監(jiān)聽、坐標(biāo)計算等，自定義完成之后能夠達到的功能如下：

完成列表數(shù)據(jù)與字母之間的相互聯(lián)動;
支持布局文件屬性配置;
在布局文件中能夠配置相關(guān)屬性，如字母顏色、字母字體大小、字母指示器顏色等屬性。

主要內(nèi)容如下：

自定義屬性
Measure測量
坐標(biāo)計算
繪制
顯示效果

自定義屬性

在 value 下面創(chuàng)建 attr.xml ，在里面配置需要自定義的屬性，具體如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LetterView">
        <!--字母顏色-->
        <attr name="letterTextColor" format="color" />
        <!--字母字體大小-->
        <attr name="letterTextSize" format="dimension" />
        <!--整體背景-->
        <attr name="letterTextBackgroundColor" format="color" />
        <!--是否啟用指示器-->
        <attr name="letterEnableIndicator" format="boolean" />
        <!--指示器顏色-->
        <attr name="letterIndicatorColor" format="color" />
    </declare-styleable>
</resources>

然后在相應(yīng)的構(gòu)造方法中獲取這些屬性并進行相關(guān)屬性的設(shè)置，具體如下：

public LetterView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    //獲取屬性
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LetterView);
    int letterTextColor = array.getColor(R.styleable.LetterView_letterTextColor, Color.RED);
    int letterTextBackgroundColor = array.getColor(R.styleable.LetterView_letterTextBackgroundColor, Color.WHITE);
    int letterIndicatorColor = array.getColor(R.styleable.LetterView_letterIndicatorColor, Color.parseColor("#333333"));
    float letterTextSize = array.getDimension(R.styleable.LetterView_letterTextSize, 12);
    enableIndicator = array.getBoolean(R.styleable.LetterView_letterEnableIndicator, true);

    //默認(rèn)設(shè)置
    mContext = context;
    mLetterPaint = new Paint();
    mLetterPaint.setTextSize(letterTextSize);
    mLetterPaint.setColor(letterTextColor);
    mLetterPaint.setAntiAlias(true);

    mLetterIndicatorPaint = new Paint();
    mLetterIndicatorPaint.setStyle(Paint.Style.FILL);
    mLetterIndicatorPaint.setColor(letterIndicatorColor);
    mLetterIndicatorPaint.setAntiAlias(true);

    setBackgroundColor(letterTextBackgroundColor);

    array.recycle();
}

Measure測量

要想精確的控制自定義的尺寸以及坐標(biāo)，必須要測量出當(dāng)前自定義 View 的寬高，然后才可以通過測量到的尺寸計算相關(guān)坐標(biāo)，具體測量過程就是繼承 View 重寫 omMeasure() 方法完成測量，關(guān)鍵代碼如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //獲取寬高的尺寸大小
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    //wrap_content默認(rèn)寬高
    @SuppressLint("DrawAllocation") Rect mRect = new Rect();
    mLetterPaint.getTextBounds("A", 0, 1, mRect);
    mWidth = mRect.width() + dpToPx(mContext, 12);
    int mHeight = (mRect.height() + dpToPx(mContext, 5)) * letters.length;

    if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT &&
            getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
        setMeasuredDimension(mWidth, mHeight);
    } else if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT) {
        setMeasuredDimension(mWidth, heightSize);
    } else if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
        setMeasuredDimension(widthSize, mHeight);
    }

    mWidth = getMeasuredWidth();
    int averageItemHeight = getMeasuredHeight() / 28;
    int mOffset = averageItemHeight / 30; //界面調(diào)整
    mItemHeight = averageItemHeight + mOffset;
}

坐標(biāo)計算

自定義 View 實際上就是在 View 上找到合適的位置，將自定義的元素有序的繪制出來即可，繪制過程最困難的就是如何根據(jù)具體需求計算合適的左邊，至于繪制都是 API 的調(diào)用，只要坐標(biāo)位置計算好了，自定義 View 繪制這一塊應(yīng)該就沒有問題了，下面的圖示主要是標(biāo)注了字母指示器繪制的中心位置坐標(biāo)的計算以及文字繪制的起點位置計算，繪制過程中要保證文字在指示器中心位置，參考如下：

繪制

自定義 View 的繪制操作都是在 onDraw() 方法中進行的，這里主要使用到圓的繪制以及文字的繪制，具體就是 drawCircle() 和 drawText() 方法的使用，為避免文字被遮擋，需繪制字母指示器，然后再繪制字母，代碼參考如下：

@Override
protected void onDraw(Canvas canvas) {
    //獲取字母寬高
    @SuppressLint("DrawAllocation") Rect rect = new Rect();
    mLetterPaint.getTextBounds("A", 0, 1, rect);
    int letterWidth = rect.width();
    int letterHeight = rect.height();

    //繪制指示器
    if (enableIndicator){
        for (int i = 1; i < letters.length + 1; i++) {
            if (mTouchIndex == i) {
                canvas.drawCircle(0.5f * mWidth, i * mItemHeight - 0.5f * mItemHeight, 0.5f * mItemHeight, mLetterIndicatorPaint);
            }
        }
    }
    //繪制字母
    for (int i = 1; i < letters.length + 1; i++) {
        canvas.drawText(letters[i - 1], (mWidth - letterWidth) / 2, mItemHeight * i - 0.5f * mItemHeight + letterHeight / 2, mLetterPaint);
    }
}

到此為止，可以說 View 的基本繪制結(jié)束了，現(xiàn)在使用自定義的 View 界面能夠顯示出來了，只是還沒有添加相關(guān)的事件操作，下面將在 View 的觸摸事件里實現(xiàn)相關(guān)邏輯。

Touch事件處理

為了判斷手指當(dāng)前所在位置對應(yīng)的是哪一個字母，需要獲取當(dāng)前觸摸的坐標(biāo)位置來計算字母索引，重新 onTouchEvent() 方法，監(jiān)聽 MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE 來計算索引位置，監(jiān)聽 MotionEvent.ACTION_UP 將獲得結(jié)果回調(diào)出去，具體參考如下：

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            isTouch = true;
            int y = (int) event.getY();
            Log.i("onTouchEvent","--y->" + y + "-y-dp-->" + DensityUtil.px2dp(getContext(), y));
            int index = y / mItemHeight;

            if (index != mTouchIndex && index < 28 && index > 0) {
                mTouchIndex = index;
                Log.i("onTouchEvent","--mTouchIndex->" + mTouchIndex + "--position->" + mTouchIndex);
            }

            if (mOnLetterChangeListener != null && mTouchIndex > 0) {
                mOnLetterChangeListener.onLetterListener(letters[mTouchIndex - 1]);
            }

            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            isTouch = false;
            if (mOnLetterChangeListener != null && mTouchIndex > 0) {
                mOnLetterChangeListener.onLetterDismissListener();
            }
            break;
    }
    return true;
}

到此為止，View 的自定義關(guān)鍵部分基本完成。

數(shù)據(jù)組裝

字母導(dǎo)航的基本思路是將某個需要與字母匹配的字段轉(zhuǎn)換為對應(yīng)的字母，然后按照該字段對數(shù)據(jù)進行排序，最終使得通過某個數(shù)據(jù)字段的首字母就可以批匹配到相同首字母的數(shù)據(jù)了，這里將漢字轉(zhuǎn)化為拼音使用的是 pinyin4j-2.5.0.jar ，然后對數(shù)據(jù)項按照首字母進行排序?qū)?shù)據(jù)展示到出來即可，漢字裝換為拼音如下：

//漢字轉(zhuǎn)換為拼音
public static String getChineseToPinyin(String chinese) {
    StringBuilder builder = new StringBuilder();
    HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
    format.setCaseType(HanyuPinyinCaseType.UPPERCASE);
    format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);

    char[] charArray = chinese.toCharArray();
    for (char aCharArray : charArray) {
        if (Character.isSpaceChar(aCharArray)) {
            continue;
        }
        try {
            String[] pinyinArr = PinyinHelper.toHanyuPinyinStringArray(aCharArray, format);
            if (pinyinArr != null) {
                builder.append(pinyinArr[0]);
            } else {
                builder.append(aCharArray);
            }
        } catch (BadHanyuPinyinOutputFormatCombination badHanyuPinyinOutputFormatCombination) {
            badHanyuPinyinOutputFormatCombination.printStackTrace();
            builder.append(aCharArray);
        }
    }
    return builder.toString();
}

至于數(shù)據(jù)排序使用 Comparator 接口即可