Android仿微信自定义字母导航栏

自定义侧边字母导航栏，根据实际字母高度进行显示

先上效果图

                            导航栏                                                                     气泡 

 1.自定义view实现

public class SlideBar extends View {
    public static final String TAG = SlideBar.class.getSimpleName();
    //当前手指滑动到的位置
    private int choosedPosition = -1;
    //画文字的画笔
    private Paint paint;
    //单个字母的高度
    private float perTextHeight;
    //字母的字体大小
    private float letterSize;
    //字母的垂直间距
    private float letterGap;
    //字母圆形背景半径
    private float bgRadius;
    private ArrayList<String> firstLetters = new ArrayList<>();
    //绘制点击时的蓝色背景
    private Paint backgroundPaint;
    private Context context;
    private OnTouchFirstListener listener;
    private RecyclerView tiku_recycle_answer;

    public SlideBar(Context context) {
        this(context, null);
    }

    public SlideBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlideBar);
        //字母的字体大小
        letterSize = typedArray.getDimension(R.styleable.SlideBar_letter_size, DisplayUtils.sp2px(context, 10.0f));
        //每个字母的高
        perTextHeight = typedArray.getDimension(R.styleable.SlideBar_letter_height, DisplayUtils.dp2px(context, 10.0f));
        //字母垂直间距
        letterGap = typedArray.getDimension(R.styleable.SlideBar_letter_gap, DisplayUtils.dp2px(context, 6.0f));
        //字母垂直间距
        bgRadius = typedArray.getDimension(R.styleable.SlideBar_letter_bg_radius, DisplayUtils.dp2px(context, 8.0f));
        typedArray.recycle();
        init();
    }

    public void init() {
        //初始化画笔
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setTextSize(letterSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD);
        //初始化圆形背景画笔
        backgroundPaint = new Paint();
        backgroundPaint.setAntiAlias(true);
        backgroundPaint.setColor(context.getResources().getColor(R.color.color_368FFF));
    }

    //设置首字母数据源
    public void setFirstLetters(ArrayList<String> letters) {
        firstLetters.clear();
        firstLetters.addAll(letters);
        invalidate();
    }

    //传入依赖的列表，当高度大于该列表时，重新进行测量，当然你可以自己规定测量规则，不一定跟我这里一样。
    public void setTiku_recycle_answer(RecyclerView tiku_recycle_answer) {
        this.tiku_recycle_answer = tiku_recycle_answer;
    }

    //测量。注意我这里没有处理padding和margin的情况。
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);   //获取宽的模式
        int heightMode = MeasureSpec.getMode(heightMeasureSpec); //获取高的模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);   //获取宽的尺寸
        int heightSize = MeasureSpec.getSize(heightMeasureSpec); //获取高的尺寸
        int width = 0;
        int height;
        if (widthMode == MeasureSpec.EXACTLY) {
            //如果match_parent或者具体的值，直接赋值
            width = widthSize;
        } else {
            //如果其他模式，则指定一个宽度
            width = DisplayUtils.dp2px(getContext(), 20.0f);
        }
        //高度跟宽度处理方式一样
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            float textHeight = perTextHeight;
            height = (int) (getPaddingTop() + textHeight * (firstLetters.size() + 1) + letterGap * (firstLetters.size() - 1) + getPaddingBottom());
        }
        if (height > tiku_recycle_answer.getMeasuredHeight()) {
            height = tiku_recycle_answer.getMeasuredHeight();
        }
        //保存测量宽度和测量高度
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < firstLetters.size(); i++) {
            paint.setColor(i == choosedPosition ? Color.WHITE : context.getResources().getColor(R.color.color_368FFF));
            float x = (getWidth() - paint.measureText(firstLetters.get(i))) / 2;
            float y = (float) getHeight() / firstLetters.size();//每个字母的高度
            if (i == choosedPosition) {
                canvas.drawCircle((float) (getWidth() / 2), i * y + y / 2, bgRadius, backgroundPaint);
            }
            //垂直位置需要增加一个偏移量,上移两个像素，因为根据计算得到的是baseline，将字母上移，使其居中在圆内
            canvas.drawText(firstLetters.get(i), x, (perTextHeight + y) / 2 + y * i - 2, paint);
        }
    }

    //触碰事件
    //按下，松开，拖动
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            //你可以在这里设置触摸时的背景

this.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
                float y = event.getY();
                //获取触摸到字母的位置, move时会多次触发，此处只响应第一次
                int newPosition = -1;
                newPosition = (int) y * firstLetters.size() / getHeight();
                //上滑超过边界，显示第一个
                if (newPosition < 0) {
                    newPosition = 0;
                }
                //下滑超过边界，显示最后一个
                if (newPosition >= firstLetters.size()) {
                    newPosition = firstLetters.size() - 1;
                }
                float circleY = (float) getHeight() / firstLetters.size();//画圆的圆心Y值
                if (listener != null && newPosition != choosedPosition) {
                    //滑动A-Z字母联动外层数据
                    choosedPosition = newPosition;
                    Lg.d(TAG, "onTouchEvent circleY：" + (choosedPosition * circleY + circleY / 2) + ",choosedPosition:" + choosedPosition + ",total firstLetters size:" + firstLetters.size());
                    listener.onTouch(firstLetters.get(choosedPosition), choosedPosition * circleY + circleY / 2);
                }
                break;
            case MotionEvent.ACTION_UP:
               //设置松开时的背景 
