Android雙向選擇控件DoubleSeekBar使用詳解
本文實(shí)例為大家分享了Android雙向選擇控件DoubleSeekBar的使用方法,供大家參考,具體內(nèi)容如下
先看效果圖
1.DoubleSlideSeekBar
public class DoubleSlideSeekBar extends View { /** * 線條(進(jìn)度條)的寬度 */ private int lineWidth; /** * 線條(進(jìn)度條)的長(zhǎng)度 */ private int lineLength = 400; /** * 字所在的高度 100$ */ private int textHeight; /** * 游標(biāo) 圖片寬度 */ private int imageWidth; /** * 游標(biāo) 圖片高度 */ private int imageHeight; /** * 是否有刻度線 */ private boolean hasRule; /** * 左邊的游標(biāo)是否在動(dòng) */ private boolean isLowerMoving; /** * 右邊的游標(biāo)是否在動(dòng) */ private boolean isUpperMoving; /** * 字的大小 100$ */ private int textSize; /** * 字的顏色 100$ */ private int textColor; /** * 兩個(gè)游標(biāo)內(nèi)部 線(進(jìn)度條)的顏色 */ private int inColor = Color.BLUE; /** * 兩個(gè)游標(biāo)外部 線(進(jìn)度條)的顏色 */ private int outColor = Color.BLUE; /** * 刻度的顏色 */ private int ruleColor = Color.BLUE; /** * 刻度上邊的字 的顏色 */ private int ruleTextColor = Color.BLUE; /** * 左邊圖標(biāo)的圖片 */ private Bitmap bitmapLow; /** * 右邊圖標(biāo) 的圖片 */ private Bitmap bitmapBig; /** * 左邊圖標(biāo)所在X軸的位置 */ private int slideLowX; /** * 右邊圖標(biāo)所在X軸的位置 */ private int slideBigX; /** * 圖標(biāo)(游標(biāo)) 高度 */ private int bitmapHeight; /** * 圖標(biāo)(游標(biāo)) 寬度 */ private int bitmapWidth; /** * 加一些padding 大小酌情考慮 為了我們的自定義view可以顯示完整 */ private int paddingLeft = 100; private int paddingRight = 100; private int paddingTop = 50; private int paddingBottom = 10; /** * 線(進(jìn)度條) 開始的位置 */ private int lineStart = paddingLeft; /** * 線的Y軸位置 */ private int lineY; /** * 線(進(jìn)度條)的結(jié)束位置 */ private int lineEnd = lineLength + paddingLeft; /** * 選擇器的最大值 */ private int bigValue = 100; /** * 選擇器的最小值 */ private int smallValue = 0; /** * 選擇器的當(dāng)前最小值 */ private float smallRange; /** * 選擇器的當(dāng)前最大值 */ private float bigRange; /** * 單位 元 */ private String unit = " "; /** * 單位份數(shù) */ 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() { /**游標(biāo)的默認(rèn)圖*/ if (bitmapLow == null) { bitmapLow = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher); } if (bitmapBig == null) { bitmapBig = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher); } /**游標(biāo)圖片的真實(shí)高度 之后通過(guò)縮放比例可以把圖片設(shè)置成想要的大小*/ bitmapHeight = bitmapLow.getHeight(); bitmapWidth = bitmapLow.getWidth(); // 設(shè)置想要的大小 int newWidth = imageWidth; int newHeight = imageHeight; // 計(jì)算縮放比例 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); /**重新獲取游標(biāo)圖片的寬高*/ bitmapHeight = bitmapLow.getHeight(); bitmapWidth = bitmapLow.getWidth(); /**初始化兩個(gè)游標(biāo)的位置*/ slideLowX = lineStart; slideBigX = lineEnd; smallRange = smallValue; bigRange = bigValue; if (hasRule) { //有刻度時(shí) paddingTop 要加上(text高度)和(刻度線高度加刻度線上邊文字的高度和) 之間的最大值 paddingTop = paddingTop + Math.max(textSize, ruleLineHeight + ruleTextSize); } else { //沒(méi)有刻度時(shí) 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最小應(yīng)為 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 或者 固定大小 此時(shí)可以獲取線(進(jìn)度條)的長(zhǎng)度 lineLength = size - paddingLeft - paddingRight - bitmapWidth; //線(進(jìn)度條)的結(jié)束位置 lineEnd = lineLength + paddingLeft + bitmapWidth / 2; //線(進(jìn)度條)的開始位置 lineStart = paddingLeft + bitmapWidth / 2; //初始化 游標(biāo)位置 slideBigX = lineEnd; slideLowX = lineStart; return size; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Y軸 坐標(biāo) lineY = getHeight() - paddingBottom - bitmapHeight / 2; // 字所在高度 100$ textHeight = lineY - bitmapHeight / 2 - 10; // //是否畫刻度 // if (hasRule) { // drawRule(canvas); // } // if (linePaint == null) { // linePaint = new Paint(); // } linePaint = new Paint(); //畫內(nèi)部線 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); //畫游標(biāo) 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); //畫 游標(biāo)上邊的字 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) { //事件機(jī)制 super.onTouchEvent(event); float nowX = event.getX(); float nowY = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //按下 在線(進(jìn)度條)范圍上 boolean rightY = Math.abs(nowY - lineY) < bitmapHeight / 2; //按下 在左邊游標(biāo)上 boolean lowSlide = Math.abs(nowX - slideLowX) < bitmapWidth / 2; //按下 在右邊游標(biāo)上 boolean bigSlide = Math.abs(nowX - slideBigX) < bitmapWidth / 2; if (rightY && lowSlide) { isLowerMoving = true; } else if (rightY && bigSlide) { isUpperMoving = true; //點(diǎn)擊了游標(biāo)外部 的線上 } 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: //左邊游標(biāo)是運(yùn)動(dòng)狀態(tài) if (isLowerMoving) { //當(dāng)前 X坐標(biāo)在線上 且在右邊游標(biāo)的左邊 if (nowX <= slideBigX - bitmapWidth && nowX >= lineStart - bitmapWidth / 2) { slideLowX = (int) nowX; if (slideLowX < lineStart) { slideLowX = lineStart; } //更新進(jìn)度 updateRange(); postInvalidate(); } } else if (isUpperMoving) { //當(dāng)前 X坐標(biāo)在線上 且在左邊游標(biāo)的右邊 if (nowX >= slideLowX + bitmapWidth && nowX <= lineEnd + bitmapWidth / 2) { slideBigX = (int) nowX; if (slideBigX > lineEnd) { slideBigX = lineEnd; } //更新進(jìn)度 updateRange(); postInvalidate(); } } break; //手指抬起 case MotionEvent.ACTION_UP: isUpperMoving = false; isLowerMoving = false; break; default: break; } return true; } private void updateRange() { //當(dāng)前 左邊游標(biāo)數(shù)值 smallRange = computRange(slideLowX); //當(dāng)前 右邊游標(biāo)數(shù)值 bigRange = computRange(slideBigX); //接口 實(shí)現(xiàn)值的傳遞 if (onRangeListener != null) { onRangeListener.onRange(smallRange, bigRange); } } /** * 獲取當(dāng)前值 */ 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); // } // } /** * 寫個(gè)接口 用來(lái)傳遞最大最小值 */ public interface onRangeListener { void onRange(float low, float big); } private onRangeListener onRangeListener; public void setOnRangeListener(DoubleSlideSeekBar.onRangeListener onRangeListener) { this.onRangeListener = onRangeListener; } }
2.在values文件夾中創(chuàng)建attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <!--線(進(jìn)度條)寬度--> <attr name="lineHeight" format="dimension" /> <!--字的大小 100元--> <attr name="textSize" format="dimension" /> <!--字的顏色 100元--> <attr name="textColor" format="color" /> <!--兩個(gè)游標(biāo)內(nèi)部 線(進(jìn)度條)的顏色--> <attr name="inColor" format="color" /> <!--兩個(gè)游標(biāo)外部 線(進(jìn)度條)的顏色--> <attr name="outColor" format="color" /> <!--左邊圖標(biāo)的圖片--> <attr name="imageLow" format="reference"/> <!--右邊圖標(biāo) 的圖片--> <attr name="imageBig" format="reference"/> <!--游標(biāo) 圖片寬度--> <attr name="imagewidth" format="dimension" /> <!--游標(biāo) 圖片高度--> <attr name="imageheight" format="dimension" /> <!--是否有刻度線--> <attr name="hasRule" format="boolean" /> <!--刻度的顏色--> <attr name="ruleColor" format="color" /> <!--刻度上邊的字 的顏色--> <attr name="ruleTextColor" format="color" /> <!--單位 元--> <attr name="unit" format="string"/> <!--單位份數(shù)--> <attr name="equal" format="integer"/> <!--刻度單位 $--> <attr name="ruleUnit" format="string"/> <!--刻度上邊文字的size--> <attr name="ruleTextSize" format="dimension" /> <!--刻度線的高度--> <attr name="ruleLineHeight" format="dimension" /> <!--選擇器的最大值--> <attr name="bigValue" format="integer"/> <!--選擇器的最小值--> <attr name="smallValue" format="integer"/> <declare-styleable name="DoubleSlideSeekBar"> <attr name="lineHeight" /> <attr name="textSize" /> <attr name="textColor" /> <attr name="inColor" /> <attr name="outColor" /> <attr name="imageLow"/> <attr name="imageBig"/> <attr name="imagewidth" /> <attr name="imageheight" /> <attr name="hasRule" /> <attr name="ruleColor" /> <attr name="ruleTextColor" /> <attr name="unit" /> <attr name="equal" /> <attr name="ruleUnit" /> <attr name="ruleTextSize" /> <attr name="ruleLineHeight" /> <attr name="bigValue" /> <attr name="smallValue" /> </declare-styleable> </resources>
3.activity_main.XML布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 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"> <com.XXX.XXX.DoubleSlideSeekBar 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" /> <TextView android:id="@+id/tv_min_rule" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0" android:layout_marginTop="10dp"></TextView> <TextView android:id="@+id/tv_max_rule" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0" android:layout_marginTop="10dp"></TextView> </LinearLayout>
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)); } }); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android消息機(jī)制Handler的工作過(guò)程詳解
這篇文章主要為大家詳細(xì)介紹了Android消息機(jī)制Handler的工作過(guò)程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例
本篇文章主要介紹了Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07Android 2.3.7.r1 camera錄像過(guò)程中按menu菜單鍵時(shí)會(huì)停止錄像
android GB版本的camera錄像過(guò)程中按“菜單”鍵會(huì)停止錄像,改成錄像時(shí)按menu鍵不做處理,具體修改方法如下,感興趣的朋友可以參考下哈2013-06-06android實(shí)現(xiàn)直播點(diǎn)贊飄心動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)直播點(diǎn)贊飄心動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03Android函數(shù)抽取殼的實(shí)現(xiàn)代碼
很早之前就想寫這類的殼,最近終于把它做出來(lái)了,取名為dpt,下面把代碼分享出來(lái),對(duì)Android函數(shù)抽取殼的實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2022-01-01