android选择控件主要代码,Android双向选择控件DoubleSeekBar使用详解

最新推荐文章于 2024-06-24 09:44:03 发布
最新推荐文章于 2024-06-24 09:44:03 发布
阅读量291 收藏 1
点赞数
文章标签： android选择控件主要代码

本文实例为大家分享了Android双向选择控件DoubleSeekBar的使用方法，供大家参考，具体内容如下

先看效果图

9dfd56fdab45c506a04667419aa3c8cf.png

1.DoubleSlideSeekBar

public class DoubleSlideSeekBar extends View {

/**

* 线条(进度条)的宽度

*/

private int lineWidth;

/**

* 线条(进度条)的长度

*/

private int lineLength = 400;

/**

* 字所在的高度 100$

*/

private int textHeight;

/**

* 游标 图片宽度

*/

private int imageWidth;

/**

* 游标 图片高度

*/

private int imageHeight;

/**

* 是否有刻度线

*/

private boolean hasRule;

/**

* 左边的游标是否在动

*/

private boolean isLowerMoving;

/**

* 右边的游标是否在动

*/

private boolean isUpperMoving;

/**

* 字的大小 100$

*/

private int textSize;

/**

* 字的颜色 100$

*/

private int textColor;

/**

* 两个游标内部 线(进度条)的颜色

*/

private int inColor = Color.BLUE;

/**

* 两个游标外部 线(进度条)的颜色

*/

private int outColor = Color.BLUE;

/**

* 刻度的颜色

*/

private int ruleColor = Color.BLUE;

/**

* 刻度上边的字 的颜色

*/

private int ruleTextColor = Color.BLUE;

/**

* 左边图标的图片

*/

private Bitmap bitmapLow;

/**

* 右边图标 的图片

*/

private Bitmap bitmapBig;

/**

* 左边图标所在X轴的位置

*/

private int slideLowX;

/**

* 右边图标所在X轴的位置

*/

private int slideBigX;

/**

* 图标(游标) 高度

*/

private int bitmapHeight;

/**

* 图标(游标) 宽度

*/

private int bitmapWidth;

/**

* 加一些padding 大小酌情考虑 为了我们的自定义view可以显示完整

*/

private int paddingLeft = 100;

private int paddingRight = 100;

private int paddingTop = 50;

private int paddingBottom = 10;

/**

* 线(进度条) 开始的位置

*/

private int lineStart = paddingLeft;

/**

* 线的Y轴位置

*/

private int lineY;

/**

* 线(进度条)的结束位置

*/

private int lineEnd = lineLength + paddingLeft;

/**

* 选择器的最大值

*/

private int bigValue = 100;

/**

* 选择器的最小值

*/

private int smallValue = 0;

/**

* 选择器的当前最小值

*/

private float smallRange;

/**

* 选择器的当前最大值

*/

private float bigRange;

/**

* 单位 元

*/

private String unit = " ";

/**

* 单位份数

*/

private int equal = 20;

/**

* 刻度单位 $

*/

private String ruleUnit = " ";

/**

* 刻度上边文字的size

*/

private int ruleTextSize = 20;

/**

* 刻度线的高度

*/

private int ruleLineHeight = 20;

private Paint linePaint;

private Paint bitmapPaint;

private Paint textPaint;

private Paint paintRule;

public DoubleSlideSeekBar(Context context) {

this(context, null);

}

public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DoubleSlideSeekBar, defStyleAttr, 0);

int size = typedArray.getIndexCount();

for (int i = 0; i < size; i++) {

int type = typedArray.getIndex(i);

switch (type) {

case R.styleable.DoubleSlideSeekBar_inColor:

inColor = typedArray.getColor(type, Color.BLACK);

break;

case R.styleable.DoubleSlideSeekBar_lineHeight:

lineWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 10));

break;

case R.styleable.DoubleSlideSeekBar_outColor:

outColor = typedArray.getColor(type, Color.YELLOW);

break;

case R.styleable.DoubleSlideSeekBar_textColor:

textColor = typedArray.getColor(type, Color.BLUE);

break;

case R.styleable.DoubleSlideSeekBar_textSize:

textSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(

TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

break;

case R.styleable.DoubleSlideSeekBar_imageLow:

bitmapLow = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));

