Android自定義Seekbar滑動(dòng)條 Pop提示跟隨滑動(dòng)按鈕滑動(dòng)
本文實(shí)例為大家分享了Android自定義Seekbar滑動(dòng)條的具體代碼,供大家參考,具體內(nèi)容如下
由于項(xiàng)目需要做出此效果,自定義寫(xiě)了一個(gè)。
效果圖

思路:
原始的seekbar只有滑動(dòng)條并沒(méi)有下方的提示文字,所以我們必須要繼承Seekbar重寫(xiě)這個(gè)控件。
代碼:
在values文件夾下新建attrs.xml,用于設(shè)置跟隨滑動(dòng)按鈕的文字大小,顏色,背景。
<declare-styleable name="MySeekBar"> <attr name="textsize" format="dimension" /> <attr name="textcolor" format="color" /> <attr name="img" format="reference" /> </declare-styleable>
在布局里引用此控件
<com.jzh.myseekbar.MySeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:max="80" android:maxHeight="10dp" android:progress="0" android:progressDrawable="@drawable/seekbar_style" android:splitTrack="false" android:thumb="@mipmap/niu" app:img="@mipmap/ann" app:textcolor="#fff" app:textsize="14dp" />
自定義控件樣式
<?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="5dp" />
<gradient
android:angle="0"
android:centerColor="@android:color/holo_orange_dark"
android:endColor="@android:color/holo_red_dark"
android:startColor="#2aade3" />
</shape>
</item>
</layer-list>
主要核心代碼
/**
* 文本的顏色
*/
private int mTitleTextColor;
/**
* 文本的大小
*/
private float mTitleTextSize;
private String mTitleText;//文字的內(nèi)容
/**
* 背景圖片
*/
private int img;
private Bitmap map;
//bitmap對(duì)應(yīng)的寬高
private float img_width, img_height;
Paint paint;
private float numTextWidth;
//測(cè)量seekbar的規(guī)格
private Rect rect_seek;
private Paint.FontMetrics fm;
public static final int TEXT_ALIGN_LEFT = 0x00000001;
public static final int TEXT_ALIGN_RIGHT = 0x00000010;
public static final int TEXT_ALIGN_CENTER_VERTICAL = 0x00000100;
public static final int TEXT_ALIGN_CENTER_HORIZONTAL = 0x00001000;
public static final int TEXT_ALIGN_TOP = 0x00010000;
public static final int TEXT_ALIGN_BOTTOM = 0x00100000;
/**
* 文本中軸線X坐標(biāo)
*/
private float textCenterX;
/**
* 文本baseline線Y坐標(biāo)
*/
private float textBaselineY;
/**
* 文字的方位
*/
private int textAlign;
public MySeekBar(Context context) {
this(context, null);
}
public MySeekBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MySeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MySeekBar, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.MySeekBar_textsize:
mTitleTextSize = array.getDimension(attr, 15f);
break;
case R.styleable.MySeekBar_textcolor:
mTitleTextColor = array.getColor(attr, Color.WHITE);
break;
case R.styleable.MySeekBar_img:
img = array.getResourceId(attr, R.mipmap.ic_launcher);
break;
}
}
array.recycle();
getImgWH();
paint = new Paint();
paint.setAntiAlias(true);//設(shè)置抗鋸齒
paint.setTextSize(mTitleTextSize);//設(shè)置文字大小
paint.setColor(mTitleTextColor);//設(shè)置文字顏色
//設(shè)置控件的padding 給提示文字留出位置
setPadding((int) Math.ceil(img_width) / 2, 0, (int) Math.ceil(img_height) / 2, (int) Math.ceil(img_height) + 10);
textAlign = TEXT_ALIGN_CENTER_HORIZONTAL | TEXT_ALIGN_CENTER_VERTICAL;
}
/**
* 獲取圖片的寬高
*/
private void getImgWH() {
map = BitmapFactory.decodeResource(getResources(), img);
img_width = map.getWidth();
img_height = map.getHeight();
}
@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
setTextLocation();//定位文本繪制的位置
rect_seek = this.getProgressDrawable().getBounds();
//定位文字背景圖片的位置
float bm_x = rect_seek.width() * getProgress() / getMax();
float bm_y = rect_seek.height() + 20;
// //計(jì)算文字的中心位置在bitmap
float text_x = rect_seek.width() * getProgress() / getMax() + (img_width - numTextWidth) / 2;
canvas.drawBitmap(map, bm_x, bm_y, paint);//畫(huà)背景圖
// canvas.drawRoundRect();
canvas.drawText(mTitleText, text_x, (float) (textBaselineY + bm_y + (0.16 * img_height / 2)), paint);//畫(huà)文字
}
@Override
public boolean onTouchEvent(MotionEvent event) {
invalidate();//監(jiān)聽(tīng)手勢(shì)滑動(dòng),不斷重繪文字和背景圖的顯示位置
return super.onTouchEvent(event);
}
/**
* 定位文本繪制的位置
*/
private void setTextLocation() {
fm = paint.getFontMetrics();
//文本的寬度
mTitleText = getProgress() + 10 + "℃";
numTextWidth = paint.measureText(mTitleText);
float textCenterVerticalBaselineY = img_height / 2 - fm.descent + (fm.descent - fm.ascent) / 2;
switch (textAlign) {
case TEXT_ALIGN_CENTER_HORIZONTAL | TEXT_ALIGN_CENTER_VERTICAL:
textCenterX = img_width / 2;
textBaselineY = textCenterVerticalBaselineY;
break;
case TEXT_ALIGN_LEFT | TEXT_ALIGN_CENTER_VERTICAL:
textCenterX = numTextWidth / 2;
textBaselineY = textCenterVerticalBaselineY;
break;
case TEXT_ALIGN_RIGHT | TEXT_ALIGN_CENTER_VERTICAL:
textCenterX = img_width - numTextWidth / 2;
textBaselineY = textCenterVerticalBaselineY;
break;
case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_CENTER_HORIZONTAL:
textCenterX = img_width / 2;
textBaselineY = img_height - fm.bottom;
break;
case TEXT_ALIGN_TOP | TEXT_ALIGN_CENTER_HORIZONTAL:
textCenterX = img_width / 2;
textBaselineY = -fm.ascent;
break;
case TEXT_ALIGN_TOP | TEXT_ALIGN_LEFT:
textCenterX = numTextWidth / 2;
textBaselineY = -fm.ascent;
break;
case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_LEFT:
textCenterX = numTextWidth / 2;
textBaselineY = img_height - fm.bottom;
break;
case TEXT_ALIGN_TOP | TEXT_ALIGN_RIGHT:
textCenterX = img_width - numTextWidth / 2;
textBaselineY = -fm.ascent;
break;
case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_RIGHT:
textCenterX = img_width - numTextWidth / 2;
textBaselineY = img_height - fm.bottom;
break;
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義view實(shí)現(xiàn)倒計(jì)時(shí)控件
這篇文章主要為大家詳細(xì)介紹了Android自定義view實(shí)現(xiàn)倒計(jì)時(shí)控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10
Android編程程序?qū)崿F(xiàn)一鍵鎖屏的方法講解
今天小編就為大家分享一篇關(guān)于Android編程程序?qū)崿F(xiàn)一鍵鎖屏的方法講解,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
Android Webview添加網(wǎng)頁(yè)加載進(jìn)度條實(shí)例詳解
這篇文章主要介紹了Android Webview添加網(wǎng)頁(yè)加載進(jìn)度條實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android實(shí)現(xiàn)背景可滑動(dòng)登錄界面 (不壓縮背景彈出鍵盤(pán))
這篇文章主要介紹了Android實(shí)現(xiàn)背景可滑動(dòng)登錄界面 (不壓縮背景彈出鍵盤(pán)),需要的朋友可以參考下2017-04-04
Android AIDL——進(jìn)程通信機(jī)制詳解
這篇文章主要介紹了Android AIDL——進(jìn)程通信機(jī)制詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例,和實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-10-10
Android實(shí)現(xiàn)EditText添加下劃線
這篇文章主要為大家詳細(xì)介紹了Android如何實(shí)現(xiàn)給EditText添加下劃線,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析
這篇文章主要為大家介紹了Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Android實(shí)現(xiàn)Activities之間進(jìn)行數(shù)據(jù)傳遞的方法
這篇文章主要介紹了Android實(shí)現(xiàn)Activities之間進(jìn)行數(shù)據(jù)傳遞的方法,涉及Android中Activities的使用技巧,需要的朋友可以參考下2015-04-04

