Android自定義View仿QQ等級(jí)天數(shù)進(jìn)度
最近一直都在看自定義View這一塊。差不多一個(gè)星期了吧。這個(gè)星期堅(jiān)持每天更新博客，感覺自己的技術(shù)也有點(diǎn)突破，對自定義View的計(jì)算也有了更深的認(rèn)識(shí)。
今天看到手機(jī)一個(gè)成長天數(shù)進(jìn)度的控件，覺得挺有意思的，于是想自己也寫一個(gè)。效果如下：
由圖可以知道，這里面有很多個(gè)元素，首先是背景的矩形區(qū)域，其次就是兩個(gè)環(huán)形，然后三個(gè)Text文本。其實(shí)不復(fù)雜，我們一點(diǎn)一點(diǎn)的去實(shí)現(xiàn)。
首先呢，畫矩形背景。這里用到一個(gè)RectF的類，這個(gè)類包含一個(gè)矩形的四個(gè)單精度浮點(diǎn)坐標(biāo)。矩形通過上下左右4個(gè)邊的坐標(biāo)來表示一個(gè)矩形。這些坐標(biāo)值屬性可以被直接訪問，用width（）和 height（）方法可以獲取矩形的寬和高，同時(shí)他還有構(gòu)造方法：
RectF一共有四個(gè)構(gòu)造方法：
RectF（）構(gòu)造一個(gè)無參的矩形
RectF（float left,float top,float right,float bottom）構(gòu)造一個(gè)指定了4個(gè)參數(shù)的矩形
RectF(Rect F r)根據(jù)指定的RectF對象來構(gòu)造一個(gè)RectF對象(對象的左邊坐標(biāo)不變)
RectF(Rect r)根據(jù)給定的Rect對象來構(gòu)造一個(gè)RectF對象
那么，這里使用第二個(gè)構(gòu)造方法，代碼如下：
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=getWidth();
mHeight=getHeight();
mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));
}
現(xiàn)在是矩形的背景有了，那么，還有環(huán)形跟文字又怎么去處理呢，別著急，我們先看看這個(gè)環(huán)形，我這里之所以定義兩個(gè)環(huán)形，是因?yàn)?，一個(gè)用作進(jìn)度去顯示，一個(gè)當(dāng)做背景去實(shí)現(xiàn)，好了，分別繪制兩個(gè)環(huán)形。代碼如下：
canvas.drawArc(mRectF, 90, 360, false, mButtomPaint); canvas.drawArc(mRectF, 15, 180, false, mTopPaint);
兩個(gè)環(huán)形也有了，接下來就是文字了，繪制文字我們使用canvas.DrawText方法，去繪制，具體代碼如下：
canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);
canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);
canvas.drawText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);
這下全部的效果也出來了，最后，我貼上所有的代碼：
public class MyProgress extends View {
private Paint mButtomPaint;
private Paint mTopPaint;
private Paint mTextPaint;
private Paint mSmailTextPaint;
private float mWidth;
private float mHeight;
private RectF mRectF;
public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
public MyProgress(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public MyProgress(Context context) {
super(context);
initView();
}
private void initView() {
mButtomPaint=new Paint();
mButtomPaint.setColor(Color.rgb(69, 142, 253));
mButtomPaint.setAntiAlias(true);
mButtomPaint.setStrokeWidth(10);
mButtomPaint.setStyle(Style.STROKE);
mTopPaint=new Paint();
mTopPaint.setColor(Color.parseColor("#ffffff"));
mTopPaint.setAntiAlias(true);
mTopPaint.setStrokeWidth(10);
mTopPaint.setStyle(Style.STROKE);
mTextPaint=new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setAntiAlias(true);
mTextPaint.setStrokeWidth(5);
mTextPaint.setTextSize(50);
mSmailTextPaint=new Paint();
mSmailTextPaint.setStrokeWidth(3);
mSmailTextPaint.setColor(Color.WHITE);
mSmailTextPaint.setAntiAlias(true);
mSmailTextPaint.setTextSize(15);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=getWidth();
mHeight=getHeight();
mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(mRectF, 90, 360, false, mButtomPaint);
canvas.drawArc(mRectF, 15, 180, false, mTopPaint);
float mTextWidth=mTextPaint.measureText("5.0");
float mTextSmail=mSmailTextPaint.measureText("天");
float mTextSmailButtom=mSmailTextPaint.measureText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至");
canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);
canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);
canvas.drawText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);
}
}
謝謝閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android調(diào)用第三方QQ登錄代碼分享
- Android使用SwipeListView實(shí)現(xiàn)類似QQ的滑動(dòng)刪除效果
- Android ScrollView滑動(dòng)實(shí)現(xiàn)仿QQ空間標(biāo)題欄漸變
- Android自定義View仿QQ健康界面
- Android UI設(shè)計(jì)系列之自定義ListView仿QQ空間阻尼下拉刷新和漸變菜單欄效果（8）
- Android App仿QQ制作Material Design風(fēng)格沉浸式狀態(tài)欄
- Android高仿QQ6.0側(cè)滑刪除實(shí)例代碼
- Android實(shí)現(xiàn)QQ登錄界面遇到問題及解決方法
相關(guān)文章
Android學(xué)習(xí)之Broadcast的簡單使用
這篇文章主要為大家詳細(xì)介紹了Android學(xué)習(xí)之Broadcast的簡單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Flutter 控制屏幕旋轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了Flutter 控制屏幕旋轉(zhuǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
解決Bitmap通過getWidth和getHeight獲取尺寸不符的問題
這篇文章主要介紹了解決Bitmap通過getWidth和getHeight獲取尺寸不符的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Android如何在App中啟動(dòng)系統(tǒng)鬧鐘
這篇文章主要為大家詳細(xì)介紹了Android如何在App中啟動(dòng)系統(tǒng)鬧鐘，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了 Android 圖片選擇詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android Studio之Debug運(yùn)行期代碼植入的方法
這篇文章主要介紹了Android Studio之Debug運(yùn)行期代碼植入的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了android通知欄的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了系統(tǒng)Notification及自定義Notification兩種實(shí)現(xiàn)技巧與相關(guān)操作步驟,需要的朋友可以參考下2016-08-08
Android build.gradle版本名打包配置的方法
這篇文章主要介紹了Android build.gradle版本名打包配置的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
Android系統(tǒng)對話框使用詳解(最詳細(xì))
這篇文章主要介紹了Android系統(tǒng)對話框使用詳解(最詳細(xì)),需要的朋友可以參考下2017-10-10
資源混淆有助于減小包體積，也可以提高被反編譯后閱讀代碼的難度。還可以應(yīng)對一些安全檢測機(jī)構(gòu)對于資源混淆要求。本文基于微信的Android資源混淆工具，實(shí)現(xiàn)資源混淆2021-05-05