break;

case R.styleable.DoubleSlideSeekBar_imageBig:

bitmapBig = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));

break;

case R.styleable.DoubleSlideSeekBar_imageheight:

imageHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 20));

break;

case R.styleable.DoubleSlideSeekBar_imagewidth:

imageWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 20));

break;

case R.styleable.DoubleSlideSeekBar_hasRule:

hasRule = typedArray.getBoolean(type, false);

break;

case R.styleable.DoubleSlideSeekBar_ruleColor:

ruleColor = typedArray.getColor(type, Color.BLUE);

break;

case R.styleable.DoubleSlideSeekBar_ruleTextColor:

ruleTextColor = typedArray.getColor(type, Color.BLUE);

break;

case R.styleable.DoubleSlideSeekBar_unit:

unit = typedArray.getString(type);

break;

case R.styleable.DoubleSlideSeekBar_equal:

equal = typedArray.getInt(type, 10);

break;

case R.styleable.DoubleSlideSeekBar_ruleUnit:

ruleUnit = typedArray.getString(type);

break;

case R.styleable.DoubleSlideSeekBar_ruleTextSize:

ruleTextSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(

TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

break;

case R.styleable.DoubleSlideSeekBar_ruleLineHeight:

ruleLineHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 10));

break;

case R.styleable.DoubleSlideSeekBar_bigValue:

bigValue = typedArray.getInteger(type, 100);

break;

case R.styleable.DoubleSlideSeekBar_smallValue:

smallValue = typedArray.getInteger(type, 100);

break;

default:

break;

}

}

typedArray.recycle();

init();

}

private void init() {

/**游标的默认图*/

if (bitmapLow == null) {

bitmapLow = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);

}

if (bitmapBig == null) {

bitmapBig = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);

}

/**游标图片的真实高度 之后通过缩放比例可以把图片设置成想要的大小*/

bitmapHeight = bitmapLow.getHeight();

bitmapWidth = bitmapLow.getWidth();

// 设置想要的大小

int newWidth = imageWidth;

int newHeight = imageHeight;

// 计算缩放比例

float scaleWidth = ((float) newWidth) / bitmapWidth;

float scaleHeight = ((float) newHeight) / bitmapHeight;

Matrix matrix = new Matrix();

matrix.postScale(scaleWidth, scaleHeight);

/**缩放图片*/

bitmapLow = Bitmap.createBitmap(bitmapLow, 0, 0, bitmapWidth, bitmapHeight, matrix, true);

bitmapBig = Bitmap.createBitmap(bitmapBig, 0, 0, bitmapWidth, bitmapHeight, matrix, true);

/**重新获取游标图片的宽高*/

bitmapHeight = bitmapLow.getHeight();

bitmapWidth = bitmapLow.getWidth();

/**初始化两个游标的位置*/

slideLowX = lineStart;

slideBigX = lineEnd;

smallRange = smallValue;

bigRange = bigValue;

if (hasRule) {

//有刻度时 paddingTop 要加上(text高度)和(刻度线高度加刻度线上边文字的高度和) 之间的最大值

paddingTop = paddingTop + Math.max(textSize, ruleLineHeight + ruleTextSize);

} else {

//没有刻度时 paddingTop 加上 text的高度

paddingTop = paddingTop + textSize;

}

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int width = getMyMeasureWidth(widthMeasureSpec);

int height = getMyMeasureHeight(heightMeasureSpec);

setMeasuredDimension(width, height);

}

private int getMyMeasureHeight(int heightMeasureSpec) {

int mode = MeasureSpec.getMode(heightMeasureSpec);

int size = MeasureSpec.getSize(heightMeasureSpec);

if (mode == MeasureSpec.EXACTLY) {

// matchparent 或者 固定大小 view最小应为 paddingBottom + paddingTop + bitmapHeight + 10 否则显示不全

size = Math.max(size, paddingBottom + paddingTop + bitmapHeight + 10);

} else {

//wrap content

int height = paddingBottom + paddingTop + bitmapHeight + 10;

size = Math.min(size, height);

}

return size;

}

