Android自定義控件之刻度尺控件
今天我做的是一個(gè)自定義刻度尺控件,由于項(xiàng)目需求需要使用刻度尺那樣滑動(dòng)選擇,由于對(duì)自定義控件的認(rèn)識(shí)還不夠深入,于是花了一周多時(shí)間才把這個(gè)控件給整出來(lái),也是嘔心瀝血的經(jīng)歷啊,也讓我對(duì)自定義控件有了自己的認(rèn)識(shí),廢話不多說(shuō),先上一個(gè)簡(jiǎn)單的效果圖,大家可以看看,如有需求可以直接拿去使用
效果圖如下:只是我的一個(gè)簡(jiǎn)單Demo,效果有點(diǎn)丑陋了點(diǎn),希望海涵!
效果已經(jīng)出來(lái)接下來(lái)就是代碼部分了,一看就只是一般的控件很難實(shí)現(xiàn),于是就開(kāi)始了我的自定義View之旅,每次自定義完后總是會(huì)收獲很多東西,如下是我的代碼:
package android.tst.com.myapplication; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.text.Layout; import android.text.TextPaint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.ViewConfiguration; import android.widget.Scroller; /** * 卷尺控件類(lèi)。由于時(shí)間比較緊,只有下班后有時(shí)間,因此只實(shí)現(xiàn)了基本功能。<br> * 細(xì)節(jié)問(wèn)題包括滑動(dòng)過(guò)程中widget邊緣的刻度顯示問(wèn)題等<br> * @version create:2014年8月26日 */ @SuppressLint("ClickableViewAccessibility") public class RulerView extends View { public interface OnValueChangeListener { public void onValueChange(float value); } public static final int MOD_TYPE_HALF = 2; public static final int MOD_TYPE_ONE = 10; private static final int ITEM_HALF_DIVIDER = 10; private static final int ITEM_ONE_DIVIDER = 10; private static final int ITEM_MAX_HEIGHT = 20; private static final int ITEM_MIN_HEIGHT = 10; private static final int TEXT_SIZE = 7; private float mDensity; private int mValue = 50, mMaxValue = 100, mModType = MOD_TYPE_HALF, mLineDivider = ITEM_HALF_DIVIDER; // private int mValue = 50, mMaxValue = 500, mModType = MOD_TYPE_ONE, // mLineDivider = ITEM_ONE_DIVIDER; private int mLastX, mMove; private int mWidth, mHeight; private int mMinVelocity; private Scroller mScroller; private VelocityTracker mVelocityTracker; private OnValueChangeListener mListener; @SuppressWarnings("deprecation") public RulerView(Context context, AttributeSet attrs) { super(context, attrs); mScroller = new Scroller(getContext()); mDensity = getContext().getResources().getDisplayMetrics().density; mMinVelocity = ViewConfiguration.get(getContext()) .getScaledMinimumFlingVelocity(); } /** * * 考慮可擴(kuò)展,但是時(shí)間緊迫,只可以支持兩種類(lèi)型效果圖中兩種類(lèi)型 * * @param value * 初始值 * @param maxValue * 最大值 * @param model * 刻度盤(pán)精度:<br> * {@link MOD_TYPE_HALF}<br> * {@link MOD_TYPE_ONE}<br> */ public void initViewParam(int defaultValue, int maxValue, int model) { switch (model) { case MOD_TYPE_HALF: mModType = MOD_TYPE_HALF; mLineDivider = ITEM_HALF_DIVIDER; mValue = defaultValue * 2; mMaxValue = maxValue * 2; break; case MOD_TYPE_ONE: mModType = MOD_TYPE_ONE; mLineDivider = ITEM_ONE_DIVIDER; mValue = defaultValue; mMaxValue = maxValue; break; default: break; } invalidate(); mLastX = 0; mMove = 0; notifyValueChange(); } /** * 設(shè)置用于接收結(jié)果的監(jiān)聽(tīng)器 * * @param listener */ public void setValueChangeListener(OnValueChangeListener listener) { mListener = listener; } /** * 獲取當(dāng)前刻度值 * * @return */ public float getValue() { return mValue; } public void setValue(int value){ mValue = value; notifyValueChange(); postInvalidate(); } public void setValueToChange(int what) { mValue += what; notifyValueChange(); postInvalidate(); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { mWidth = getWidth(); mHeight = getHeight(); super.onLayout(changed, left, top, right, bottom); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawScaleLine(canvas); // drawWheel(canvas); drawMiddleLine(canvas); } /** * 從中間往兩邊開(kāi)始畫(huà)刻度線 * * @param canvas */ private void drawScaleLine(Canvas canvas) { canvas.save(); Paint linePaint = new Paint(); linePaint.setStrokeWidth(2); linePaint.setColor(Color.rgb(141, 189, 225)); TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG); textPaint.setColor(Color.rgb(68, 135, 188)); textPaint.setTextSize(TEXT_SIZE * mDensity); int width = mWidth, drawCount = 0; float xPosition = 0, textWidth = Layout.getDesiredWidth("0", textPaint); for (int i = 0; drawCount <= 4 * width; i++) { int numSize = String.valueOf(mValue + i).length(); // 前 xPosition = (width / 2 - mMove) + i * mLineDivider * mDensity; if (xPosition + getPaddingRight() < mWidth) { if ((mValue + i) % mModType == 0) { linePaint.setColor(Color.rgb(68, 135, 188)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MAX_HEIGHT, linePaint); if (mValue + i <= mMaxValue) { switch (mModType) { case MOD_TYPE_HALF: canvas.drawText( String.valueOf((mValue + i) / 2), countLeftStart(mValue + i, xPosition, textWidth), getHeight() - textWidth, textPaint); break; case MOD_TYPE_ONE: canvas.drawText(String.valueOf(mValue + i), xPosition - (textWidth * numSize / 2), getHeight() - textWidth, textPaint); break; default: break; } } } else { linePaint.setColor(Color.rgb(141, 189, 225)); // linePaint.setColor(Color.rgb(68, 135, 188)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint); } } // 后 xPosition = (width / 2 - mMove) - i * mLineDivider * mDensity; if (xPosition > getPaddingLeft()) { if ((mValue - i) % mModType == 0) { linePaint.setColor(Color.rgb(68, 135, 188)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MAX_HEIGHT, linePaint); if (mValue - i >= 0) { switch (mModType) { case MOD_TYPE_HALF: canvas.drawText( String.valueOf((mValue - i) / 2), countLeftStart(mValue - i, xPosition, textWidth), getHeight() - textWidth, textPaint); break; case MOD_TYPE_ONE: canvas.drawText(String.valueOf(mValue - i), xPosition - (textWidth * numSize / 2), getHeight() - textWidth, textPaint); break; default: break; } } } else { linePaint.setColor(Color.rgb(141, 189, 225)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint); } } drawCount += 2 * mLineDivider * mDensity; } canvas.restore(); } /** * 計(jì)算沒(méi)有數(shù)字顯示位置的輔助方法 * * @param value * @param xPosition * @param textWidth * @return */ private float countLeftStart(int value, float xPosition, float textWidth) { float xp = 0f; if (value < 20) { xp = xPosition - (textWidth * 1 / 2); } else { xp = xPosition - (textWidth * 2 / 2); } return xp; } /** * 畫(huà)中間的紅色指示線、陰影等。指示線兩端簡(jiǎn)單的用了兩個(gè)矩形代替 * * @param canvas */ private void drawMiddleLine(Canvas canvas) { // TOOD 常量太多,暫時(shí)放這,最終會(huì)放在類(lèi)的開(kāi)始,放遠(yuǎn)了怕很快忘記 int gap = 12, indexWidth = 2, indexTitleWidth = 24, indexTitleHight = 10, shadow = 6; String color = "#66999999"; canvas.save(); Paint redPaint = new Paint(); redPaint.setStrokeWidth(indexWidth); redPaint.setColor(Color.RED); canvas.drawLine(mWidth / 2, 0, mWidth / 2, mHeight, redPaint); canvas.restore(); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int xPosition = (int) event.getX(); if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); switch (action) { case MotionEvent.ACTION_DOWN: mScroller.forceFinished(true); mLastX = xPosition; mMove = 0; break; case MotionEvent.ACTION_MOVE: getParent().requestDisallowInterceptTouchEvent(true); mMove += (mLastX - xPosition); changeMoveAndValue(); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: countMoveEnd(); countVelocityTracker(event); getParent().requestDisallowInterceptTouchEvent(false); return false; // break; default: break; } mLastX = xPosition; return true; } private void countVelocityTracker(MotionEvent event) { mVelocityTracker.computeCurrentVelocity(1000); float xVelocity = mVelocityTracker.getXVelocity(); if (Math.abs(xVelocity) > mMinVelocity) { mScroller.fling(0, 0, (int) xVelocity, 0, Integer.MIN_VALUE, Integer.MAX_VALUE, 0, 0); } } private void changeMoveAndValue() { int tValue = (int) (mMove / (mLineDivider * mDensity)); if (Math.abs(tValue) > 0) { mValue += tValue; mMove -= tValue * mLineDivider * mDensity; if (mValue <= 0 || mValue > mMaxValue) { mValue = mValue <= 0 ? 0 : mMaxValue; mMove = 0; mScroller.forceFinished(true); } notifyValueChange(); } postInvalidate(); } private void countMoveEnd() { int roundMove = Math.round(mMove / (mLineDivider * mDensity)); mValue = mValue + roundMove; mValue = mValue <= 0 ? 0 : mValue; mValue = mValue > mMaxValue ? mMaxValue : mValue; mLastX = 0; mMove = 0; notifyValueChange(); postInvalidate(); } private void notifyValueChange() { if (null != mListener) { if (mModType == MOD_TYPE_ONE) { mListener.onValueChange(mValue); } if (mModType == MOD_TYPE_HALF) { mListener.onValueChange(mValue / 2f); } } } @Override public void computeScroll() { super.computeScroll(); if (mScroller.computeScrollOffset()) { if (mScroller.getCurrX() == mScroller.getFinalX()) { // over countMoveEnd(); } else { int xPosition = mScroller.getCurrX(); mMove += (mLastX - xPosition); changeMoveAndValue(); mLastX = xPosition; } } } @Override public boolean dispatchTouchEvent(MotionEvent event) { getParent().requestDisallowInterceptTouchEvent(true); return super.dispatchTouchEvent(event); } }
這是我的自定義View部分的代碼,下面就是在布局中的使用了
<TextView android:id="@+id/tv_values" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center" android:textColor="@android:color/holo_red_dark"/> <android.tst.com.myapplication.RulerView android:id="@+id/rv_view" android:layout_width="match_parent" android:layout_height="60dp"/> <LinearLayout android:layout_width="match_parent" android:orientation="horizontal" android:layout_height="wrap_content"> <Button android:id="@+id/btn_jia" android:layout_width="0dp" android:layout_height="wrap_content" android:text="+" android:textSize="25sp" android:gravity="center" android:layout_marginRight="15dp" android:layout_weight="1"/> <Button android:id="@+id/btn_jian" android:layout_width="0dp" android:layout_height="wrap_content" android:text="-" android:layout_marginLeft="15dp" android:textSize="25sp" android:gravity="center" android:layout_weight="1"/> </LinearLayout>
如上根據(jù)效果圖,我需要一個(gè)TextView進(jìn)行顯示,還有就是我的自定義刻度尺控件了,接下來(lái)就是兩個(gè)Button控件加減。
接下來(lái)就是在Activity中的使用了
首先需要一個(gè)Handler進(jìn)行更新TextView中的值
Handler handler = new Handler() { @Override public void handleMessage(Message msg) { tv_values.setText(rv_view.getValue() + "Kg"); }; };
其次就是初始化相關(guān)的操作了
private void deployRulerView(){ rv_view= (RulerView) findViewById(R.id.rv_view); btn_jia= (Button) findViewById(R.id.btn_jia); btn_jian= (Button) findViewById(R.id.btn_jian); tv_values= (TextView) findViewById(R.id.tv_values); //設(shè)置RulerView的初始值 rv_view.setValue(60); //初始化刻度尺范圍 rv_view.initViewParam(60, 200, RulerView.MOD_TYPE_ONE); rv_view.setValueChangeListener(new RulerView.OnValueChangeListener() { @Override public void onValueChange(float value) { handler.sendMessage(new Message()); } }); tv_values.setText(60+"KG"); //給兩個(gè)控件添加監(jiān)聽(tīng)事件 btn_jia.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { rv_view.setValueToChange(1); } }); btn_jian.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { rv_view.setValueToChange(-1); } }); }
到這里整個(gè)過(guò)程已經(jīng)完成了,如果不好的地方盡情吐槽,整個(gè)過(guò)程,最復(fù)雜的莫過(guò)于自定義中的繪制過(guò)程,但是一切的問(wèn)題當(dāng)你靜下心好好去實(shí)現(xiàn)時(shí),那一切的問(wèn)題都就不存在了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義控件實(shí)現(xiàn)通用驗(yàn)證碼輸入框(二)
- Android自定義控件實(shí)現(xiàn)通用驗(yàn)證碼輸入框
- Android自定義控件橫向柱狀統(tǒng)計(jì)圖
- Android自定義控件之圓形進(jìn)度條動(dòng)畫(huà)
- Android自定義控件之水平圓點(diǎn)加載進(jìn)度條
- Android Studio 創(chuàng)建自定義控件的方法
- Android開(kāi)發(fā)自定義控件之折線圖實(shí)現(xiàn)方法詳解
- Android自定義控件實(shí)現(xiàn)時(shí)鐘效果
- Android自定義控件仿ios下拉回彈效果
- Android運(yùn)動(dòng)健康睡眠自定義控件的實(shí)現(xiàn)
相關(guān)文章
Android 內(nèi)存溢出和內(nèi)存泄漏的問(wèn)題
這篇文章主要介紹了Android 內(nèi)存溢出和內(nèi)存泄漏的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-03-03SurfaceView實(shí)現(xiàn)紅包雨平移動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了SurfaceView實(shí)現(xiàn)紅包雨平移動(dòng)畫(huà),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android結(jié)合kotlin使用coroutine的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Android結(jié)合kotlin使用coroutine的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12詳解Android Studio無(wú)法檢測(cè)新版本問(wèn)題解決
這篇文章主要介紹了詳解Android Studio無(wú)法檢測(cè)新版本問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Android巧用ActionBar實(shí)現(xiàn)下拉式導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Android巧用ActionBar實(shí)現(xiàn)下拉式導(dǎo)航的相關(guān)資料,具有一定的實(shí)用性和參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05android中intent傳遞list或者對(duì)象的方法
這篇文章主要介紹了android中intent傳遞list或者對(duì)象的方法,分析羅列了常用的幾種方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01Android編程實(shí)現(xiàn)仿優(yōu)酷圓盤(pán)旋轉(zhuǎn)菜單效果的方法詳解【附demo源碼下載】
這篇文章主要介紹了Android編程實(shí)現(xiàn)仿優(yōu)酷圓盤(pán)旋轉(zhuǎn)菜單效果的方法,涉及Android界面布局及事件響應(yīng)相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-08-08Android統(tǒng)一依賴(lài)管理的三種方式總結(jié)
為了項(xiàng)目的管理,依賴(lài)包的紡一管理是必要的,下面這篇文章主要給大家介紹了關(guān)于Android統(tǒng)一依賴(lài)管理的三種方式,文中通過(guò)實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01