欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-28 11:58:28
最近接了个项目其中有需要要实现此功能:seekbar需要显示最左和最右值,进度要跟随进度块移动。下面通过此图给大家展示下效果,可能比文字描述要更清晰。 其实实现起来很...

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

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

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

实现方案

这里是通过继承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, mpopupwidth, viewgroup.layoutparams.wrap_content, false);
}
}

布局很简单,就一个textview。

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#0fff"
android:gravity="center">
<textview android:id="@+id/text"
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"/>
</linearlayout>

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

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, mpopupwidth, viewgroup.layoutparams.wrap_content, 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移动的距离。这样就实现了文字的移动。最后会给出源码下载。

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

<com.canmou.cm4restaurant.tools.seekbarhint
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文件。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape >
<corners android:radius="10dip" />
<gradient
android:angle="180"
android:centercolor="#f5f5f5"
android:centery="0.2"
android:endcolor="#f5f5f5"
android:startcolor="#f5f5f5" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip >
<shape >
<corners android:radius="10dip" 
/>
<gradient
android:angle="180"
android:centercolor="#39ac69"
android:centery="0.45"
android:endcolor="#39ac69"
android:startcolor="#39ac69" />
</shape>
</clip>
</item>
</layer-list>

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

android:thumb="@drawable/bt_seekbar"

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