this.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
                choosedPosition = -1;
                if (listener != null) {
                    //滑动A-Z字母联动外层数据
                    listener.onRelease();
                }
                break;
        }
        //重绘
        invalidate();
        return true;
    }

    //设置触摸监听器，回传选中的字母和位置，用于提示框的显示
    public void setFirstListener(OnTouchFirstListener listener) {
        this.listener = listener;
    }

    /**
     * OnTouchFirstListener 接口
     * onTouch：触摸到了那个字母
     * onRelease:up释放时中间显示的字母需要设置为GONE
     */
    public interface OnTouchFirstListener {
        /**
         * @param firstLetter 需要显示的首字母
         * @param dy          需要显示的垂直位置（圆心的垂直位置）
         */
        void onTouch(String firstLetter, float dy);

        /**
         * 松开手指时的操作，隐藏提示框
         */
        void onRelease();
    }
}

 2.自定义属性

<declare-styleable name="SlideBar">
    <attr name="letter_size" format="dimension" />
    <attr name="letter_height" format="dimension" />
    <attr name="letter_gap" format="dimension" />
    <attr name="letter_bg_radius" format="dimension" />
</declare-styleable>

3.xml布局中如何使用？

xml中引入，我的是constraintlayout，具体设置看自己的布局

<com.answer.view.SlideBar
    android:id="@+id/slideBar"
    android:layout_width="@dimen/dp_20"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/tiku_recycle_answer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guide_answer"
    app:layout_constraintTop_toTopOf="@+id/tiku_recycle_answer"
    app:letter_bg_radius="@dimen/dp_8"
    app:letter_gap="@dimen/dp_6"
    app:letter_height="@dimen/dp_10"
    app:letter_size="@dimen/sp_10" />

4.代码中如何调用？

传入首字母数据，及设置监听

     /**
     * 处理导航栏事件
     */
    private void handleSlideBarEvent() {
        List<QuesCommentSubjectiveStuBean> datas = subjectiveCommentDetailAdapter.getDatas();//获取处理后的数据，赋值给导航栏
        ArrayList<String> letters = new ArrayList<>();
        for (QuesCommentSubjectiveStuBean stuBean : datas) {
            if (letters.contains(stuBean.getFirstLetter())) {
                continue;
            }
            letters.add(stuBean.getFirstLetter());
        }
        slideBar.setFirstLetters(letters);
        slideBar.setTiku_recycle_answer(tiku_recycle_answer);
        slideBar.setFirstListener(new SlideBar.OnTouchFirstListener() {
            @Override
            public void onTouch(String firstLetter, float dy) {
                tv_first_letter.setVisibility(VISIBLE);
                tv_first_letter.setText(firstLetter);
                ConstraintLayout.LayoutParams layoutParams = (ConstraintLayout.LayoutParams) tv_first_letter.getLayoutParams();
                //如果是第一个字母，修改提示框显示位置
                layoutParams.topMargin = (int) dy + slideBar.getTop() - tv_first_letter.getMeasuredHeight() / 2;
                //异常情况，点击最后一个字符，提示框显示不全的场景,如果显示位置超过屏幕，则靠底部显示
                if ((int) dy + slideBar.getTop() + tv_first_letter.getMeasuredHeight() / 2 > tiku_recycle_answer.getBottom()) {
                    layoutParams.topMargin = tiku_recycle_answer.getBottom() - tv_first_letter.getMeasuredHeight();
                }
                tv_first_letter.setLayoutParams(layoutParams);

                //滑动后移动到对应的位置,找到第一个匹配到首字母的学生，位移到此处
                int newPosition = -1;
                for (QuesCommentSubjectiveStuBean stuBean : datas) {
                    if (firstLetter.equals(stuBean.getFirstLetter())) {
                        newPosition = datas.indexOf(stuBean);
                        break;
                    }
                }
                //move时会多次触发，此处只响应第一次
                if (newPosition != lastPosition) {
                    lastPosition = newPosition;
                    subJectLinearLayoutManager.scrollToPositionWithOffset(lastPosition, 0);
                }
            }

            @Override
            public void onRelease() {
                postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        lastPosition = -1;
                        tv_first_letter.setVisibility(GONE);
                    }
                }, 100);
            }
        });
    }

5.一个小问题。

用于放大显示选中字母的TextView在布局中，请设置为invisible，这样在加载xml布局时，会对这个控件进行测量和布局，只是不显示，这样我们才能获得tv_first_letter.getMeasuredHeight()，如果设置为gone，不会进行测量，获取的高度就为0，这样在第一次显示的时候就会有一个显示位置跳动的异常。设置为invisible就可以解决这个问题，目的就是让系统测量一下TextView的宽高，不想这么搞的话，在第4步之前手动测量一次也是可以的。

<TextView
    android:id="@+id/tv_first_letter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/dp_2"
    android:background="@mipmap/ic_bubble"
    android:fontFamily="sans-serif"
    android:gravity="center"
    android:text="C"
    android:textColor="@color/color_ffffff"
    android:textSize="@dimen/sp_18"
    android:visibility="invisible"
    app:layout_constraintEnd_toStartOf="@+id/guide_answer"
    app:layout_constraintTop_toTopOf="parent" />