Android进阶之SeekBar动态显示进度-Toy模板网

这篇具有很好参考价值的文章主要介绍了Android进阶之SeekBar动态显示进度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

SeekBar 在开发中并不陌生,默认的SeekBar是不显示进度的,当然用吐司或者文案在旁边实时显示也是可以的,那能不能移动的时候才显示，默认不显示呢,当然网上花哨的三方类太多了，但是我只是单纯的想在SeekBar的基础上去添加一个可以跟随移动显示的气泡而已~

先看一下效果：

Android进阶之SeekBar动态显示进度,Android,android,SeekBar,SeekBar显示进度

这篇文章可能会满足你的需求
1.原生SeekBar使用，无需重写
2.改动量少，不会对控件有任何影响
3.使用灵活, Utils使用，复制粘贴即可使用
4.样式灵活，自己编写样式

先说一下原理吧：
1.首先最最基础的就是怎么样在不做到对原有控件产生影响的情况下去显示呢？
答: PopupWindow，它只需要拿到对应的目标控件即可指定显示位置
2.如何去跟随移动呢?
答:PopupWindow本身不会动态移动，只需要在该弹窗里面设置一个控件，让该控件移动即可

具体实现
拿到控件，用PopupWindow显示在该控件附近，根据SeekBar的进度，动态设置该弹窗里面子控件的位置

使用

这里是SeekBar移动监听，在这里的三个方法加上对应的方法即可

        mDataBind.controlVolumeSeekbar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                //滑块移动

                SeekBarPopUtils.move(progress,seekBar!!)
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                //滑块按下
                SeekBarPopUtils.showPop(seekBar!!)
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                //滑块松开
                SeekBarPopUtils.dismiss()
            }
        })

SeekBarPopUtils (Kotlin)

这里的 tvPopTxt 就是上图的小气泡，如果需要其他样式，直接去弹窗布局里面编写即可文章来源地址https://www.toymoban.com/news/detail-638474.html

/**
 * SeekBar移动时弹出对应的气泡加数字*/
@SuppressLint("StaticFieldLeak")
object SeekBarPopUtils {

    private var popWin: PopupWindow? = null
    private var clPopPar: ConstraintLayout? = null
    private var tvPopTxt: TextView? = null

    fun showPop(seekBar: SeekBar){
        popWin = PopupWindow()
        val mPopView = LayoutInflater.from(BaseApplication.getContext()).inflate(R.layout.item_popup_win,null,false)
        clPopPar = mPopView.findViewById<ConstraintLayout>(R.id.cl_pop_par)
        tvPopTxt = mPopView.findViewById<TextView>(R.id.tv_pop_txt)

        popWin?.contentView = mPopView
        popWin?.height = AppHelper.dp2px(30)
        popWin?.width = seekBar.width
        popWin?.showAsDropDown(seekBar,0,-(AppHelper.dp2px(30) + popWin!!.height))
    }


    fun move(progress: Int,seekBar: SeekBar){
        if (clPopPar != null){
            val tvPopWidth = AppHelper.dp2px(40)
            val params: ConstraintLayout.LayoutParams = ConstraintLayout.LayoutParams(
                tvPopWidth, AppHelper.dp2px(30)
            )
            params.startToStart = clPopPar!!.id
            params.marginStart = (seekBar.width - tvPopWidth)/100 * progress + tvPopWidth/3
            tvPopTxt?.layoutParams = params

            tvPopTxt?.text = progress.toString()
        }
    }


    fun dismiss(){
        popWin?.dismiss()
        popWin = null
        clPopPar = null
        tvPopTxt = null
    }

}

SeekBarPopUtils (Java)

public class SeekBarPopUtils {

    private static PopupWindow popWin = null;
    private static ConstraintLayout clPopPar = null;
    private static TextView tvPopTxt = null;

    public static void showPop(SeekBar seekBar){
        popWin = new PopupWindow();
        View mPopView = LayoutInflater.from(App.getInstance().getBaseContext()).inflate(R.layout.item_popup_win,null,false);
        clPopPar = mPopView.findViewById(R.id.cl_pop_par);
        tvPopTxt = mPopView.findViewById(R.id.tv_pop_txt);
        popWin.setContentView(mPopView);
        popWin.setHeight(dp2px(30));
        popWin.setWidth(seekBar.getWidth());
        popWin.showAsDropDown(seekBar,0,-(dp2px(30) + popWin.getHeight()));
    }


    public static void move(int progress,SeekBar seekBar){
        if (clPopPar != null){
            int tvPopWidth = dp2px(40);
            ConstraintLayout.LayoutParams params  = new ConstraintLayout.LayoutParams(
                    tvPopWidth, dp2px(30)
            );
            params.startToStart = clPopPar.getId();
            params.setMarginStart((seekBar.getWidth() - tvPopWidth)/100 * progress + tvPopWidth/3);
            tvPopTxt.setLayoutParams(params);

            tvPopTxt.setText(progress + "");
        }
    }

    private static int dp2px(int dpVal){
        return (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                (float) dpVal,
                App.getInstance().getBaseContext().getResources().getDisplayMetrics()
        );
    }

    public static void dismiss(){
        popWin.dismiss();
        popWin = null;
        clPopPar = null;
        tvPopTxt = null;
    }
}

item_popup_win 代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/cl_pop_par"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/tv_pop_txt"
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        android:background="@drawable/bg_ffffff_12"
        android:textSize="16sp"
        android:textColor="#000000"
        tools:text = "999"/>

</androidx.constraintlayout.widget.ConstraintLayout>

bg_ffffff_12

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="ResourceName">
    <solid android:color="#FFFFFF" />
    <corners android:radius="12dp" />
</shape>

AppHelper.dp2px

    fun dp2px(dpVal: Int): Int {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dpVal.toFloat(),
            BaseApplication.getContext().resources.displayMetrics
        ).toInt()
    }

到了这里，关于Android进阶之SeekBar动态显示进度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！