美文网首页
android 快速导航条

android 快速导航条

作者: 涛涛123759 | 来源:发表于2017-05-27 14:48 被阅读43次

    http://blog.csdn.net/qq_30379689/article/details/52684312

    链接:http://pan.baidu.com/s/1nvwYZLB 密码:wn0s

    1、首先我们封装一个QuickIndexBar 继承View:

    public class QuickIndexBar extends View {
    
        private Paint mPaint;
        private float mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 14, getResources().getDisplayMetrics());
        private static final String[] LETTERS = new String[]{
            "↑", "☆", "A", "B", "C", "D", "E", "F", "G", "H",
            "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
            "S", "T", "U", "V", "W", "X", "Y", "Z", "#"
        };
        private int mCellWidth;
        private float mCellHeight;
        private int mTouchIndex = -1;//用于记录当前触摸的索引值
    
        //暴露一个字母的监听
        public interface OnLetterUpdateListener {
            void onLetterUpdate(String letter);
    
            void onLetterCancel();
        }
    
        private OnLetterUpdateListener mListener;
    
        public OnLetterUpdateListener getOnLetterUpdateListener() {
            return mListener;
        }
    
        public void setOnLetterUpdateListener(OnLetterUpdateListener listener) {
            mListener = listener;
        }
    
        public QuickIndexBar(Context context) {
            this(context, null);
        }
    
        public QuickIndexBar(Context context, @Nullable AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public QuickIndexBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setColor(getResources().getColor(R.color.side_bar));
            mPaint.setTextSize(mTextSize);
            //setBackgroundColor(Color.WHITE);
            //mPaint.setTypeface(Typeface.DEFAULT_BOLD);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
    
            //获取单元格的宽度和高度
            mCellWidth = getMeasuredWidth();
            mCellHeight = getMeasuredHeight() * 1.0f / LETTERS.length;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            setBackgroundColor(Color.TRANSPARENT);
    
            for (int i = 0; i < LETTERS.length; i++) {
                String text = LETTERS[i];
                //计算坐标
                //x坐标为单元格宽度的一半 减去 文字宽度的一半
                int x = (int) (mCellWidth / 2.0f - mPaint.measureText(text) / 2.0f);
    
                Rect bounds = new Rect();
                mPaint.getTextBounds(text, 0, text.length(), bounds);
                //文本的高度
                int textHeight = bounds.height();
    
                //y坐标为单元格高度的一半 + 文字高度的一半 + 上面有多少个单元格的高度(index * mCellHeight)
                int y = (int) (mCellHeight / 2.0f + textHeight / 2.0f + i * mCellHeight);
    
                //mPaint.setColor(mTouchIndex == i ? Color.GRAY : Color.WHITE);//被选择到的字母变成灰色
                //绘制文本A-Z,此处的x,y坐标是字母左上方的坐标
                canvas.drawText(text, x, y, mPaint);
            }
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            int index = -1;
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    index = (int) (event.getY() / mCellHeight);//   y值/每个单元格的高度 = 当前单元格的索引
                    if (index >= 0 && index < LETTERS.length) {
                        if (index != mTouchIndex) {
                            if (mListener != null) {
                                mListener.onLetterUpdate(LETTERS[index]);
                                mTouchIndex = index;
                            }
                        }
                    }
                    setBackgroundColor(getResources().getColor(R.color.side_bar_pressed));
                    break;
                case MotionEvent.ACTION_MOVE:
                    index = (int) (event.getY() / mCellHeight);
                    if (index >= 0 && index < LETTERS.length) {
                        if (index != mTouchIndex) {
                            if (mListener != null) {
                                mListener.onLetterUpdate(LETTERS[index]);
                                mTouchIndex = index;
                            }
                        }
                    }
                    setBackgroundColor(getResources().getColor(R.color.side_bar_pressed));
                    break;
                case MotionEvent.ACTION_UP:
                    mTouchIndex = -1;
                    if (mListener != null) {
                        mListener.onLetterCancel();
                    }
                    setBackgroundColor(Color.TRANSPARENT);
                    break;
            }
    //        invalidate();//重新调用onDraw方法实现选中的字母更改颜色
            return true;
        }
    }
    

    2、在colors.xml中添加

    <!--遮盖层颜色-->
    <color name="mask">#32000000</color>
    
    <!--快速索引bar颜色-->
    <color name="side_bar">#919091</color>
    <color name="side_bar_pressed">#BFBFBF</color>
    

    3、在layout加入试图

         <!--快速导航条-->
        <com.lqr.wechat.widget.QuickIndexBar
            android:id="@+id/qib"
            android:layout_width="40px"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_below="@id/llTop" />
    

    4、在类中调用

    mQib.setOnLetterUpdateListener(new QuickIndexBar.OnLetterUpdateListener() {
                @Override
                public void onLetterUpdate(String letter) {
                    //滑动到第一个对应字母开头的联系人
                    if ("↑".equalsIgnoreCase(letter)) {
                       //跳转到首行
                    } else if ("☆".equalsIgnoreCase(letter)) {
                        //跳转到首行
                    } else {
                        //跳转到指定的行
                    }
                }
    
                @Override
                public void onLetterCancel() {
                    //隐藏对话框
                    hideLetter();
                }
            });

    相关文章

      网友评论

          本文标题:android 快速导航条

          本文链接:https://www.haomeiwen.com/subject/gxjqfxtx.html