写在前边，原本想偷个懒，看看网上有没有这种现成的自定义seekbar,然后去github找，发现的确是有这种，而且还有1.5k的赞，但是呢，他的背景图是一个气泡，然而我没发现哪里可以更改气泡，去百度找相关的内容发现他们的效果都不是很好，文本老是会偏移，所以有了以下这篇文章。
1.效果如下，大家看看
ezgif.com-video-to-gif.gif
2.动态跟随的关键点
花了点时间做，其实这个东西本没有什么，主要的问题就是在于seekBar不是顶格的，存在一个空隙，这个空隙又不知道值是多少，所以这个很难计算，后来去看了资料，paddingStart = 0dp,PaddingEnd=0dp 可以使进度条填充到整个界面，但也不大符合需求，所以设定paddingStart = 15dp,既能不改变原来seekbar的效果，也可以知道这个间隙是多少。
4.代码控制文本位置
这里就是计算具体的textview位置的地方了
计算方式.png
//文本
final TextView textView = findViewById(R.id.seek_text);
//seekbar
SeekBar seekBar = findViewById(R.id.seekBar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
//进度是从-50~50的,但是seekbar.getmin()有限制,所以这里用0~100 -50;
int text = progress -50;
//设置文本显示
textView.setText(String.valueOf(text));
//获取文本宽度
float textWidth = textView.getWidth();
//获取seekbar最左端的x位置
float left = seekBar.getLeft();
//进度条的刻度值
float max =Math.abs(seekBar.getMax());
//这不叫thumb的宽度,叫seekbar距左边宽度,实验了一下，seekbar 不是顶格的，两头都存在一定空间，所以xml 需要用paddingStart 和 paddingEnd 来确定具体空了多少值,我这里设置15dp;
float thumb = dip2px(MainActivity.this,15);
//每移动1个单位，text应该变化的距离 = (seekBar的宽度 - 两头空的空间) / 总的progress长度
float average = (((float) seekBar.getWidth())-2*thumb)/max;
//int to float
float currentProgress = progress;
//textview 应该所处的位置 = seekbar最左端 + seekbar左端空的空间 + 当前progress应该加的长度 - textview宽度的一半(保持居中作用)
float pox = left - textWidth/2 +thumb + average * currentProgress;
textView.setX(pox);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
public int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
3.绘制界面
textview的文本是固定宽度的，动态的太难控制了，不是这种简单的操作能够搞定的。
seekbar的宽度就随意了，注意设置下paddingStart 和 paddingEnd。
xml 如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/parentLayout"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="56dp"
android:layout_marginRight="56dp"
android:id="@+id/seekLayout"
android:layout_marginTop="5dp"
android:orientation="vertical"
>
<TextView
android:layout_width="25dp"
android:layout_height="wrap_content"
android:id="@+id/seek_text"
android:textColor="@color/colorAccent"
android:text="0"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:paddingBottom="5dp"
/>
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:maxHeight="2dp"
android:max="100"
android:progress="50"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
好了效果实现了，这种实现方式算是比较简单了。
