Android重寫View實現(xiàn)全新的控件
通常情況下,Android實現(xiàn)自定義控件無非三種方式。
?、?、繼承現(xiàn)有控件,對其控件的功能進行拓展。
?、?、將現(xiàn)有控件進行組合,實現(xiàn)功能更加強大控件。
Ⅲ、重寫View實現(xiàn)全新的控件
本文來討論最難的一種自定義控件形式,重寫View來實現(xiàn)全新的控件。
首先,我們要明白在什么樣的情況下,需要重寫View來實現(xiàn)一種全新的控件,一般當我們遇到了原生控件無法滿足我們現(xiàn)有的需求的時候,我們此時就可以考慮創(chuàng)建一個全新的View來實現(xiàn)我們所需要的功能。創(chuàng)建一個全新View實現(xiàn)自定義控件,無非分成這么幾步:
Ⅰ、在OnMeasure()方法中,測量自定義控件的大小,使自定義控件能夠自適應布局各種各樣的需求。
?、?、在OnDraw()方法中,利用哼哈二將(Canvas與Paint)來繪制要顯示的內(nèi)容。
?、?、在OnLayout()方法中來確定控件顯示位置。
?、?、在OnTouchEvent()方法處理控件的觸摸事件。
相應的思維導圖如下:
多說無益,我們通過幾個小案例,來講解到底如何實現(xiàn)自定義控件。
一、一個帶有比例進度的環(huán)形控件
首先看一下這個控件的示意圖:
通過這個簡單的示意圖,我們對于項目所完成的比例,就一目了然了。通過這個簡單的示意圖,我們可以很快速的把這個圖形分成三個部分。Ⅰ、外層的環(huán),Ⅱ、里面的園,三、相應文字。有了這個思路以后,我們只需要在onDraw()方法中一個個進行繪制罷了。我這里為了簡單起見,把這個控件的寬度設(shè)置為屏幕的寬度。
首先,還是老樣子,為自定義控件設(shè)置一些自定義屬性,便于調(diào)用者對其進行擴展,自定義屬性的設(shè)置代碼為:
<declare-styleable name="circleView"> <attr name="textSize" format="dimension" /> <attr name="text" format="string" /> <attr name="circleColor" format="color" /> <attr name="arcColor" format="color" /> <attr name="textColor" format="color" /> <attr name="startAngle" format="integer" /> <attr name="sweepAngle" format="integer" /> </declare-styleable>
?、?、textSize——對應中間文本文字的大小
?、颉ext——對應中間文本
?、?、circleColor——對應內(nèi)圓的顏色
?、?、arcColor——對應外環(huán)的顏色
Ⅴ、textColor——對應文本的顏色
?、觥tartAngle——對應外環(huán)的起始角度
?、鳌weepAngle——對應外環(huán)掃描角度
緊接著,就是在自定義控件的初始化方法中來獲取這些自定義屬性:
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.circleView); if (ta != null) { circleColor = ta.getColor(R.styleable.circleView_circleColor, 0); arcColor = ta.getColor(R.styleable.circleView_arcColor, 0); textColor = ta.getColor(R.styleable.circleView_textColor, 0); textSize = ta.getDimension(R.styleable.circleView_textSize, 50); text = ta.getString(R.styleable.circleView_text); startAngle = ta.getInt(R.styleable.circleView_startAngle, 0); sweepAngle = ta.getInt(R.styleable.circleView_sweepAngle, 90); ta.recycle(); }
這里在多說一嘴子,為了釋放更多的資源,一定要將TypedArray這個對象進行資源的釋放。
接下來,在OnMeasure()方法中,初始化要繪制畫筆樣式,獲取屏幕的寬度,計算中間位置的坐標,以及指定外接矩形的寬高代碼如下:
private void init() { int length = Math.min(width, height); mCircleXY = length / 2; mRadius = length * 0.5f / 2; mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mCirclePaint.setColor(circleColor); mRectF = new RectF(length * 0.1f, length * 0.1f, length * 0.9f, length * 0.9f); mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mArcPaint.setColor(arcColor); mArcPaint.setStyle(Paint.Style.STROKE); mArcPaint.setStrokeWidth((width * 0.1f)); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setTextSize(textSize); mTextPaint.setColor(textColor); mTextPaint.setTextAlign(Align.CENTER); }
將我們設(shè)置的自定義屬性,設(shè)置給不同筆刷。
做了這么多準備以后,我們所需的就是在OnDraw方法中繪制內(nèi)圓、外環(huán)與文字。代碼如下:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawSth(canvas); } private void drawSth(Canvas canvas) { canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint); canvas.drawArc(mRectF, startAngle, sweepAngle, false, mArcPaint); canvas.drawText(text, 0, text.length(), mCircleXY, mCircleXY + textSize / 4, mTextPaint); }
需要指出的是,畫環(huán)形需要在一個指定矩形區(qū)域畫取,并且要指定起始角度,掃描角度,這些變量都是自定義屬性?!?/p>
這個自定義控件的最終的運行效果為:
二、動態(tài)條形圖
條形圖,應該在圖表展示系統(tǒng)中再普通不過的一種圖標了。靜態(tài)示意圖就像這樣:
通過這個簡單的示意圖,我們所需要做的是,繪制一個個的矩形,然后將每一個矩形x坐標平移一定的單位,我們還看到這么一個現(xiàn)象:每個條形圖的起始點不一致,而終止點是一樣的。起始坐標用個Random(隨機函數(shù))剛剛好,實現(xiàn)靜態(tài)條形圖就是這樣的思路:
首先,在OnMeasure()方法中計算出每個矩形寬與高,這里為了方便起見,每個矩形默認的高為屏幕的高,每個矩形的寬這里定義為屏幕的寬度乘以80%除以矩形的個數(shù)。然后根據(jù)寬與高來初始化筆刷(Paint)。為什么要根據(jù)寬與高來初始化筆刷了,這里我為了使自定義View更加的逼真,我這里使用LinearGradient(線性渲染器)進行了渲染,這個對象需要使用矩形寬與高。需要指出來的是這個自定義控件是動態(tài)的,我只需要onDraw方法不斷發(fā)生重繪,這里為了防止控件刷新太快,我這里每隔300毫秒刷新視圖。這個控件的完整源代碼如下:
public class VolumneView extends View { private Paint mPaint; private int mCount; private int mWidth; private int mRectHeight; private int mRectWidth; private LinearGradient mLinearGradient; private double mRandom; private float mcurrentHeight; public static final int OFFSET = 5; public VolumneView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(context, attrs); } private void initView(Context context, AttributeSet attrs) { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.FILL); TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.volumneView); if (ta != null) { mCount = ta.getInt(R.styleable.volumneView_count, 6); ta.recycle(); } } public VolumneView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public VolumneView(Context context) { this(context, null); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = getMeasuredWidth(); mRectHeight = getMeasuredHeight(); mRectWidth = (int) (mWidth * 0.8 / mCount); mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight, Color.GREEN, Color.YELLOW, TileMode.CLAMP); mPaint.setShader(mLinearGradient); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); for (int i = 0; i < mCount; i++) { mRandom = Math.random(); mcurrentHeight = (float) (mRectHeight * mRandom); float width = (float) (mWidth * 0.4 / 2 + OFFSET); canvas.drawRect(width + i * mRectWidth, mcurrentHeight, width + (i + 1) * mRectWidth, mRectHeight, mPaint); } postInvalidateDelayed(300); }
最終,運行效果如下:
后記,通過這兩個簡單控件,相信大家對于自定義控件基本步驟有說了解,當然,要真正做好自定義控件的話,我們還需要按這個步驟一步步的來,加油!
- Android控件系列之ImageView使用方法
- Android控件系列之TextView使用介紹
- android圖像繪制(四)自定義一個SurfaceView控件
- Android開發(fā)技巧之在a標簽或TextView控件中單擊鏈接彈出Activity(自定義動作)
- Android控件之EditView常用屬性及應用方法
- Android控件ListView用法(讀取聯(lián)系人示例代碼)
- android ListView和ProgressBar(進度條控件)的使用方法
- 自己實現(xiàn)的android樹控件treeview
- android中webview控件和javascript交互實例
- Android ExpandableListView展開列表控件使用實例
相關(guān)文章
Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼)
這篇文章主要介紹了Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼),需要的朋友可以參考下2017-10-10Android?Flutter實現(xiàn)搜索的三種方式詳解
這篇文章主要為大家詳細介紹了Android?Flutter實現(xiàn)搜索的三種方式,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下2022-08-08Flutter使用Overlay與ColorFiltered新手引導實現(xiàn)示例
這篇文章主要介紹了Flutter使用Overlay與ColorFiltered新手引導實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10Android編程使用GestureDetector實現(xiàn)簡單手勢監(jiān)聽與處理的方法
這篇文章主要介紹了Android編程使用GestureDetector實現(xiàn)簡單手勢監(jiān)聽與處理的方法,簡單講述了Android手勢監(jiān)聽的原理并結(jié)合實例形式分析了GestureDetector實現(xiàn)手勢監(jiān)聽與處理的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09Android使用內(nèi)置WebView打開TextView超鏈接的實現(xiàn)方法
這篇文章主要介紹了Android使用內(nèi)置WebView打開TextView超鏈接的實現(xiàn)方法,文中給出了詳細的示例代碼,對各位Android開發(fā)者們具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03