Android自定义字母导航栏

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

先上效果图

导航栏 气泡

1.自定义view实现

public class SlideBar extends View {

    //当前手指滑动到的位置

    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;

    public RecyclerView getTiku_recycle_answer() {

        return tiku_recycle_answer;

    }

    public void setTiku_recycle_answer(RecyclerView tiku_recycle_answer) {

        this.tiku_recycle_answer = tiku_recycle_answer;

    }

    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();

    }

    @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();

                //获取触摸到字母的位置

                choosedPosition = (int) y * firstLetters.size() / getHeight();

                //上滑超过边界，显示第一个

                if (choosedPosition < 0) {

                    choosedPosition = 0;

                }

                //下滑超过边界，显示最后一个

                if (choosedPosition >= firstLetters.size()) {

                    choosedPosition = firstLetters.size() - 1;

                }

                if (listener != null) {

                    //滑动A-Z字母联动外层数据

                    listener.onTouch(firstLetters.get(choosedPosition));

                }

                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 {

        void onTouch(String firstLetter);

        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中引入，我的是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;

                Lg.d(TAG, "questionComment-->--滑动导航栏跳转到首字母：" + firstLetter);

                subJectLinearLayoutManager.scrollToPositionWithOffset(lastPosition, 0);

            }

        }

        @Override

        public void onRelease() {

            postDelayed(new Runnable() {

                @Override

                public void run() {

                    lastPosition = -1;

                    tv_first_letter.setVisibility(GONE);

                }

            }, 200);

        }

    });

}

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" />