Android进阶之SeekBar动态显示进度

本文介绍了一种在Android开发中如何在原生SeekBar基础上添加一个跟随移动显示的气泡效果的方法,使用PopupWindow和ConstraintLayout实现,改动小且不影响原始控件,提供了Kotlin和Java的示例代码。

SeekBar 在开发中并不陌生,默认的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 就是上图的小气泡,如果需要其他样式,直接去弹窗布局里面编写即可

/**
 * 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;
    
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值