自定義側邊快速索引欄

NanBox發表於2017-12-13
索引

介紹

現在有通訊錄的專案基本都會用到側邊快速索引欄，網上也有不少第三方開源控制元件可以使用。但我講的這個還是稍稍有點不一樣的。

和一般索引欄不太一樣的地方：

  • 只顯示有出現的首字母
  • 出現的索引字母居中顯示
  • 程式碼相對較簡單

好吧，編不下去了，其實也沒什麼不一樣的，可以看一下效果圖。

IndexBar.gif

思路

大致的實現過程如下：

  1. 獲取要顯示的字母
  2. 獲取需要用到的寬高數值
  3. 繪製各個字母
  4. 處理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 也可以快速定位修改。
妥妥的。

原始碼地址

相關文章