今天分享一個以前實現的通訊錄字母導航控件，下面自定義一個類似通訊錄的字母導航 View，可以知道需要自定義的幾個要素，如繪製字母指示器、繪製文字、觸摸監聽、坐標計算等，自定義完成之後能夠達到的功能如下：
- 完成列表數據與字母之間的相互聯動；
- 支持佈局文件屬性配置；
- 在佈局文件中能夠配置相關屬性，如字母顏色、字母字體大小、字母指示器顏色等屬性；
主要內容如下：
- 自定義屬性
- Measure 測量
- 坐標計算
- 繪製
- 顯示效果
自定義屬性#
在 value 下面創建 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>
然後在相應的構造方法中獲取這些屬性並進行相關屬性的設置，具體如下：
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);
//默認設置
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 測量#
要想精確的控制自定義的尺寸以及坐標，必須要測量出當前自定義 View 的寬高，然後才可以通過測量到的尺寸計算相關坐標，具體測量過程就是繼承 View 重寫 omMeasure () 方法完成測量，關鍵代碼如下：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//獲取寬高的尺寸大小
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//wrap_content默認寬高
@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; //界面調整
mItemHeight = averageItemHeight + mOffset;
}
坐標計算#
自定義 View 實際上就是在 View 上找到合適的位置，將自定義的元素有序的繪製出來即可，繪製過程最困難的就是如何根據具體需求計算合適的左邊，至於繪製都是 API 的調用，只要坐標位置計算好了，自定義 View 繪製這一塊應該就沒有問題了，下面的圖示主要是標註了字母指示器繪製的中心位置坐標的計算以及文字繪製的起點位置計算，繪製過程中要保證文字在指示器中心位置，參考如下：
繪製#
自定義 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 的基本繪製結束了，現在使用自定義的 View 界面能夠顯示出來了，只是還沒有添加相關的事件操作，下面將在 View 的觸摸事件裡實現相關邏輯。
Touch 事件處理#
為了判斷手指當前所在位置對應的是哪一個字母，需要獲取當前觸摸的坐標位置來計算字母索引，重新 onTouchEvent () 方法，監聽 MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE 來計算索引位置，監聽 MotionEvent.ACTION_UP 將獲得結果回調出去，具體參考如下：
@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 的自定義關鍵部分基本完成。
數據組裝#
字母導航的基本思路是將某個需要與字母匹配的字段轉換為對應的字母，然後按照該字段對數據進行排序，最終使得通過某個數據字段的首字母就可以批匹配到相同首字母的數據了，這裡將漢字轉化為拼音使用的是 pinyin4j-2.5.0.jar ，然後對數據項按照首字母進行排序將數據展示到出來即可，漢字裝換為拼音如下：
//漢字轉換為拼音
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();
}
至於數據排序使用 Comparator 接口即可，這裡就不在贅述了，具體獲取文末源碼鏈接查看。
顯示效果#
顯示效果如下：
