自定义侧边字母导航栏，根据实际字母高度进行显示
先上效果图
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
//绘制点击时的蓝色背景
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
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.自定义属性
3.如何使用？
xml中引入，我的是constraintlayout，具体设置看自己的布局
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" /> private void handleSlideBarEvent() { List 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步之前手动测量一次也是可以的。 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" />4.传入首字母数据，及设置监听