先上效果图
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 = 0i <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()
}
}
<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>
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" />
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" />
Android 从4.4开始引进透明状态栏和导航栏的概念，并且在5.0进行了改进，将透明变成了半透明的效果。虽然此特性最早出现在ios，但不否认效果还是很赞的。
至于4.4以下的手机，就不要考虑此特性了，好在4.4以下的手机份额已经非常小了。
我们先来看一下透明状态栏的实现，两种常见效果图如下：
虚拟导航栏并不是所有的手机都有，华为的手机多比较常见，就是上图屏幕底部按钮那块区域。设置导航栏和状态栏类似：
这是官方的解释，大致意思就是我们在布局的最外层设置 android:fitsSystemWindows="true"，会在屏幕最上方预留出状态栏高度的padding。
由于fitsSystemWindows属性本质上是给当前控件设置了一个padding，所以我们设置到根布局的话，会导致状态栏是透明的，并且和窗口背景一样。
但是多数情况，我们并不在根布局设置这个属性，我们想要的无外乎是让内容沉浸在状态栏之中。所以我们经常设置在最上端的图片背景、Banner之类的，如果是Toolbar的，我们可以使用一层LinearLayout包裹，并把这个属性设置给LinearLayout，这样就可以避免Toolbar的内容下沉了。如：
上述方法可以解决普通页面的透明式状态栏需求，如有复杂需求可以参考下面这些：
Android 系统状态栏沉浸式/透明化完整解决方案
Android 沉浸式状态栏的实现
Android沉浸式状态栏(透明状态栏)最佳实现
还有开源库推荐： ImmersionBar
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）