写在前边，原本想偷个懒，看看网上有没有这种现成的自定义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>

好了效果实现了，这种实现方式算是比较简单了。