Android自定義View實(shí)現(xiàn)圓環(huán)交替效果
下面請(qǐng)先看效果圖:
看上去是不很炫的樣子,它的實(shí)現(xiàn)上也不是很復(fù)雜,重點(diǎn)在與onDraw()
方法的繪制。
首先是我們的attrs文件:
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" format="color"/> <attr name="secondColor" format="color"/> <attr name="circleWidth" format="dimension"/> <attr name="speed" format="integer"/> <declare-styleable name="CustomView"> <attr name="firstColor" /> <attr name="secondColor" /> <attr name="circleWidth" /> <attr name="speed" /> </declare-styleable> </resources>
接下來(lái)是我們重寫(xiě)View
類(lèi)的自定義View
類(lèi):
public class MySelfCircleView extends View { /* * 第一圈顏色 */ int firstColor; /* * 第二圈顏色 */ int secondColor; /* * 圓的寬度 */ int circleWidth; /* * 速率 */ int speed; /* * 畫(huà)筆 */ Paint mPaint; /* * 進(jìn)度 */ int mProgress; /* * 是否切換標(biāo)志 */ boolean isNext; public MySelfCircleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0); int n = typedArray.getIndexCount(); for(int i=0; i<n; i++){ int attr = typedArray.getIndex(i); switch (attr) { case R.styleable.CustomView_firstColor: firstColor = typedArray.getColor(attr, Color.RED); break; case R.styleable.CustomView_secondColor: secondColor = typedArray.getColor(attr, Color.RED); break; case R.styleable.CustomView_circleWidth: circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics())); break; case R.styleable.CustomView_speed: speed = typedArray.getInt(attr, 20); break; } } typedArray.recycle(); mPaint = new Paint(); new Thread(new Runnable() { @Override public void run() { while (true) { mProgress++; if (mProgress == 360) { mProgress = 0; if (!isNext) isNext = true; else isNext = false; } postInvalidate(); try { Thread.sleep(speed); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } public MySelfCircleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MySelfCircleView(Context context) { this(context, null); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo) int radius = centre - circleWidth / 2;// 半徑 mPaint.setStrokeWidth(circleWidth); // 設(shè)置圓環(huán)的寬度 mPaint.setAntiAlias(true); // 消除鋸齒 mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心 RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限 if (!isNext) {// 第一顏色的圈完整,第二顏色跑 mPaint.setColor(firstColor); // 設(shè)置圓環(huán)的顏色 canvas.drawCircle(centre, centre, radius, mPaint); // 畫(huà)出圓環(huán) mPaint.setColor(secondColor); // 設(shè)置圓環(huán)的顏色 canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 } else { mPaint.setColor(secondColor); // 設(shè)置圓環(huán)的顏色 canvas.drawCircle(centre, centre, radius, mPaint); // 畫(huà)出圓環(huán) mPaint.setColor(firstColor); // 設(shè)置圓環(huán)的顏色 canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 } } }
最后是我們的布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.myselfview.view.MySelfCircleView android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="20dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" zhy:circleWidth="15dp" zhy:firstColor="#D4F668" zhy:secondColor="#2F9DD2" zhy:speed="10" /> <com.example.myselfview.view.MySelfCircleView android:layout_width="200dp" android:layout_height="200dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" zhy:circleWidth="24dp" android:layout_marginBottom="40dp" zhy:firstColor="#16A3FA" zhy:secondColor="#D20F02" zhy:speed="5" /> </RelativeLayout>
總結(jié)
好了,到這里我們的效果就算大工告成,感興趣的朋友可以寫(xiě)寫(xiě)看,個(gè)人感覺(jué)自定義View需要大量的練習(xí),才能為我所用。希望本文對(duì)大家開(kāi)發(fā)Android能有所幫助。
- Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫(huà)View效果的思路代碼
- Android自定義View實(shí)現(xiàn)圓環(huán)進(jìn)度條
- Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
- Android自定義view實(shí)現(xiàn)圓環(huán)效果實(shí)例代碼
- android自定義View實(shí)現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動(dòng)畫(huà)
- Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開(kāi)發(fā)筆記之:在ImageView上繪制圓環(huán)的實(shí)現(xiàn)方法
- Android自定義view實(shí)現(xiàn)半圓環(huán)效果
相關(guān)文章
Android編程判斷當(dāng)前指定App是否在前臺(tái)的方法
這篇文章主要介紹了Android編程判斷當(dāng)前指定App是否在前臺(tái)的方法,涉及Android針對(duì)進(jìn)程操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Flutter實(shí)現(xiàn)仿微信分享功能的示例代碼
Flutter 用來(lái)快速開(kāi)發(fā) Android iOS平臺(tái)應(yīng)用,在Flutter 中,通過(guò) fluwx或者fluwx_no_pay 插件可以實(shí)現(xiàn)微信分享功能,本文將具體介紹實(shí)現(xiàn)的示例代碼,需要的可以參考一下2022-01-01Android源碼學(xué)習(xí)之工廠方法模式應(yīng)用及優(yōu)勢(shì)介紹
工廠方法模式定義:定義一個(gè)用于創(chuàng)建對(duì)象的接口,讓子類(lèi)決定實(shí)例化哪一個(gè)類(lèi)。工廠方法使一個(gè)類(lèi)的實(shí)例化延遲到其子類(lèi),感興趣的朋友可以了解下哦2013-01-01Android App后臺(tái)服務(wù)報(bào)告工作狀態(tài)實(shí)例
這篇文章主要介紹了Android App后臺(tái)服務(wù)報(bào)告工作狀態(tài)實(shí)例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06Android SDK Manager國(guó)內(nèi)無(wú)法更新的解決方案
本文主要介紹Android SDK Manager國(guó)內(nèi)無(wú)法更新的解決方案,這里提供了解決方法,及簡(jiǎn)單說(shuō)明實(shí)現(xiàn)流程,有興趣的小伙伴可以參考下2016-09-09Android 推送原理(Android Push Notification)詳解
這篇文章主要介紹了Android 推送原理(Android Push Notification)詳解的相關(guān)資料,這里對(duì)Android 推送的原理做了簡(jiǎn)單的介紹,需要的朋友可以參考下2016-11-11Android仿支付寶笑臉?biāo)⑿录虞d動(dòng)畫(huà)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android仿支付寶笑臉?biāo)⑿录虞d動(dòng)畫(huà)的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11快速解決Android7.0下沉浸式狀態(tài)欄變灰的問(wèn)題
下面小編就為大家分享一篇快速解決Android7.0下沉浸式狀態(tài)欄變灰的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01Android Recyclerview實(shí)現(xiàn)上拉加載更多功能
在項(xiàng)目中使用列表的下拉刷新和上拉加載更多是很常見(jiàn)的功能。下文給大家?guī)?lái)了Android Recyclerview上拉加載更多功能,需要的朋友參考下吧2017-05-05Android通過(guò)startService播放背景音樂(lè)
這篇文章主要介紹了Android通過(guò)startService播放背景音樂(lè)簡(jiǎn)單示例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12