社区首页 >专栏 >自定义侧边快速索引栏

自定义侧边快速索引栏

NanBox

发布于 2019-07-09 11:12:25

64700

代码可运行

文章被收录于专栏：NanBoxNanBox

运行总次数：0

代码可运行

介绍

现在有通讯录的项目基本都会用到侧边快速索引栏，网上也有不少第三方开源控件可以使用。但我讲的这个还是稍稍有点不一样的。

和一般索引栏不太一样的地方：

只显示有出现的首字母
出现的索引字母居中显示
代码相对较简单

好吧，编不下去了，其实也没什么不一样的，可以看一下效果图。

思路

大致的实现过程如下：

获取要显示的字母
获取需要用到的宽高数值
绘制各个字母
处理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;
}
复制代码