private int getMyMeasureWidth(int widthMeasureSpec) {

int mode = MeasureSpec.getMode(widthMeasureSpec);

int size = MeasureSpec.getSize(widthMeasureSpec);

if (mode == MeasureSpec.EXACTLY) {

size = Math.max(size, paddingLeft + paddingRight + bitmapWidth * 2);

} else {

//wrap content

int width = paddingLeft + paddingRight + bitmapWidth * 2;

size = Math.min(size, width);

}

// match parent 或者 固定大小 此时可以获取线(进度条)的长度

lineLength = size - paddingLeft - paddingRight - bitmapWidth;

//线(进度条)的结束位置

lineEnd = lineLength + paddingLeft + bitmapWidth / 2;

//线(进度条)的开始位置

lineStart = paddingLeft + bitmapWidth / 2;

//初始化 游标位置

slideBigX = lineEnd;

slideLowX = lineStart;

return size;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// Y轴 坐标

lineY = getHeight() - paddingBottom - bitmapHeight / 2;

// 字所在高度 100$

textHeight = lineY - bitmapHeight / 2 - 10;

// //是否画刻度

// if (hasRule) {

// drawRule(canvas);

// }

// if (linePaint == null) {

// linePaint = new Paint();

// }

linePaint = new Paint();

//画内部线

linePaint.setAntiAlias(true);

linePaint.setStrokeWidth(lineWidth);

linePaint.setColor(inColor);

linePaint.setStrokeCap(Paint.Cap.ROUND);

canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);

linePaint.setColor(outColor);

linePaint.setStrokeCap(Paint.Cap.ROUND);

//画 外部线

canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);

canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);

//画游标

if (bitmapPaint == null) {

bitmapPaint = new Paint();

}

canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);

canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);

//画 游标上边的字

if (textPaint == null) {

textPaint = new Paint();

}

textPaint.setColor(textColor);

textPaint.setTextSize(textSize);

textPaint.setAntiAlias(true);

canvas.drawText(String.format("%.0f" + unit, smallRange), slideLowX - bitmapWidth / 2, textHeight, textPaint);

canvas.drawText(String.format("%.0f" + unit, bigRange), slideBigX - bitmapWidth / 2, textHeight, textPaint);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

//事件机制

super.onTouchEvent(event);

float nowX = event.getX();

float nowY = event.getY();

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

//按下 在线(进度条)范围上

boolean rightY = Math.abs(nowY - lineY) < bitmapHeight / 2;

//按下 在左边游标上

boolean lowSlide = Math.abs(nowX - slideLowX) < bitmapWidth / 2;

//按下 在右边游标上

boolean bigSlide = Math.abs(nowX - slideBigX) < bitmapWidth / 2;

if (rightY && lowSlide) {

isLowerMoving = true;

} else if (rightY && bigSlide) {

isUpperMoving = true;

//点击了游标外部 的线上

} else if (nowX >= lineStart && nowX <= slideLowX - bitmapWidth / 2 && rightY) {

slideLowX = (int) nowX;

updateRange();

postInvalidate();

} else if (nowX <= lineEnd && nowX >= slideBigX + bitmapWidth / 2 && rightY) {

slideBigX = (int) nowX;

updateRange();

postInvalidate();

}

break;

case MotionEvent.ACTION_MOVE:

//左边游标是运动状态

if (isLowerMoving) {

//当前 X坐标在线上 且在右边游标的左边

if (nowX <= slideBigX - bitmapWidth && nowX >= lineStart - bitmapWidth / 2) {

slideLowX = (int) nowX;

if (slideLowX < lineStart) {

slideLowX = lineStart;

}

//更新进度

updateRange();

postInvalidate();

}

} else if (isUpperMoving) {

//当前 X坐标在线上 且在左边游标的右边

if (nowX >= slideLowX + bitmapWidth && nowX <= lineEnd + bitmapWidth / 2) {

slideBigX = (int) nowX;

if (slideBigX > lineEnd) {

slideBigX = lineEnd;

}

//更新进度

updateRange();

postInvalidate();

}

}

break;

//手指抬起

case MotionEvent.ACTION_UP:

isUpperMoving = false;

isLowerMoving = false;

break;

default:

break;

}

return true;

}

