網(wǎng)站首頁 編程語言 正文
目標(biāo):雙向拖動的自定義View
國際慣例先預(yù)覽后實現(xiàn)
我們要實現(xiàn)的就是一個段位樣式的拖動條,用來做篩選條件用的,細心的朋友可能會發(fā)現(xiàn)微信設(shè)置里面有個一個通用字體的設(shè)置,拖動然后改變字體大小;
這個相對比微信那個的自定義view算是一個擴展,因為我們是雙向滑動,這個多考慮的一點就是手指拖動的是哪一個滑動塊!
我們先看下GIF預(yù)覽,然后我們今天就一步步實現(xiàn)這個小玩意…
實現(xiàn)步驟
- 自定義屬性的抽取
- view尺寸的計算
- 相關(guān)內(nèi)容的繪制(文字,原點,背景進度條,當(dāng)前進度條等等)
- 處理滑動事件
大體思路分四部分;我們一步步來;簡單的就一部帶過了
自定義屬性獲取
public ATDragView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ATDragView, defStyleAttr, R.style.def_dragview);
int indexCount = typedArray.getIndexCount();
for (int i = 0; i < indexCount; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.ATDragView_seek_bg_color:
seekBgColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ATDragView_seek_pb_color:
seekPbColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ATDragView_seek_ball_solid_color:
seekBallSolidColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ATDragView_seek_ball_stroke_color:
seekBallStrokeColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ATDragView_seek_text_color:
seekTextColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ATDragView_seek_text_size:
seekTextSize = typedArray.getDimensionPixelSize(attr, 0);
break;
}
}
typedArray.recycle();
init();
}
拿到我們設(shè)置的屬性后,初始化我們需要的工具,比如畫筆,等
private void init() {
currentMovingType = BallType.LEFT;
seekTextPaint = creatPaint(seekTextColor, seekTextSize, Paint.Style.FILL, 0);
seekBgPaint = creatPaint(seekBgColor, 0, Paint.Style.FILL, 0);
seekBallPaint = creatPaint(seekBallSolidColor, 0, Paint.Style.FILL, 0);
seekPbPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0);
seekBallEndPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0);
seekBallStrokePaint = creatPaint(seekBallStrokeColor, 0, Paint.Style.FILL, 0);
seekBallStrokePaint.setShadowLayer(5, 2, 2, seekBallStrokeColor);
}
確定自定義view尺寸
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureHeight;
if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) {
measureHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_HEIGHT, getContext().getResources().getDisplayMetrics());
heightMeasureSpec = MeasureSpec.makeMeasureSpec(measureHeight, MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
繪制相關(guān)的內(nèi)容部分
這里我們分析效果圖發(fā)現(xiàn),需要繪制五部分,兩個圓,兩個進度條一個 一堆文字,我們根據(jù)計算出來的view尺寸以及UI給的比例,即可繪制出來他們這個就是canvas的API使用
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawTexts(canvas);
drawSeekBG(canvas);
drawSeekPB(canvas);
drawLeftCircle(canvas);
drawRightCircle(canvas);
}
具體的文字繪制,是根據(jù)外界傳入的數(shù)據(jù)來繪制的所以細節(jié)如下
private void drawTexts(Canvas canvas) {
if (null == data) return;
int size = data.size();
int unitWidth = getUnitWidth(size - 1);
for (int i = 0; i < size; i++) {
String tempDesc = data.get(i);
float measureTextWidth = seekPbPaint.measureText(tempDesc);
canvas.drawText(tempDesc, DEF_PADDING + unitWidth * i - measureTextWidth / 2, seekTextY, seekTextPaint);
}
}
這個View的核心部分不是繪制,而是計算,描述下我們具體的確定位置的思路
- 根據(jù)外界傳入的數(shù)據(jù)集合平均分view的寬度,求得平均一份的寬度大小
- 然后循環(huán)數(shù)據(jù)集合根據(jù)平均一份的寬度,確定沒個文字所在的坐標(biāo)值
然后我們看下計算的代碼;
// 計算單位寬度,view寬度-內(nèi)容的左右邊距以及圓球的半徑,自己體會下為什么
private int getUnitWidth(int count) {
return (viewWidth - 2 * DEF_PADDING - 2 * seekBallRadio) / count;
}
這個方法可以說是最重要的一個了,
//根據(jù)當(dāng)前手指觸摸的x坐標(biāo)計算,手指離開屏幕以后,應(yīng)該停留到哪個位置,比如滑動到400到500之間但是不到600,我們不能讓他停留在半路上,讓他自動找回他停留的左邊,也就是GIF中的小小回彈效果
private int getCurrentSeekX(int upX) {
if (null == data) {
return 0;
}
int unitWidth = getUnitWidth(data.size() - 1);
return unitWidth * (upX / unitWidth);
}
滑動事件處理
核心的代碼全部完畢了,我們看下onTouch里面的處理
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//記錄手指按下的坐標(biāo)
downX = (int) event.getX();
// 根據(jù)當(dāng)前坐標(biāo),確定要移動哪個球球,因為我們說了,我們這個是有兩個球的,唯一的一個技巧點就是這個地方,根據(jù)手指按下的坐標(biāo)找到距離哪個球位置最近就移動哪個球,這里注意下.
currentMovingType = getMovingLeftOrRight(downX);
if (BallType.LEFT == currentMovingType) {
leftSeekBallX = downX;
} else if (BallType.RIGHT == currentMovingType) {
rightSeekBallX = downX;
}
seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
break;
case MotionEvent.ACTION_MOVE:
//移動的時候根據(jù)計算出來的位置以及方向改變兩個小球的位置以及舉行進度條的RectF的范圍
int moveX = (int) event.getX();
// 特殊情況處理,兩個球重合應(yīng)該怎么辦,
if (leftSeekBallX == rightSeekBallX) {
if (moveX - downX > 0) {
currentMovingType = BallType.RIGHT;
rightSeekBallX = moveX;
} else {
currentMovingType = BallType.LEFT;
leftSeekBallX = moveX;
}
} else {
if (BallType.LEFT == currentMovingType) {
leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : moveX;
} else if (BallType.RIGHT == currentMovingType) {
rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : moveX;
}
}
seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
break;
case MotionEvent.ACTION_UP:
// 手指離開的時候,確定返回給UI的數(shù)據(jù)集
if (BallType.LEFT == currentMovingType) {
leftPosition = getDataPosition((int) event.getX());
leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio;
} else if (BallType.RIGHT == currentMovingType) {
rightPosition = getDataPosition((int) event.getX());
rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio;
}
if (null != dragFinishedListener) {
dragFinishedListener.dragFinished(leftPosition, rightPosition);
}
break;
}
// 邊界處理,確保左邊的球不會超過右邊的,右邊的不會超過左邊的
if (BallType.LEFT == currentMovingType) {
if (leftSeekBallX < seekBallRadio + DEF_PADDING) {
leftSeekBallX = seekBallRadio + DEF_PADDING;
}
if (leftSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) {
leftSeekBallX = viewWidth - seekBallRadio - DEF_PADDING;
}
} else if (BallType.RIGHT == currentMovingType) {
if (rightSeekBallX < seekBallRadio + DEF_PADDING) {
rightSeekBallX = seekBallRadio + DEF_PADDING;
}
if (rightSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) {
rightSeekBallX = viewWidth - seekBallRadio - DEF_PADDING;
}
}
seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
invalidate();
return true;
}
大部分的核心的代碼就這么多,然后剩下的view寫完了就該把回調(diào)借口透出給UI 完活了…..
public void setData(List<String> data, OnDragFinishedListener dragFinishedListener) {
this.dragFinishedListener = dragFinishedListener;
this.data = data;
leftPosition = 0;
if (null != data && data.size() != 0) {
rightPosition = data.size() - 1;
}
}
源代碼下載地址?https://github.com/GuoFeilong/ATDragViewDemo
原文鏈接:https://blog.csdn.net/givemeacondom/article/details/52397589
相關(guān)推薦
- 2022-11-22 Kotlin對象的懶加載方式by?lazy?與?lateinit?異同詳解_Android
- 2024-02-28 UNI-APP中,swiper和tabbar結(jié)合實現(xiàn)滑動翻頁效果
- 2022-04-18 Python?socket如何解析HTTP請求內(nèi)容_python
- 2022-09-08 Python列表list的詳細用法介紹_python
- 2022-02-26 Hutool cn.hutool.core.bean.BeanException: Set valu
- 2023-12-16 IDEA中調(diào)用方法時,同步顯示方法的注釋信息
- 2023-07-15 es6中export和export default的區(qū)別
- 2022-11-03 C語言編寫掃雷小程序_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支