Android快速索引条控件QuickIndexBar

Android快速索引条控件

效果展示

代码实现

自定义view,画出静态的图形

在canvas上指定好位置,用各种画笔Paint,重要的是分析的过程。
    private Paint paint;
    private int cellWidth, cellHeight;

    private void init() {
        paint = new Paint();
        paint.setTextSize(40);
        paint.setColor(Color.WHITE);
        paint.setTypeface(Typeface.DEFAULT_BOLD);
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (cellHeight == 0) cellHeight = getMeasuredHeight() / indexs.length;
    if (cellWidth == 0) cellWidth = getMeasuredWidth();

    //分别画26个字母
    for (int i = 0; i < indexs.length; i++) {

        //先测量用此画笔画字母的大小,用一个矩形把它包裹起来,这样方便计算字母的高度
        Rect bounds = new Rect();
        paint.getTextBounds(indexs[i], 0, indexs[i].length(), bounds);

        //计算画每个字母的起始坐标
        float x = cellWidth / 2 - paint.measureText(indexs[i]) / 2;
        float y = cellHeight / 2 + bounds.height() / 2 + i * cellHeight;
        canvas.drawText(indexs[i], x, y, paint);
    }

    }

实现onTouch事件,完成动态效果

    private int lastIndex = -1;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
//        if (x >= 0 && x <= cellWidth) {  //只对quickindexbar的触摸事件有效
//            return false;
//        }
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                if (isSameIndex(y / cellHeight)) break;


                String word = indexs[((int) (y / cellHeight))];
                lastIndex = y / cellHeight;
                if (mIndexChangedListener != null) {
                    mIndexChangedListener.indexChanged(word);
                }

                break;
            case MotionEvent.ACTION_UP:
                lastIndex = -1;
                break;
            default:
                break;
        }

        //自行处理触摸事件,不向上传递
        return true;
    }

    /**
     * 当前的索引位置是否和上一个相等
     *
     * @return
     */
    private boolean isSameIndex(int currIndex) {
        return lastIndex == currIndex;
    }

    private IndexChangedListener mIndexChangedListener;

    public void setIndexChangedListener(IndexChangedListener indexChangedListener) {
        mIndexChangedListener = indexChangedListener;
    }

    public interface IndexChangedListener {
        void indexChanged(String word);
    }

给触摸事件添加更加人性化的交互

QuickIndexBar交互效果的实现

在处理onTouch事件时,改变画笔的设置,画出不同的图案。

在onTouch中调用
    //重新调用onDraw
    invalidate();
在onDraw中增加下面的逻辑:
画每个元素之前先设置不同的画笔。    
    if (i == lastIndex) {               //正在touch的位置 需要更加人性化的交互
    paint.setTextSize(60);
    paint.setColor(Color.GRAY);
    } else {
    paint.setTextSize(40);
    paint.setColor(Color.WHITE);
    }

中间放大框的实现

当前Activity接受到QuickIndexBar的变化事件后,调用showIndexLabel方法,通过handler完成延迟操作。
    private Handler mHandler = new Handler();

    private void showIndexLabel(String word) {
    mLabel.setVisibility(View.VISIBLE);
    mLabel.setText(word);

    mHandler.removeCallbacksAndMessages(null); //移除所有消息队列
    mHandler.postDelayed(new Runnable() {      //发送延时消息
        @Override
        public void run() {
            mLabel.setVisibility(View.GONE);
        }
    }, DEFAULT_DELAY);
    }

完整代码

github

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三好码农的三亩自留地

教你搞定Android自定义ViewGroup

我们知道ViewGroup就是View的容器类,我们经常用的LinearLayout,RelativeLayout等都是ViewGroup的子类,因为ViewG...

761
来自专栏Android自学

谷歌官方导航控件BottomNavigationBar的日常使用

7805
来自专栏李蔚蓬的专栏

6.4 Android绘图技巧(Primary:四大方法&Layer)

创建一个新的Layer到“栈”中,可以使用saveLayer(), savaLayerAlpha(), 从“栈”中推出一个Layer,可以使用restore()...

1392
来自专栏Android中高级开发

Android开发之漫漫长途 番外篇——自定义View的各种姿势1

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

1111
来自专栏郭霖

Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效

记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个朋友在评论中留言,希望我可以帮他将这个滑动菜单改成双向滑动的方式。当时也没想花太多时间,简...

4016
来自专栏Android干货园

Android 自定义上面圆角下面直角的ImageView

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

5744
来自专栏everhad

[BOT]自定义ViewPagerStripIndicator

效果图 app中下面这样的控件很常见,像默认的TabHost表现上不够灵活,下面就简单写一个可以结合ViewPager切换内容显示,提供底部“滑动条”指示所显示...

2205
来自专栏CodingBlock

Android查缺补漏(View篇)--自定义 View 的基本流程

View是Android很重要的一部分,常用的View有Button、TextView、EditView、ListView、GridView、各种layout等...

37010
来自专栏Android机动车

轻松实现右滑关闭当前Activity

常常可以看到,很多Android应用都有这么一个功能,就是滑动关闭Activity,比如微信,CSDN移动端,百度贴吧移动端等。我自己也想写个滑动关闭Activ...

841
来自专栏Android干货

安卓开发_九宫格布局

2773

扫码关注云+社区

领取腾讯云代金券