private void updateRange() {

//当前 左边游标数值

smallRange = computRange(slideLowX);

//当前 右边游标数值

bigRange = computRange(slideBigX);

//接口 实现值的传递

if (onRangeListener != null) {

onRangeListener.onRange(smallRange, bigRange);

}

}

/**

* 获取当前值

*/

private float computRange(float range) {

return (range - lineStart) * (bigValue - smallValue) / lineLength + smallValue;

}

public int dip2px(Context context, float dpValue) {

final float scale = context.getResources().getDisplayMetrics().density;

return (int) (dpValue * scale + 0.5f);

}

// /**

// * 画刻度

// */

// protected void drawRule(Canvas canvas) {

// if (paintRule == null) {

// paintRule = new Paint();

// }

// paintRule.setStrokeWidth(1);

// paintRule.setTextSize(ruleTextSize);

// paintRule.setTextAlign(Paint.Align.CENTER);

// paintRule.setAntiAlias(true);

// //遍历 equal份,画刻度

// for (int i = smallValue; i <= bigValue; i += (bigValue - smallValue) / equal) {

// float degX = lineStart + i * lineLength / (bigValue - smallValue);

// int degY = lineY - ruleLineHeight;

// paintRule.setColor(ruleColor);

// canvas.drawLine(degX, lineY, degX, degY, paintRule);

// paintRule.setColor(ruleTextColor);

// canvas.drawText(String.valueOf(i) + ruleUnit, degX, degY, paintRule);

// }

// }

/**

* 写个接口 用来传递最大最小值

*/

public interface onRangeListener {

void onRange(float low, float big);

}

private onRangeListener onRangeListener;

public void setOnRangeListener(DoubleSlideSeekBar.onRangeListener onRangeListener) {

this.onRangeListener = onRangeListener;

}

}

2.在values文件夹中创建attrs.xml

3.activity_main.XML布局

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:custom="http://schemas.android.com/apk/res-auto"

tools:context=".MainActivity"

android:orientation="vertical">

android:id="@+id/doubleslide_withrule"

android:layout_marginTop="20dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

custom:lineHeight="6dp"

custom:textSize="12sp"

custom:textColor="#0628e4"

custom:inColor="#f10a0a"

custom:outColor="#af08e2"

custom:imagewidth="20dp"

custom:imageheight="20dp"

custom:hasRule="true"

custom:ruleColor="#0e0e0e"

custom:ruleTextColor="#f74104"

custom:equal="10"

custom:ruleTextSize="8sp"

custom:ruleLineHeight="10dp"

/>

android:id="@+id/tv_min_rule"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="0"

android:layout_marginTop="10dp">

android:id="@+id/tv_max_rule"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="0"

android:layout_marginTop="10dp">

4.MainActivity

public class MainActivity extends AppCompatActivity {

private DoubleSlideSeekBar mDoubleslideWithrule;

private TextView mTvMinRule;

private TextView mTvMaxRule;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mDoubleslideWithrule = (DoubleSlideSeekBar) findViewById(R.id.doubleslide_withrule);

mTvMinRule = (TextView) findViewById(R.id.tv_min_rule);

mTvMaxRule = (TextView) findViewById(R.id.tv_max_rule);

setListener();

}

