自定义侧边字母导航栏，根据实际字母高度进行显示
先上效果图
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" />
