Android可雙向滑動的範圍選擇器(雙向滑動可選擇範圍的SeekBar)實現
一、概述
之前公司app裡面有個功能是一個可以雙向滑動的範圍選擇器,我在網上百度過一些實現方法,感覺各有利弊吧,但是都不太適合我們的需求。所以站在巨人的肩膀上,通過自定義View實現了一個可以適用於絕大多數情況的範圍選擇器來供大家使用。首先,看效果圖:
我對該範圍選擇器的屬性進行了一些封裝,例如我們可以自由控制我們的範圍選擇器是否顯示刻度、刻度的長度、我們選擇器上每個值的單位、最大值最小值、遊標(即那個圓形圖片)的樣式、大小、選擇器內部範圍顏色以及外部顏色等等很多屬性。更多玩法還請下載我的Demo體驗,專案地址在文末。
二、實現
2.1 首先看我們自定義View的全部程式碼
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.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.2 實現流程
- 程式碼的註解很詳細,下面我們來進一步分析此自定義view的實現步驟。首先,我們要自定義一些屬性,在res/values資料夾下建立檔案attrs,內容如下:
<resources>
<!--線(進度條)寬度-->
<attr name="lineHeight" format="dimension" />
<!--字的大小 100元-->
<attr name="textSize" format="dimension" />
<!--字的顏色 100元-->
<attr name="textColor" format="color" />
<!--兩個遊標內部 線(進度條)的顏色-->
<attr name="inColor" format="color" />
<!--兩個遊標外部 線(進度條)的顏色-->
<attr name="outColor" format="color" />
<!--左邊圖示的圖片-->
<attr name="imageLow" format="reference"/>
<!--右邊圖示 的圖片-->
<attr name="imageBig" format="reference"/>
<!--遊標 圖片寬度-->
<attr name="imagewidth" format="dimension" />
<!--遊標 圖片高度-->
<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"/>
<!--單位份數-->
<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>
我們要先確定我們要控制的屬性。綜合下來,我們需要控制進度條的寬度(高)、顏色、遊標上邊字的大小、刻度上邊字的大小、顏色、是否有遊標等等功能,所有屬性及說明如下(可以酌情定製):
xml屬性 | 值 | 解釋 |
---|---|---|
lineHeight | dimension | 控制我們線(進度條)的寬(高)度(例20dp) |
textSize | dimension | 遊標上邊字的大小(例16sp) |
textColor | color | 遊標上邊字的顏色 (例#e40627) |
inColor | color | 兩個遊標之間進度條的顏色 (例#e40627) |
outColor | color | 兩個遊標外部(遊標到進度條兩端)進度條的顏色 (例#e40627) |
imageLow | reference | 左邊遊標的圖片 (例@mipmap/imgv_slide) |
imageBig | reference | 右邊遊標的圖片 (例@mipmap/imgv_slide) |
imagewidth | dimension | 遊標圖片的寬度 (例20dp) |
imagewidth | dimension | 遊標圖片的高度 (例20dp) |
hasRule | boolean | 是否有刻度線(例 true or false) |
ruleColor | color | 刻度線的顏色 (例#e40627) |
ruleTextColor | color | 刻度線上邊的字的顏色 (例#e40627) |
unit | string | 單位 (例 元) |
equal | integer | 單位份數,把全部資料分成equal份(例smallValue是0,bigValue是100,equal是10,則每個刻度大小為(100-0)/10 =10) |
ruleUnit | string | 刻度上邊文字的單位 (例 $) |
ruleTextSize | dimension | 刻度上邊文字的大小 (例20sp) |
ruleLineHeight | dimension | 刻度線高度(例16dp) |
bigValue | integer | 選擇器的最大值 (例 100) |
smallValue | integer | 選擇器的最小值 (例 0) |
- 之後在自定義View裡面獲取我們定義的屬性:
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();
由於我們要使用的是三個引數的構造器,所以對應一參二參的構造器進行如下設定:
public DoubleSlideSeekBar(Context context) {
this(context, null);
}
public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
- 初始化
/**遊標圖片的真實高度 之後通過縮放比例可以把圖片設定成想要的大小*/
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;
}
通過Matrix對bitmap進行縮放,將遊標設定成我們想要的大小。初始化兩個遊標在雙向選擇器的兩頭,一般都是在最大值和最小值處的,若有特殊需求也可更改slideLowX
和slideBigX
進行設定。由於我們在計算自定義view的高度時,需要把刻度以及刻度上邊文字的高度算進去,所以有刻度時 paddingTop 要加上(text高度)和(刻度線高度加刻度線上邊文字的高度和) 之間的最大值,沒有刻度時 paddingTop 加上 text的高度。
- 計算寬高
計算View的高度:
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);
}
當mode == MeasureSpec.EXACTLY
時,我們在佈局檔案中已經固定了view的高度,但是view最小應為 paddingBottom + paddingTop + bitmapHeight + 10 否則顯示不全。當沒有固定大小時,一般是wrap content,那麼它的高度應為 paddingBottom + paddingTop + bitmapHeight + 10(+10只是為了能讓view所佔的空間大一些而已,沒有特殊意義,可以不加)。
計算View的寬度:
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;
與計算高度同理,但此時,我們需要確定線(進度條)的長度,起始點。
- onDraw 繪製進度條
畫兩個遊標之間的線:
linePaint.setAntiAlias(true);
linePaint.setStrokeWidth(lineWidth);
linePaint.setColor(inColor);
linePaint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);
此線從(slideLowX,lineY)
到(slideBigX,lineY)
,其中slideLowX
,slideBigY
已經在計算寬度時賦值。lineY = getHeight() - paddingBottom - bitmapHeight / 2
,即整個View的高度減paddingBottom再減bitmapHeight / 2(遊標圖的1/2高度),如果遊標高度比線寬小的話,則lineY = getHeight() - paddingBottom - lineWidth / 2
,不過這種需求應該很少。
畫兩個遊標到兩端的線:
linePaint.setColor(outColor);
linePaint.setStrokeCap(Paint.Cap.ROUND);
//畫 外部線
canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);
canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);
linePaint.setStrokeCap(Paint.Cap.ROUND)
可以畫出帶圓角的線。之後要畫兩條線,一條是從線的起點到左邊遊標的中心。另一條是從右邊遊標的中心到線的終點。
畫遊標:
canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
即左邊遊標左部為slideLowX - bitmapWidth / 2
,頂端在lineY - bitmapHeight / 2
。右邊遊標同理。
畫遊標上邊的字:
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);
字的位置控制在遊標的正上方。有其他需求可以在此處調整。
畫刻度線:
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);
}
我們已經傳過來equal的值,即把所有資料分成equal份,每一份畫一個刻度。並在刻度上方寫上數字。如果有特殊需求,比如有的刻度線長有的刻度線短,則需要加個判斷,根據判斷的結果drawLine
,不同的結果設定不同的高度。
- 事件監聽
我們需要判斷我們觸控式螢幕幕時是否點選在遊標上,是左邊遊標還是右邊遊標。此時則需要我們對點選事件的監聽。判斷點選位置的方法:
float nowX = event.getX();
float nowY = event.getY();
//按下 在遊標範圍上
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();