类似通讯录侧边滑动筛选的sidebar

「爱情、让人受尽委屈。」 2022-06-15 09:26 102阅读 0赞

public class SideBar extends View {
        // 触摸事件
        private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
        private Context context;
        private int choose=-1;//字体选中状态
        private Paint paint=new Paint();
        private TextView mTextDialog;
        public static String[] b={
                "Hot","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", "#"
        };
        public void setTextView(TextView mTextDialog) {
            this.mTextDialog = mTextDialog;
        }
        public SideBar(Context context) {
            super(context);
            this.context=context;
        }
    
        public SideBar(Context context, AttributeSet attrs) {
            super(context, attrs);
            this.context=context;
        }
    
        public SideBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            this.context=context;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //获取焦点改变背景颜色
            int height=getHeight(); //获取对应高度
            int width=getWidth(); //获取对应宽度
            int singleHeight=height/b.length;
    
            for (int i=0;i<b.length;i++){
    
                paint.setColor(Color.GRAY);
                paint.setTypeface(Typeface.DEFAULT_BOLD);
                paint.setAntiAlias(true);
                paint.setTextSize(DensityUtil.dip2px(context,10));
                //选中的状态
                if (i==choose){
                    paint.setColor(Color.parseColor("#3399ff"));
                    paint.setFakeBoldText(true);//字体加粗
                }
                //x坐标等于中间-字符串宽度的一半
                float xPos=width/2-paint.measureText(b[i])/2;
                float yPos=singleHeight*i+singleHeight;
                canvas.drawText(b[i],xPos,yPos,paint);
                paint.reset();
            }
        }
    //此处换成onTouchEvent也可以实现
        @Override
        public boolean dispatchTouchEvent(MotionEvent event) {
            final int action=event.getAction();
            final float y=event.getY();//点击y坐标
            final int oldchoose=choose;
            final OnTouchingLetterChangedListener listener=onTouchingLetterChangedListener;
          //点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数
            final int c=(int) (y/getHeight()*b.length);
            switch(action){
                case MotionEvent.ACTION_UP:
                    setBackgroundDrawable(new ColorDrawable(0x00000000));
                    choose=-1;
                    invalidate();//刷新布局
                    if (mTextDialog!=null){
                        mTextDialog.setVisibility(View.INVISIBLE);//图片的中间有个显示字母的textview当手指抬起时隐藏显示
                    }
                    break;
                default:setBackgroundResource(R.drawable.sidebar_background);//当手指按下或滑动时改变view的背景
                    if (oldchoose!=c){
                        if (c>0&&c<b.length){
                            if (listener!=null){
                                listener.onTouchingLetterChanged(b[c]);//将按下的字母传递出去
                                mTextDialog.setVisibility(View.VISIBLE);
                                mTextDialog.setText(b[c]);//改变图片中间的字母
                            }
                            choose = c;
                            invalidate();
                        }
                    }
            }
            return true;//消费此次事件，不再向下传递
        }
        /*
        * 向外公开的方法 接口回调的方法
        * */
        public void setOnTouchingLetterListener(OnTouchingLetterChangedListener onTouchingLetterListener){
            this.onTouchingLetterChangedListener=onTouchingLetterListener;
        }
        /*
        * 需要回调的接口
        * */
        public interface OnTouchingLetterChangedListener{
            public void onTouchingLetterChanged(String s);
        }
    }

![Center][]

[Center]: /images/20220615/6e9b387191e248baa614eff31c70f313.png