android seekbar自动动,Android SeekBar,动态显示进度且随SeekBar一起移动

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

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"

>

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"

>

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"

/>

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" />

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