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

写在前边,原本想偷个懒,看看网上有没有这种现成的自定义seekbar,然后去github找,发现的确是有这种,而且还有1.5k的赞,但是呢,他的背景图是一个气泡,然而我没发现哪里可以更改气泡,去百度找相关的内容发现他们的效果都不是很好,文本老是会偏移,所以有了以下这篇文章。

1.效果如下,大家看看

Android SeekBar,动态显示进度且随SeekBar一起移动_第1张图片
ezgif.com-video-to-gif.gif

2.动态跟随的关键点

花了点时间做,其实这个东西本没有什么,主要的问题就是在于seekBar不是顶格的,存在一个空隙,这个空隙又不知道值是多少,所以这个很难计算,后来去看了资料,paddingStart = 0dp,PaddingEnd=0dp 可以使进度条填充到整个界面,但也不大符合需求,所以设定paddingStart = 15dp,既能不改变原来seekbar的效果,也可以知道这个间隙是多少。

4.代码控制文本位置

这里就是计算具体的textview位置的地方了

Android SeekBar,动态显示进度且随SeekBar一起移动_第2张图片
计算方式.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 如下:




    

        

        
    

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

你可能感兴趣的:(Android SeekBar,动态显示进度且随SeekBar一起移动)