专栏首页NanBox自定义侧边快速索引栏

自定义侧边快速索引栏

介绍

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

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

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

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

思路

大致的实现过程如下:

  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 也可以快速定位修改。 妥妥的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 优雅地修改 TabLayout 指示线 Indicator 的宽度

    在工作中,经常会碰到把标签栏指示线的宽度,做的和文字宽度一样,甚至比文字宽度还要短的设计。使用 TabLayout 我们可以快速实现一个 Material De...

    NanBox
  • Android 折叠屏适配攻略

    随着三星 Galaxy Fold 和 华为 Mate X 的发布,折叠屏手机开始进入大家的视线。在改变手机体验的同时,也给我们开发人员在适配方面带来了更多的挑战...

    NanBox
  • 给 RecyclerView 加上折叠的效果

    RecyclerView 有很高的自由度,可以说只有想不到没有做不到,真是越用越喜欢。这次用超简单的方法,让 RecyclerView 带上折叠的效果。

    NanBox
  • 解决:无法获取实体类com.xxx.xx.xx.xx.dto.XxxDTO对应的表名

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    微风-- 轻许--
  • “特效药”老树开新花,艾滋病和甲流药物是新冠肺炎的救命稻草吗?

    ? 来源:《潜望》  作者:刘鹏 2月4日,农历立春。因新型冠状病毒而起的疫情紧迫形势下,来自中国工程院院士、国家卫健委高级别专家组成员李兰娟团队的实验结果,...

    腾讯大讲堂
  • Linux文本处理命令

    章鱼喵
  • python--控制台版2048

    游戏规则也很通俗移动,四个方向移动,相同就相加,不同就搁置,然后把最终刷到2048则游戏结束。

    sjw1998
  • RNN原理

    现在考虑这样一个问题,给一句话,如何判断这句话的情感是积极的(Positive)还是消极的(Negative)

    mathor
  • 针对Java开发人员的十大基本Eclipse插件

    毫无疑问,Eclipse是Java开发中最受欢迎的IDE之一,而使Eclipse如此出色的原因全归功于插件。有数百个Eclipse插件可用于执行各种任务并与其他...

    用户6543014
  • Memcached 简单利用和简单了解(Mac的安装和使用)

    Memcached 是一种用于分布式应用的一种缓存机制。应用也比较广泛。这里来学习一下。 首先Memcached 是分布式网站架构都需要用到的缓存机制。缓存就是...

    ShenduCC

扫码关注云+社区

领取腾讯云代金券