private void setListener() {

mDoubleslideWithrule.setOnRangeListener(new DoubleSlideSeekBar.onRangeListener() {

@Override

public void onRange(float low, float big) {

mTvMinRule.setText("最小值" + String.format("%.0f" , low));

mTvMaxRule.setText("最大值" + String.format("%.0f" , big));

}

});

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-08-26

不正经的知乎小号
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android双向选择控件DoubleSeekBar使用详解
09-07
主要为大家详细介绍了Android双向选择控件DoubleSeekBar的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
双向选择Seekbar
07-12
Android区间段,双向选择功能实现
探索创新：双向滑动的自定义 SeekBar —— ATDragViewDemo
最新发布
gitblog_00039的博客
06-24 322
探索创新：双向滑动的自定义 SeekBar —— ATDragViewDemo 项目地址:https://gitcode.com/GuoFeilong/ATDragViewDemo 在开发 Android 应用时，我们常常需要一些独特的 UI 元素以提升用户体验。今天，我要向你推荐一个开源项目——ATDragViewDemo，它是一个自定义的双向滑动 SeekBar，让你的筛选条件设置更直观有趣。...
Android 双向选择控件 DoubleSeekBar
weixin_42630638的博客
08-24 626
先看效果图 1.DoubleSlideSeekBar public class DoubleSlideSeekBar extends View { /** * 线条（进度条）的宽度 */ private int lineWidth; /** * 线条（进度条）的长度 */ private int lineLength = 400; /** * 字所在的高度 100$ */ private i
可双向左右拖动区间选择seekbar功能
03-16
这个是一个可以支持双向左右拖动区间选择seekbar功能，源码RangeSeekBar，RangeSeekBar实现可以双向左右拖动，区间选择seekbar，源码很简单的，而且又很方便，容易修改的。
范围选择双向Seekbar
08-03
范围选择双向Seekbar,用与价格筛选等..
Android自定义控件之日期选择控件使用详解
01-05
Android日期选择控件效果如下: 调用的代码: @OnClick(R.id.btn0) public void btn0() { final AlertDialog dialog = new AlertDialog.Builder(context).create(); dialog.show(); Window window = dialog....
Android实现滑动选择控件实例代码
08-30
总的来说，创建一个滑动选择控件需要理解Android触摸事件的处理机制，熟悉RecyclerView的使用，以及掌握如何在列表中添加自定义交互。通过实例代码和适当的优化，我们可以构建出高效且用户友好的滑动选择控件，提高...
Android滚轮选择时间控件使用详解
08-31
这篇教程主要关注的是如何在Android应用中实现美观且高效的滚轮选择器，特别是自定义滚轮选择时间控件。 首先，Android系统自带的`TimePicker`控件在视觉效果上可能无法满足所有设计需求，因此开发者经常需要自定义...
一个全新的Android自定义区间滑块控件——DoubleSlideSeekBar
事情往往烟消云散
03-17 1842
序言 最近有一个项目，正在提取需求的阶段，项目有些复杂，在这里就不多讲了，主要是在我们的Android项目中使用到了一个区间滑块控件，这让我一下字有了想法，系统是没有提供这个控件的，那我就只能自己来创造了，有了这个想法，那就要实现起来了。 思路 （好久不写，不知道怎么写文章了）有了这个想法，我们就要先有一个思路，当时我有过两个想法：1、在原有的SeekBar控件上写，也就是继承SeekBar，但是...
Android 双向拖动控件（类似 SeekBar）
OneN的博客
02-09 1225
自定义view： import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.support.v4.content.ContextCompat; import android....
双向滑动的范围选择条SeekBar
08-03
NULL 博文链接：https://gundumw100.iteye.com/blog/2001720
android 双向seekbar
01-03
android双向SeekBar滑动控件，有需要的可以看看
jquery实现 左右 双向选择器 挺好用
08-19
今天刚弄好一个双向选择器，挺好用的。 分享于此 下载即可使用。
Android双向seekbar
DylanAndroid
08-20 3103
※效果 ※用法 private void init() { sb_user = (SeekBarPressure) findViewById(R.id.sb_user); sb_user.setProgressLowInt(2); sb_user.setProgressHighInt(4); sb_user.set
Android进阶——自定义View之双向选择Seekbar
u014132820的专栏
03-31 1466
android 原生的seekbar只能单向选择滑动，当项目需要选取范围的时候，这明显是不能够满足要求的。所以就得自己实现一个双向滑动的Seekbar了，就取名为DoubleSeekBar吧。 而自定义View由是Android知识点中必须掌握的技能所以，这里就写一下自己的实现吧。着急的同学，可以直接拷贝代码直接使用。 由于布局比较简单，这里直接继承View，然后重写onLayout(),onMe...
双SeekBar联动布局
studiotang的专栏
05-05 852
DoubleSeekBar朋友要做一个效果，二个SeekBar联动，实现之后觉得挺简单的。实现方法 上面的SeekBar：只有滑块，进度背景透明 下面的SeekBar：没有滑块，进度背景正常 每当任何一个SeekBar有状态变化，都带动另一个变化 效果图 运行截图 布局文件layout_double_seekbar.xml <?xml version="1.0" encoding="utf-8"?>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值