介紹
現在有通訊錄的專案基本都會用到側邊快速索引欄，網上也有不少第三方開源控制元件可以使用。但我講的這個還是稍稍有點不一樣的。
和一般索引欄不太一樣的地方：
- 只顯示有出現的首字母
- 出現的索引字母居中顯示
- 程式碼相對較簡單
好吧，編不下去了，其實也沒什麼不一樣的，可以看一下效果圖。
思路
大致的實現過程如下：
- 獲取要顯示的字母
- 獲取需要用到的寬高數值
- 繪製各個字母
- 處理Touch事件
還是挺簡單的，稍稍有點難度的地方應該在計算。
程式碼
自定義控制元件的實現方法有很多，這裡我是用繼承 View 來實現的，下面看看具體怎麼實現。
獲取要顯示的字母
通過set方法獲取到要顯示的字母集合後,重繪控制元件：
public void setIndexs(String[] indexs) {
this.indexs = indexs;
invalidate();
}
複製程式碼獲取需要用到的寬高數值
繪製側邊欄的時候,我們需要用到以下幾個引數來計算字母所在的座標：
- 控制元件的總寬度 mWidth
- 每個字母可以分配到的高度 mCellHeight
- 第一個字母和控制元件頂部的距離 mMarginTop (用於居中顯示)
- 每個字母本身的寬高
當控制元件的的寬高發生變化時，會執行 onSizeChanged 這個方法，在首次初始化時也會呼叫，所以前三個引數我們可以在這裡獲取到。
這裡考慮最多會出現 27 個字元，如果首字母是數字或者特殊字元，我們用「#」表示。
mMarginTop 可能要理解一下，第一個字母距離控制元件頂部的距離，是控制元件總高度減去所有字母的總高度的一半，應該不是很難理解：
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
mCellHeight = (mHeight * 1f / 27); //26個字母加上“#”
mMarginTop = (mHeight - mCellHeight * indexs.length) / 2;
}
複製程式碼但要說明一下的是，載入控制元件是需要時間的（處理過 SwipeRefreshLayout 一進去就要轉圈的應該理解）。也就是說 onSizeChanged 可能在 setIndexs 之前執行，也可能在它之後執行。這就可能會導致獲取不到 mMarginTop，所以我們在 setIndexs 裡也加上 mMarginTop = (mHeight - mCellHeight * indexs.length) / 2 這句程式碼，保證可以拿到這個引數。
至於字母的寬高，不同字母的寬高其實都不一樣的，我們可以通過以下方法獲取到：
public float getTextWidth(String text) {
Rect bounds = new Rect();
mPaint.getTextBounds(text, 0, text.length(), bounds);
return bounds.width();
}
public float getTextHeight(String text) {
Rect bounds = new Rect();
mPaint.getTextBounds(text, 0, text.length(), bounds);
return bounds.height();
}
複製程式碼繪製各個字母
通過上面獲取到的引數，我們可以計算出每個字母的座標。
簡單說明一下，使用 drawText 繪製時使用x座標是字母最左邊的座標，而 y 座標是指字母 baseline 的座標。我們可以簡單理解為是字母左下角的座標。
x 座標
為了讓字母在控制元件裡左右居中顯示，x 座標就是控制元件總寬度的一半減去字母寬度的一半：
float x = mWidth / 2 - getTextWidth(letter) / 2;
複製程式碼y 座標
y 座標的計算可能要理解一下。首先和寬度類似，讓字母在它佔有的空間裡面上下居中，也就是字母佔有高度的一半加上字母高度的一半。然後要加上它前面所有字母的高度，及首字母距離頂部的距離：
float y = mCellHeight / 2 + getTextHeight(letter) / 2 + mCellHeight * i + mMarginTop;
複製程式碼所以 onDraw 的程式碼可以這樣寫：
@Override
protected void onDraw(Canvas canvas) {
if (indexs.length <= 0) {
return;
}
for (int i = 0; i < indexs.length; i++) {
String letter = indexs[i];
float x = mWidth / 2 - getTextWidth(letter) / 2;
float y = mCellHeight / 2 + getTextHeight(letter) / 2 + mCellHeight * i + mMarginTop;
canvas.drawText(letter, x, y, mPaint);
}
}
複製程式碼處理 Touch 事件
這個控制元件的點選和滑動事件做了相同的操作，通過計算當前按下字母的下標來獲取到該字母，顯示吐司，並且通過回撥函式讓列表定位。當手指抬起時，把吐司隱藏就好了。
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 按下
case MotionEvent.ACTION_MOVE: // 滑動
// 按下字母的下標
int letterIndex = (int) ((event.getY() - mMarginTop) / mCellHeight);
// 判斷是否越界
if (letterIndex >= 0 && letterIndex < indexs.length) {
// 顯示按下的字母
if (textView != null) {
textView.setVisibility(View.VISIBLE);
textView.setText(indexs[letterIndex]);
}
//通過回撥方法通知列表定位
if (mOnIndexChangedListener != null) {
mOnIndexChangedListener.onIndexChanged(indexs[letterIndex]);
}
}
break;
case MotionEvent.ACTION_UP: // 提起
if (textView != null) {
textView.setVisibility(View.GONE);
}
break;
}
return true;
}
複製程式碼到這裡，自定義控制元件就算完成啦。接下來看看它是如何使用的。
使用
現在佈局裡面使用我們的自定義控制元件，我是這樣寫的：
<com.southernbox.indexbar.widget.IndexBar
android:id="@+id/indexbar"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true" />
複製程式碼然後就是設定索引字母陣列，設定要吐司的 TextView，設定回撥方法。在 RecyclerView 中，我們可以使用 LayoutManager 來定位。
mIndexBar.setIndexs(letters);
mIndexBar.setSelectedIndexTextView(tvToast);
mIndexBar.setOnIndexChangedListener(new IndexBar.OnIndexChangedListener() {
@Override
public void onIndexChanged(String index) {
for (int i = 0; i < mList.size(); i++) {
String firstword = mList.get(i).getFirstword();
if (index.equals(firstword)) {
// 滾動列表到指定的位置
layoutManager.scrollToPositionWithOffset(i, 0);
return;
}
}
}
});
複製程式碼最後，我們需要寫一個方法用來排序，插入索引item，順便把要顯示的索引字母陣列獲取到。在 item 的實體類裡面，我用 isIndex 這個欄位來區分是索引 item，還是普通 item。可以參考一下我的排序方法：
public Map<String, Object> convertSortList(List<Entity> list) {
HashMap<String, List<Entity>> map = new HashMap<>();
for (Entity item : list) {
String firstWord;
if (TextUtils.isEmpty(item.getFirstWord())) {
firstWord = "#";
} else {
firstWord = item.getFirstWord().toUpperCase();
}
if (map.containsKey(firstWord)) {
map.get(firstWord).add(item);
} else {
List<Entity> mList = new ArrayList<>();
mList.add(item);
map.put(firstWord, mList);
}
}
Object[] keys = map.keySet().toArray();
Arrays.sort(keys);
List<Entity> sortList = new ArrayList<>();
for (Object key : keys) {
Entity t = getIndexItem(key.toString());
sortList.add(t);
sortList.addAll(map.get(key));
}
HashMap<String, Object> resultMap = new HashMap();
resultMap.put("sortList", sortList);
resultMap.put("keys", keys);
return resultMap;
}
複製程式碼還有一點要說明一下的是，一般情況下側邊索引欄的「#」是放在最後一個的，但是用 Arrays.sort 排序的話會把它放在第一個，要放最後一個的話還要再做一個轉換，這裡就不再贅述了。
結語
這個控制元件還是比較簡單的，這也是一個比較適合用來入門的控制元件，可能要理解一下的地方在計算方面。
個人覺得，如果一個控制元件不是太複雜的話，最好是自己實現，或者至少要看明白原始碼。這樣一方面可以修改控制元件適合自己的專案使用，一方面出現了 bug 也可以快速定位修改。
妥妥的。