android 拖动进度,Android 可拖动的seekbar自定义进度值

最近接了个项目其中有需要要实现此功能:seekbar需要显示最左和最右值,进度要跟随进度块移动。下面通过此图给大家展示下效果,可能比文字描述要更清晰。

85816592640eda5e45a7bb02836112d8.png

其实实现起来很简单,主要是思路。自定义控件的话也不难,之前我的博客也有专门介绍,这里就不再多说。

实现方案

这里是通过继承seekbar来自定义控件,这样的方式最快。主要难点在于进度的显示,其实我很的是最笨的方法,就是用了一个popwindow显示在进度条的上方,然后在移动滑块的时候实时的改变它显示的横坐标。看进度显示的核心代码:

private void initHintPopup(){

String popupText = null;

if (mProgressChangeListener!=null){

popupText = mProgressChangeListener.onHintTextChanged(this,cuclaProcess(leftText));

}

LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

final View undoView = inflater.inflate(R.layout.popup,null);

mPopupTextView = (TextView)undoView.findViewById(R.id.text);

mPopupTextView.setText(popupText!=null? popupText : String.valueOf(cuclaProcess(leftText)));

// mPopup.dismiss();

if(mPopup == null)

mPopup = new PopupWindow(undoView,mPopupWidth,ViewGroup.LayoutParams.WRAP_CONTENT,false);

else{

mPopup.dismiss();

mPopup = new PopupWindow(undoView,false);

}

}

布局很简单,就一个TextView。

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:background="#0fff"

android:gravity="center">

android:padding="8dp"

android:textSize="16sp"

android:singleLine="true"

android:ellipsize="end"

android:textColor="@color/green"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

左右的显示值原理也是一样的,看以下代码:

private void initRightText(){

LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

final View undoView = inflater.inflate(R.layout.rightpop,null);

mPopupRightView = (TextView)undoView.findViewById(R.id.righttext);

mPopupRightView.setText(rightText+"");

mRightPopup = new PopupWindow(undoView,false);

mRightPopup.setAnimationStyle(R.style.fade_animation);

}

那么如何让滑块上方的文字跟着滑动。只要重写onProgressChanged就可以了。

public void onProgressChanged(SeekBar seekBar,int progress,boolean b) {

String popupText = null;

if (mProgressChangeListener!=null){

popupText = mProgressChangeListener.onHintTextChanged(this,cuclaProcess(leftText));

}

if(mExternalListener !=null){

mExternalListener.onProgressChanged(seekBar,progress,b);

}

step = cuclaProcess(leftText);

mPopupTextView.setText(popupText!=null? popupText : String.valueOf(step));

if(mPopupStyle==POPUP_FOLLOW){

mPopup.update((int) (this.getX()+(int) getXPosition(seekBar)),(int) (this.getY()+2*mYLocationOffset+this.getHeight()),-1,-1);

}

}

其实最主要的就是算出x的位置getXPosition。看以上代码:

private float getXPosition(SeekBar seekBar){

float val = (((float)seekBar.getProgress() * (float)(seekBar.getWidth() - 2 * seekBar.getThumbOffset())) / seekBar.getMax());

float offset = seekBar.getThumbOffset()*2;

int textWidth = mPopupWidth;

float textCenter = (textWidth/2.0f);

float newX = val+offset - textCenter;

return newX;

}

通过getProgress获得进度来计算x移动的距离。这样就实现了文字的移动。最后会给出源码下载。

如何使用呢,跟普通自定义的控件一样,如下:

android:id="@+id/seekbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginTop="40dp"

android:progress="5"

hint:popupWidth="40dp"

hint:yOffset="10dp"

hint:popupStyle="fixed"/>

当然目前实现了原生的样式,下面来说说如何自定义seekbar的样式。

seekbar要改样式得准备三张图片,左边己选择的滑动条图片,右边未选择的滑动条图片和滑块图片,滑动条要9.png格式的最好。这里为方便,直接用layer-list来处理滑动条部分。在drawable中定义xml文件。

android:angle="180"

android:centerColor="#F5F5F5"

android:centerY="0.2"

android:endColor="#F5F5F5"

android:startColor="#F5F5F5" />

/>

android:angle="180"

android:centerColor="#39ac69"

android:centerY="0.45"

android:endColor="#39ac69"

android:startColor="#39ac69" />

这样就实现了重叠的图片。设置滑块的图片则直接在seekhint中设置:

android:thumb="@drawable/bt_seekbar"

到此进度值可拖动的seekbar就实现了。大家都看明白了,有任何疑问欢迎给编程小技巧小编留言,小编会及时给大家回复的。欲了解更多精彩内容请持续关注编程小技巧网站,谢谢!

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值