Android 可拖动的seekbar自定义进度值
作者:showCar 发布时间:2023-12-28 12:37:24
标签:android,seekbar,进度
最近接了个项目其中有需要要实现此功能: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就实现了。大家都看明白了,有任何疑问欢迎给脚本之家小编留言,小编会及时给大家回复的。欲了解更多精彩内容请持续关注脚本之家网站,谢谢!
0
投稿
猜你喜欢
- SpeSqliteManager4Android改动日志2023.2.14 完成SQLiteOpenHelper 2023.2.23 完成r
- 最近开发的时候,偶尔遇到在线上稳定运行的webview内嵌的h5页面加载不出来,一直定位不到具体原因(因为我们自己做的兼容性测试上不重现),
- ElGamal数字签名,供大家参考,具体内容如下一、实验目的学习ElGamal算法在数字签名方面的使用,掌握教科书版本的ElGamal数字签
- 本文实例讲述了Android在JNI中使用ByteBuffer的方法。分享给大家供大家参考。具体如下:一、ByteBuffer 定义在NIO
- 最近有个需求是这样的,人民币的符号“¥”因为安卓手机系统的不一致导致符号不是完全一样,所以用美工的给的图片代替,考虑到用的地
- 实例如下:func exitApplication() { let app = UIApplication.sh
- 1 . pom.xml添加相关依赖<parent> <groupId>org.spring
- 锁是个非常有用的工具,运用场景非常多,因为它使用起来非常简单,而且易于理解。但同时它也会带来一些困扰,那就是可能会引起死锁,一旦产生死锁,就
- 前言sql注入是web开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息、利用数据库的特性执行添加用户、导出文件等一系列恶意操作,甚
- 1. 查找系统中坏味道的异常处理代码在上篇文章杂谈异常处理try-catch-finally中主要详细介绍了C#异常处理的概念,
- 前言:List 去重指的是将 List 中的重复元素删除掉的过程。此题目考察的是对 List 迭代器、Set 集合和 JDK 8 中新特性的
- 最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习。我说一下这个效果的核心原理。下面是效果图: 首先是布局,
- 在工作中,如果需要跟XML打交道,难免会遇到需要把一个类型集合转换成XML格式的情况。之前的方法比较笨拙,需要给不同的类型,各自写一个转换的
- 简介Android Studio升级到3.0后,有不少的改动和新特性,先贴出官方的迁移说明。本文会持续收集与总结本人在使用Android S
- 一、CORS概述跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明那些来源可以通过浏览器访问该服务器上的各类资源(包括CSS、图片
- 我们知道在编程时许多操作(如更新UI)需要在主线程中完成,而且,耗时操作(如网络连接)需要放在子线程中,否则会引起ANR。所以我们常使用Ha
- 前言在foreach中删除元素时,每一次删除都会导致集合的大小和元素索引值发生变化,从而导致在foreach中删除元素时会抛出异常。集合已修
- “反射”其实就是利用程序集的元数据信息。 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间。1、假设你要
- #region 监视文件夹的变化
- 前言Groovy 是一种基于 JVM 的动态语言,与 Java 语言紧密集成,可以很方便地在 Java 项目中使用。Groovy 有着简洁的