自定義View-實(shí)現(xiàn)簡易車速器（真的夠簡易）
學(xué)習(xí)自定義View挺久了,好久沒用都快忘了,這里實(shí)現(xiàn)一個(gè)簡易的車速器算是一個(gè)回顧，項(xiàng)目比較簡單，代碼較少，但自定義View的流程基本都涉及到了.本文不是一篇講解自定義View基礎(chǔ)的文章,而是一個(gè)小的實(shí)戰(zhàn),如果想看講解自定義View的文章,強(qiáng)烈推薦博客:http://blog.csdn.net/aigestudio,強(qiáng)烈=_=.
效果如下圖:
接下來是代碼部分:
attrs:
<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="SpeedometerView"><attr name="centerCircleWidth" format="dimension"/><attr name="outCircleWidth" format="dimension"/><attr name="whiteScaleWidth" format="dimension"/><attr name="redScaleWidth" format="dimension"/><attr name="numberWidth" format="dimension"/><attr name="pointerWidth" format="dimension"/><attr name="outCircleColor" format="color"/><attr name="innerCircleColor" format="color"/><attr name="numberColor" format="color"/><attr name="normalScaleColor" format="color"/><attr name="multipleOfTenScaleColor" format="color"/></declare-styleable>
</resources>
attrs文件包含自定義的屬性,可以在布局文件或者代碼中使用.
colors:
<?xml version="1.0" encoding="utf-8"?>
<resources><color name="colorPrimary">#3F51B5</color><color name="colorPrimaryDark">#303F9F</color><color name="colorAccent">#FF4081</color><color name="color_out_arc">@android:color/holo_red_dark</color><color name="color_full_ten_number">@android:color/holo_red_dark</color><color name="color_inner_arc">@android:color/white</color><color name="color_full_ten_indicator">@android:color/holo_red_dark</color><color name="color_not_full_ten_indicator">@android:color/white</color>
</resources>
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:SpeedometerView="http://schemas.android.com/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/darker_gray"tools:context="com.example.why.speedometerview.MainActivity"><com.example.why.speedometerview.SpeedometerViewandroid:background="@android:color/black"android:id="@+id/speedometer_view"android:layout_width="match_parent"android:layout_height="match_parent"SpeedometerView:outCircleWidth="5dp"/>
</FrameLayout>
接下來是Java代碼:
SpeedometerView:
/*** Created by why on 17-3-9.* @author why* 簡易View實(shí)現(xiàn)類*/public class SpeedometerView extends View {private static final String TAG = "SpeedometerView";private Paint mInnerArcPaint; // 內(nèi)部弧線畫筆private Paint mOutArcPaint; // 外部弧線畫筆private Paint mNotFullTenIndicatorPaint; // 非整10刻度畫筆private Paint mFullTenIndicatorPaint; // 整10加粗刻度畫筆private Paint mNumberPaint; // 數(shù)字畫筆private Paint mIndicatorPathPaint; // 刻度指針畫筆,計(jì)可旋轉(zhuǎn)的線條private int mInnerArcLineWidth; // 內(nèi)部弧線線條寬度private int mOutArcLineWidth; // 外部弧線線條寬度private int mNormalIndicatorWidth; // 刻度線條寬度private int mFullTenScaleWidth; // 整10加粗刻度線條寬度private int mFullTenScaleLen ; // 非整10加粗線條長度private int mNotFullScaleLen; // 白色刻度線條長度private int mNumberWidth; // 數(shù)字線條刻度private int mIndicatorPathLineWidth;//private float mNumberTextSize; // 數(shù)字字體大小private int mCenterCircleRadius; // 內(nèi)圓半徑private int mOutCircleRadius; // 外圓半徑private RectF mOutRectF; // 外弧線的基準(zhǔn)矩形private RectF mCenterRectF; //內(nèi)弧線基準(zhǔn)矩形// 這兩個(gè)值是當(dāng)view的width和height屬性為wrap_content時(shí),屬性不起作用配置的默認(rèn)值，詳情間onMeasure();private int mViewDefaultWidth; // 默認(rèn)的view的寬度private int mViewDefaultHeight; // 默認(rèn)的view的高度,private int[] mWindowSize = new int[2]; // 保存屏幕的寬/高private Path mIndicatorPath; // 刻度指針,用path實(shí)現(xiàn)private int mScaleIndicatorLen; // 刻度指針的長度private int mIndicatorX; // 刻度指針指尖的X坐標(biāo)private int mIndicatorY; // 刻度指針指尖的Y坐標(biāo)private int mOutArcColor = Color.RED; // 外部弧線默認(rèn)顏色private int mNumberColor =Color.RED; // 刻度數(shù)字默認(rèn)顏色private int mInnerArcColor = Color.WHITE; //內(nèi)部弧線默認(rèn)顏色private int mFullTenIndicatorColor = Color.RED; // 整10刻度顏色private int mNotFullTenIndicatorColor = Color.WHITE; // 非整10刻度顏色public SpeedometerView(Context context) {super(context);init(context,null,0);}public SpeedometerView(Context context, AttributeSet attrs) {super(context,attrs);init(context,attrs,0);}public SpeedometerView(Context context, AttributeSet attrs, int defStyleAttr) {super(context,attrs,defStyleAttr);init(context,attrs,defStyleAttr);}/*** 初始化默認(rèn)數(shù)值*/private void initSize(){mWindowSize = getWindowSize();mViewDefaultWidth = mWindowSize[0];mViewDefaultHeight = mWindowSize[1];mOutCircleRadius = mWindowSize[0]/2-20;mNumberTextSize = mOutCircleRadius / 13;mInnerArcLineWidth = mOutCircleRadius/150;mCenterCircleRadius = mOutCircleRadius / 8;mOutArcLineWidth = mOutCircleRadius /150;mNormalIndicatorWidth = mOutCircleRadius /150;mFullTenScaleWidth = mOutCircleRadius / 150;mFullTenScaleLen = mOutCircleRadius /6;mNotFullScaleLen = mOutCircleRadius / 7;mIndicatorPathLineWidth = mOutCircleRadius/100;mNumberWidth = mOutCircleRadius/100;}/*** 初始化默認(rèn)顏色*/private void initColor() {Context context = getContext();mOutArcColor = ContextCompat.getColor(context, R.color.color_out_arc);mNumberColor = ContextCompat.getColor(context, R.color.color_full_ten_number);mInnerArcColor = ContextCompat.getColor(context, R.color.color_inner_arc);mFullTenIndicatorColor = ContextCompat.getColor(context, R.color.color_full_ten_indicator);mNotFullTenIndicatorColor = ContextCompat.getColor(context,R.color.color_not_full_ten_indicator);}/*** 初始化* @param context* @param attrs* @param defStyleAttr*/private void init(Context context,AttributeSet attrs, int defStyleAttr){initSize(); //為各個(gè)屬性設(shè)置默認(rèn)的值initColor(); //設(shè)置默認(rèn)顏色//從xml獲取設(shè)置的屬性，注意：這里只提供顏色屬性if (attrs != null) {TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.SpeedometerView,defStyleAttr,0);mOutArcColor = typedArray.getColor(R.styleable.SpeedometerView_outCircleColor,mOutArcColor);mNumberColor = typedArray.getColor(R.styleable.SpeedometerView_numberColor, mNumberColor);mInnerArcColor = typedArray.getColor(R.styleable.SpeedometerView_innerCircleColor, mInnerArcColor);mNotFullTenIndicatorColor = typedArray.getColor(R.styleable.SpeedometerView_normalScaleColor, mNotFullTenIndicatorColor);mFullTenIndicatorColor = typedArray.getColor(R.styleable.SpeedometerView_multipleOfTenScaleColor, mFullTenIndicatorColor);typedArray.recycle();}//設(shè)置內(nèi)弧線畫筆mInnerArcPaint = new Paint();mInnerArcPaint.setStyle(Paint.Style.STROKE);mInnerArcPaint.setColor(mInnerArcColor);mInnerArcPaint.setAntiAlias(true); //抗鋸齒mInnerArcPaint.setStrokeWidth(mInnerArcLineWidth);//設(shè)置外弧線畫筆mOutArcPaint = new Paint();mOutArcPaint.setStyle(Paint.Style.STROKE);mOutArcPaint.setColor(mOutArcColor);mOutArcPaint.setAntiAlias(true);mOutArcPaint.setStrokeWidth(mOutArcLineWidth);//設(shè)置非整十刻度畫筆mNotFullTenIndicatorPaint = new Paint();mNotFullTenIndicatorPaint.setStyle(Paint.Style.FILL);mNotFullTenIndicatorPaint.setColor(mNotFullTenIndicatorColor);mNotFullTenIndicatorPaint.setAntiAlias(true);mNotFullTenIndicatorPaint.setStrokeWidth(mNormalIndicatorWidth);//設(shè)置整十刻度畫筆mFullTenIndicatorPaint = new Paint();mFullTenIndicatorPaint.setStyle(Paint.Style.FILL);mFullTenIndicatorPaint.setColor(mFullTenIndicatorColor);mFullTenIndicatorPaint.setAntiAlias(true);mFullTenIndicatorPaint.setStrokeWidth(mFullTenScaleWidth);//設(shè)置數(shù)字畫筆mNumberPaint = new Paint();mNumberPaint.setStyle(Paint.Style.FILL);mNumberPaint.setColor(mNumberColor);mNumberPaint.setAntiAlias(true);mNumberPaint.setStrokeWidth(mNumberWidth);mNumberPaint.setTextSize(mNumberTextSize);mNumberPaint.setTextAlign(Paint.Align.CENTER);//設(shè)置刻度指針畫筆mIndicatorPathPaint = new Paint();mIndicatorPathPaint.setAntiAlias(true);mIndicatorPathPaint.setStyle(Paint.Style.STROKE);mIndicatorPathPaint.setColor(Color.RED);mIndicatorPathPaint.setStrokeWidth(mIndicatorPathLineWidth);mScaleIndicatorLen = mOutCircleRadius*8/13;//指針的長度mIndicatorX = -mScaleIndicatorLen;//因?yàn)橹羔樢婚_始是放在-180°的位置mIndicatorY = 0; //指針的起止坐標(biāo)為內(nèi)圓的圓心(onDraw()中會把原點(diǎn)坐標(biāo)平移到屏幕的中心,方便畫圖)，所以y為0mIndicatorPath = new Path();mOutRectF = new RectF();mCenterRectF = new RectF();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//通過MeasureSpec獲取各自的mode和sizeint widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);/*** 這里這么做的原因是自定義View的時(shí),width或者h(yuǎn)eight的屬性wrap_content不起作用，效果和match_parant相同,這里有牽扯到自* View扥繪制流程這里暫時(shí)不表,建議看看《Android開發(fā)藝術(shù)探索》中自定義View篇章或者看官網(wǎng)和相應(yīng)的博客，這里只是當(dāng)屬性為* wrap_content時(shí)設(shè)置默認(rèn)的mViewDefaultWidth,mViewDefaultHeight;*/if (widthSpecMode == MeasureSpec.AT_MOST && heightMeasureSpec == MeasureSpec.AT_MOST) {setMeasuredDimension(mViewDefaultWidth, mViewDefaultHeight);}else if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode != MeasureSpec.AT_MOST) {setMeasuredDimension(mViewDefaultWidth, heightSpecSize);}else if (widthMeasureSpec != MeasureSpec.AT_MOST && heightMeasureSpec == MeasureSpec.AT_MOST){setMeasuredDimension(widthSpecSize, heightMeasureSpec);}else {setMeasuredDimension(widthSpecSize, heightSpecSize);}}/*** 在onDraw(Canvas canvas)中畫圖,每次調(diào)用重繪方法invalidate()都會再次調(diào)用onDraw(Canvas canvas);* @param canvas*/@Overrideprotected void onDraw(Canvas canvas) {canvas.translate(mWindowSize[0]/2, mWindowSize[1]/2);//canvas坐標(biāo)平移到屏幕中心,這樣容易操作//畫外層的弧形,默認(rèn)紅色drawOutArc(mOutRectF, canvas);//畫內(nèi)層的弧形,默認(rèn)白色drawInnerWhiteArc(mCenterRectF, canvas);//畫整十刻度以及整10數(shù)字drawFullTenIndicatorAndNumber(canvas);//接下來畫普通的刻度,即未加粗的刻度drawNotFullTenIndicator(canvas);//接下來畫指示圖標(biāo),注意這里使用path的drawPath()方法畫line,每次畫之前path調(diào)用path.lineTo(mIndicatorX, mIndicatorY)//連接內(nèi)圓心和該點(diǎn)drawIndicator(mIndicatorPath, canvas);}/*** 獲取觸摸的坐標(biāo)* @param event* @return*/@Overridepublic boolean onTouchEvent(MotionEvent event) {int action = MotionEventCompat.getActionMasked(event);float posX;float posY;double scale;switch (action) {case MotionEvent.ACTION_DOWN:posX = event.getX();posY = event.getY();//如果觸摸的坐標(biāo)不在弧線的基準(zhǔn)矩形中，那就不做處理，直接returnif (!mOutRectF.contains(posX-mWindowSize[0]/2,posY - mWindowSize[1]/2) || posY - mWindowSize[1]/2 > 0){return true;}/*** 由于刻度指針的長度是固定的，但是手指觸摸的點(diǎn)不是固定的，不能直接將指針的終點(diǎn)坐標(biāo)設(shè)置為獲取的x,y,但可以先算出*手指觸摸的點(diǎn)到內(nèi)圓中心的距離，然后除于指針的長度,得到比例,根據(jù)相似三角形的性質(zhì)可知,這個(gè)比例對于三角形的三條邊都是一樣的*注意：這里的三角形是假設(shè)圓心,觸摸點(diǎn),以及X坐標(biāo)相連獲得的直角三角形，于是我們可以根據(jù)比例算出在點(diǎn)與內(nèi)圓心的距離為默認(rèn)的指針*長度時(shí)，此時(shí)另外兩條直角邊的長度，即可求出,x,y的值*/scale = Math.sqrt((posX-mWindowSize[0]/2)*(posX-mWindowSize[0]/2)+ (posY - mWindowSize[1]/2)*(posY - mWindowSize[1]/2))/mScaleIndicatorLen;mIndicatorX = rawXToIndicatorX(posX, scale);mIndicatorY = rawXToIndicatorY(posY, scale);break;case MotionEvent.ACTION_MOVE://移動過程中不斷的獲取觸摸點(diǎn)的坐標(biāo)，并按比例轉(zhuǎn)換為相應(yīng)的指針終點(diǎn)坐標(biāo)posX = event.getX();posY = event.getY();if (!mOutRectF.contains(posX-mWindowSize[0]/2,posY - mWindowSize[1]/2)|| posY - mWindowSize[1]/2 > 0){return true;}Log.d(TAG,"x的="+posX+"--y的值=" +""+posY);scale = Math.sqrt((posX-mWindowSize[0]/2)*(posX-mWindowSize[0]/2)+ (posY - mWindowSize[1]/2)*(posY - mWindowSize[1]/2))/mScaleIndicatorLen;//或最終的指針終點(diǎn)坐標(biāo),onDraw()根據(jù)mIndicatorX.mIndicatorY畫指針的終點(diǎn)mIndicatorX = rawXToIndicatorX(posX, scale);mIndicatorY = rawXToIndicatorY(posY, scale);break;}//重新繪制view,onDraw()會被調(diào)用invalidate();//return true表示自己處理觸摸事件,parent的onTouchEvent()方法不會被調(diào)用了return true;}/*** 按邊長比例算出最終的X* @param posX* @param scale* @return*/private int rawXToIndicatorX(double posX, double scale) {return (int)((posX-mWindowSize[0]/2) / scale);}/*** 按邊長比例算出最終的Y* @param posY* @param scale* @return*/private int rawXToIndicatorY(double posY, double scale) {return (int)((posY - mWindowSize[1]/2) / scale);}/*** 畫出外弧線* @param rectF* @param canvas*/private void drawOutArc(RectF rectF, Canvas canvas) {rectF.set(-mOutCircleRadius, - mOutCircleRadius, mOutCircleRadius, mOutCircleRadius);canvas.drawArc(mOutRectF,0,-180,false,mOutArcPaint);}//畫出內(nèi)弧線private void drawInnerWhiteArc(RectF rectF, Canvas canvas) {rectF.set(-mCenterCircleRadius, -mCenterCircleRadius,mCenterCircleRadius, mCenterCircleRadius);canvas.drawArc(mCenterRectF, 0, -180, false, mInnerArcPaint);}/*** 畫整10的刻度,因?yàn)閿?shù)字對應(yīng)整時(shí)，可在同一個(gè)循環(huán)中畫出* @param canvas*/private void drawFullTenIndicatorAndNumber(Canvas canvas) {//整十刻度終點(diǎn)離內(nèi)圓心的長度int distance = mOutCircleRadius - mFullTenScaleLen;//接下來畫10的倍數(shù)的刻度for (int i = -180; i<=0; i += 15) {double radian = ((double)i/180)*Math.PI;//弧度double cosValue = Math.cos(radian);//三角函數(shù)值double sinValue = Math.sin(radian);//根據(jù)弧度算出起始點(diǎn)和終點(diǎn)坐標(biāo)float startX = (float)(distance*cosValue);float startY = (float)(distance*sinValue);float endX = (float)(mOutCircleRadius*Math.cos(radian));float endY = (float)(mOutCircleRadius*Math.sin(radian));canvas.drawLine(startX,startY,endX,endY,mFullTenIndicatorPaint);//刻度數(shù)字標(biāo)識的坐標(biāo)，float numberX =(float)((distance-50)*cosValue);float numberY =(float)((distance-50)*sinValue);canvas.drawText(""+Math.abs(i+180)*2/3,numberX, numberY, mNumberPaint);}}/*** 畫非整10刻度* @param canvas*/private void drawNotFullTenIndicator(Canvas canvas) {float normalIntervalRadian = (float)Math.PI / 60;int normalIntervalRadianCount = (int)(Math.PI/normalIntervalRadian);int distance = mOutCircleRadius - mNotFullScaleLen;for (int i = 0; i <= normalIntervalRadianCount; i++) {if (!(i%5 == 0) ){float cosValue = (float)Math.cos(-normalIntervalRadian*i);float sinValue = (float)Math.sin(-normalIntervalRadian*i);float startX = (distance*cosValue);float startY = (distance*sinValue);float endX = (float)((mOutCircleRadius-10)*Math.cos((-normalIntervalRadian*i)));float endY = (float)((mOutCircleRadius-10)*Math.sin((-normalIntervalRadian*i)));canvas.drawLine(startX,startY,endX,endY,mNotFullTenIndicatorPaint);}}}/*** 畫刻度指針* @param path* @param canvas*/private void drawIndicator(Path path, Canvas canvas) {path.lineTo(mIndicatorX, mIndicatorY);canvas.drawPath(path,mIndicatorPathPaint);path.reset();}/*** 獲取屏幕的寬,高,按屏幕的比例設(shè)置view的各個(gè)屬性* @return*/private int[] getWindowSize() {int[] size = new int[2];Resources resources = getContext().getResources();DisplayMetrics displayMetrics = resources.getDisplayMetrics();size[0] = displayMetrics.widthPixels;size[1] = displayMetrics.heightPixels;return size;}//這里只提供修改顏色的方法public int getOutCircleColor() {return mOutArcColor;}public void setOutCircleColor(int outCircleColor) {this.mOutArcColor = outCircleColor;}public int getNumberColor() {return mNumberColor;}public void setmNumberColor(int numberColor) {this.mNumberColor = numberColor;}public int getInnerCircleColor() {return mInnerArcColor;}public void setInnerCircleColor(int innerArcColor) {this.mInnerArcColor = innerArcColor;}public int getmOutArcColor() {return mOutArcColor;}public void setmOutArcColor(int outArcColor) {this.mOutArcColor = outArcColor;}public int getmNumberColor() {return mNumberColor;}public int getmInnerArcColor() {return mInnerArcColor;}public void setmInnerArcColor(int innerArcColor) {this.mInnerArcColor = innerArcColor;}public int getmFullTenIndicatorColor() {return mFullTenIndicatorColor;}public void setmFullTenIndicatorColor(int fullTenIndicatorColor) {this.mFullTenIndicatorColor = fullTenIndicatorColor;}public int getmNotFullTenIndicatorColor() {return mNotFullTenIndicatorColor;}public void setmNotFullTenIndicatorColor(int notFullTenIndicatorColor) {this.mNotFullTenIndicatorColor = notFullTenIndicatorColor;}
}
Activity:
public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);SpeedometerView speedometerView = (SpeedometerView)findViewById(R.id.speedometer_view);}
}
注釋還是很清楚的,源碼地址https://github.com/whyrookie/...
總結(jié)
以上是生活随笔為你收集整理的自定义View-实现简易车速器（真的够简易）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
