Android自定義控制元件之刻度尺控制元件
阿新 • • 發佈：2020-06-20
今天我做的是一個自定義刻度尺控制元件，由於專案需求需要使用刻度尺那樣滑動選擇，由於對自定義控制元件的認識還不夠深入，於是花了一週多時間才把這個控制元件給整出來，也是嘔心瀝血的經歷啊，也讓我對自定義控制元件有了自己的認識，廢話不多說，先上一個簡單的效果圖，大家可以看看，如有需求可以直接拿去使用
效果圖如下：只是我的一個簡單Demo，效果有點醜陋了點，希望海涵！
效果已經出來接下來就是程式碼部分了，一看就只是一般的控制元件很難實現，於是就開始了我的自定義View之旅，每次自定義完後總是會收穫很多東西，如下是我的程式碼：
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;
/**
* 捲尺控制元件類。由於時間比較緊，只有下班後有時間，因此只實現了基本功能。<br>
* 細節問題包括滑動過程中widget邊緣的刻度顯示問題等<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();
}
/**
*
* 考慮可擴充套件，但是時間緊迫，只可以支援兩種型別效果圖中兩種型別
*
* @param value
* 初始值
* @param maxValue
* 最大值
* @param model
* 刻度盤精度：<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();
}
/**
* 設定用於接收結果的監聽器
*
* @param listener
*/
public void setValueChangeListener(OnValueChangeListener listener) {
mListener = listener;
}
/**
* 獲取當前刻度值
*
* @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);
}
/**
* 從中間往兩邊開始畫刻度線
*
* @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,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,textWidth),getHeight() - textWidth,textPaint);
break;
case MOD_TYPE_ONE:
canvas.drawText(String.valueOf(mValue + i),xPosition - (textWidth * numSize / 2),textPaint);
break;
default:
break;
}
}
} else {
linePaint.setColor(Color.rgb(141,225));
// linePaint.setColor(Color.rgb(68,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,linePaint);
if (mValue - i >= 0) {
switch (mModType) {
case MOD_TYPE_HALF:
canvas.drawText(
String.valueOf((mValue - i) / 2),countLeftStart(mValue - i,textPaint);
break;
case MOD_TYPE_ONE:
canvas.drawText(String.valueOf(mValue - i),textPaint);
break;
default:
break;
}
}
} else {
linePaint.setColor(Color.rgb(141,225));
canvas.drawLine(xPosition,linePaint);
}
}
drawCount += 2 * mLineDivider * mDensity;
}
canvas.restore();
}
/**
* 計算沒有數字顯示位置的輔助方法
*
* @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;
}
/**
* 畫中間的紅色指示線、陰影等。指示線兩端簡單的用了兩個矩形代替
*
* @param canvas
*/
private void drawMiddleLine(Canvas canvas) {
// TOOD 常量太多，暫時放這，最終會放在類的開始，放遠了怕很快忘記
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,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,(int) xVelocity,Integer.MIN_VALUE,Integer.MAX_VALUE,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>
如上根據效果圖，我需要一個TextView進行顯示，還有就是我的自定義刻度尺控制元件了，接下來就是兩個Button控制元件加減。
接下來就是在Activity中的使用了，
首先需要一個Handler進行更新TextView中的值
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
tv_values.setText(rv_view.getValue() + "Kg");
};
};
其次就是初始化相關的操作了，
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);
//設定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");
//給兩個控制元件新增監聽事件
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);
}
});
}到這裡整個過程已經完成了，如果不好的地方盡情吐槽，真個過程，最複雜的莫過於自定義中的繪製過程，但是一切的問題當你靜下心好好去實現時，那一切的問題都就不存在了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。