Android自定義View仿QQ健康界面
最近一直在學(xué)習(xí)自定義View相關(guān)的知識(shí)，今天給大家?guī)淼氖荙Q健康界面的實(shí)現(xiàn)。先看效果圖：
可以設(shè)置數(shù)字顏色，字體顏色，運(yùn)動(dòng)步數(shù)，運(yùn)動(dòng)排名，運(yùn)動(dòng)平均步數(shù)，虛線下方的藍(lán)色指示條的長度會(huì)隨著平均步數(shù)改變而進(jìn)行變化。整體效果還是和QQ運(yùn)動(dòng)健康界面很像的。
自定義View四部曲，一起來看看怎么實(shí)現(xiàn)的。
1.自定義view的屬性：
<?xml version="1.0" encoding="utf-8"?> <resources> //自定義屬性名,定義公共屬性 <attr name="titleSize" format="dimension"></attr> <attr name="titleText" format="string"></attr> <attr name="titleColor" format="color"></attr> <attr name="outCircleColor" format="color"></attr> <attr name="inCircleColor" format="color"></attr> <attr name="lineColor" format="color"></attr> //自定義View的屬性 <declare-styleable name="MyQQHealthView"> <attr name="titleColor"></attr> <attr name="lineColor"></attr> </declare-styleable> </resources>
依次定義了字體顏色，線的顏色2個(gè)屬性，format是該屬性的取值類型。
然后就是在布局文件中申明我們的自定義view：
<com.example.tangyangkai.myview.MyQQHealthView android:id="@+id/myQQView" android:layout_width="match_parent" android:layout_height="530dp" android:layout_margin="15dp" myQQ:lineColor="@color/font_tips" myQQ:titleColor="@color/textcolor" myQQ:titleSize="50dp" />
自定義view的屬性我們可以自己進(jìn)行設(shè)置，記得最后要引入我們的命名空間，
xmlns:app=”http://schemas.Android.com/apk/res-auto”
2.獲取自定義view的屬性：
public MyQQHealthView(Context context) {
this(context, null);
}
public MyQQHealthView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyQQHealthView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//獲取我們自定義的樣式屬性
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyQQHealthView, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.MyQQHealthView_titleColor:
// 默認(rèn)顏色設(shè)置為黑色
textColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyQQHealthView_lineColor:
lineColor = array.getColor(attr, Color.BLACK);
break;
}
}
array.recycle();
init();
}
自定義View一般需要實(shí)現(xiàn)一下三個(gè)構(gòu)造方法，這三個(gè)構(gòu)造方法是一層調(diào)用一層的，屬于遞進(jìn)關(guān)系。因此，我們只需要在最后一個(gè)構(gòu)造方法中來獲得View的屬性了。
第一步通過theme.obtainStyledAttributes()方法獲得自定義控件的主題樣式數(shù)組；
第二步就是遍歷每個(gè)屬性來獲得對應(yīng)屬性的值，也就是我們在xml布局文件中寫的屬性值；
第三步就是在循環(huán)結(jié)束之后記得調(diào)用array.recycle()來回收資源；
第四步就是進(jìn)行一下必要的初始化，不建議在onDraw的過程中去實(shí)例化對象，因?yàn)檫@是一個(gè)頻繁重復(fù)執(zhí)行的過程，new是需要分配內(nèi)存空間的，如果在一個(gè)頻繁重復(fù)的過程中去大量地new對象會(huì)造成內(nèi)存浪費(fèi)的情況。
3.重寫onMesure方法確定view大?。?
當(dāng)你沒有重寫onMeasure方法時(shí)候，系統(tǒng)調(diào)用默認(rèn)的onMeasure方法：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
這個(gè)方法的作用是：測量控件的大小。其實(shí)Android系統(tǒng)在加載布局的時(shí)候是由系統(tǒng)測量各子View的大小來告訴父View我需要占多大空間，然后父View會(huì)根據(jù)自己的大小來決定分配多大空間給子View。MeasureSpec的specMode模式一共有三種：
MeasureSpec.EXACTLY：父視圖希望子視圖的大小是specSize中指定的大?。灰话闶窃O(shè)置了明確的值或者是MATCH_PARENT
MeasureSpec.AT_MOST：子視圖的大小最多是specSize中的大?。槐硎咀硬季窒拗圃谝粋€(gè)最大值內(nèi)，一般為WARP_CONTENT
MeasureSpec.UNSPECIFIED：父視圖不對子視圖施加任何限制，子視圖可以得到任意想要的大小；表示子布局想要多大就多大，很少使用。
想要設(shè)置WARP_CONTENT，只要重寫onMeasure方法:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
//如果布局里面設(shè)置的是固定值,這里取布局里面的固定值;如果設(shè)置的是match_parent,則取父布局的大小
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
//如果布局里面沒有設(shè)置固定值,這里取布局的寬度的1/2
width = widthSize * 1 / 2;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
//如果布局里面沒有設(shè)置固定值,這里取布局的高度的3/4
height = heightSize * 3 / 4;
}
widthBg = width;
heightBg = height;
setMeasuredDimension(width, height);
startAnim();
}
我這里為了不讓布局顯得過小，所以WARP_CONTENT分別取寬的1/2,高的3/4,具體情況因人而異。
4.重寫onDraw方法進(jìn)行繪畫：
界面比較復(fù)雜，我們從上到下，一步一步來：
//繪制最底層的背景 radiusBg = widthBg / 20; pathBg.moveTo(0, heightBg); pathBg.lineTo(0, radiusBg); pathBg.quadTo(0, 0, radiusBg, 0); pathBg.lineTo(widthBg - radiusBg, 0); pathBg.quadTo(widthBg, 0, widthBg, radiusBg); pathBg.lineTo(widthBg, heightBg); pathBg.lineTo(0, heightBg); backgroundPaint.setColor(Color.WHITE); canvas.drawPath(pathBg, backgroundPaint);
整個(gè)自定義View的最底層是一個(gè)左上，右上有弧度，左下，右下為直角的白色背景。使用canvas.drawRoundRect實(shí)現(xiàn)的矩形是四個(gè)角都有弧度，達(dá)不到預(yù)期。但是一階貝塞爾曲線加上二階貝塞爾曲線就能很好的實(shí)現(xiàn)這種特殊的情況。
moveTo(x,y):不會(huì)進(jìn)行繪制，只用于移動(dòng)移動(dòng)畫筆，確定起點(diǎn)坐標(biāo)，與其他方法配合使用；
lineTo(x,y):一階貝塞爾曲線，坐標(biāo)為終點(diǎn)坐標(biāo)，配合moveTo方法用于進(jìn)行直線繪制；
quadTo (x1,y1,x2,y2):二階貝塞爾曲線，(x1,y1) 為控制點(diǎn)，(x2,y2)為結(jié)束點(diǎn)，用于繪制圓滑的曲線；
最后調(diào)用canvas.drawPath(path,paint)即可達(dá)到這種效果
//繪制圓弧 arcPaint.setStrokeWidth(widthBg / 20); //設(shè)置空心 arcPaint.setStyle(Paint.Style.STROKE); //防抖動(dòng) arcPaint.setDither(true); //連接處為圓弧 arcPaint.setStrokeJoin(Paint.Join.ROUND); //畫筆的筆觸為圓角 arcPaint.setStrokeCap(Paint.Cap.ROUND); arcPaint.setColor(lineColor); //圓弧范圍 arcRect = new RectF(widthBg * 1 / 4, widthBg * 1 / 4, widthBg * 3 / 4, widthBg * 3 / 4); //繪制背景大圓弧 canvas.drawArc(arcRect, 120, 300, false, arcPaint); arcPaint.setColor(textColor); //繪制分?jǐn)?shù)小圓弧 canvas.drawArc(arcRect, 120, arcNum, false, arcPaint);
繪制圓弧先確定圓弧的范圍，傳入的四個(gè)參數(shù)就是圓弧所在圓的外接矩形的坐標(biāo)。canvas.drawArc的五個(gè)參數(shù)依次是圓弧范圍；開始的角度；圓弧的角度；第四個(gè)為True時(shí)，在繪制圓弧時(shí)會(huì)將圓心包括在內(nèi)，通常用來繪制扇形，我們這里選false；圓弧的畫筆
//繪制圓圈內(nèi)的數(shù)字
textPaint.setColor(textColor);
textPaint.setTextSize(widthBg / 10);
canvas.drawText(String.valueOf(walkNum), widthBg * 3 / 8, widthBg * 1 / 2 + 20, textPaint);
//繪制名次
textPaint.setTextSize(widthBg / 15);
canvas.drawText(String.valueOf(rankNum), widthBg * 1 / 2 - 15, widthBg * 3 / 4 + 10, textPaint);
//繪制其他文字
textPaint.setColor(lineColor);
textPaint.setTextSize(widthBg / 25);
canvas.drawText("截止13:45已走", widthBg * 3 / 8 - 10, widthBg * 5 / 12 - 10, textPaint);
canvas.drawText("好友平均2781步", widthBg * 3 / 8 - 10, widthBg * 2 / 3 - 20, textPaint);
canvas.drawText("第", widthBg * 1 / 2 - 50, widthBg * 3 / 4 + 10, textPaint);
canvas.drawText("名", widthBg * 1 / 2 + 30, widthBg * 3 / 4 + 10, textPaint);
//繪制圓圈外的文字
canvas.drawText("最近7天", widthBg * 1 / 15, widthBg, textPaint);
myaverageTxt = String.valueOf(averageSize);
canvas.drawText("平均", widthBg * 10 / 15 - 15, widthBg, textPaint);
canvas.drawText(myaverageTxt, widthBg * 11 / 15, widthBg, textPaint);
canvas.drawText("步/天", widthBg * 12 / 15 + 20, widthBg, textPaint);
繪制文字就稍微簡單點(diǎn)，這里計(jì)算好各自的位置即可
//繪制虛線
linePaint.setStyle(Paint.Style.STROKE);
linePaint.setStrokeWidth(2);
linePaint.setColor(lineColor);
linePath.moveTo(widthBg * 1 / 15, widthBg + 80);
linePath.lineTo(widthBg * 14 / 15, widthBg + 80);
linePaint.setPathEffect(effects);
canvas.drawPath(linePath, linePaint);
rectSize = widthBg / 12;
rectAgHeight = widthBg / 10;
//繪制虛線上的圓角豎線
for (int i = 0; i < FourActivity.sizes.size(); i++) {
rectPaint.setStrokeWidth(widthBg / 25);
rectPaint.setStyle(Paint.Style.STROKE);
rectPaint.setStrokeJoin(Paint.Join.ROUND);
rectPaint.setStrokeCap(Paint.Cap.ROUND);
float startHeight = widthBg + 90 + rectAgHeight;
rectPath.moveTo(rectSize, startHeight);
double percentage = Double.valueOf(FourActivity.sizes.get(i)) / Double.valueOf(averageSize);
double height = percentage * rectAgHeight;
rectPath.lineTo(rectSize, (float) (startHeight - height));
rectPaint.setColor(textColor);
canvas.drawPath(rectPath, rectPaint);
//繪制下方的文字
textPaint.setColor(lineColor);
canvas.drawText("0" + (i + 1) + "日", rectSize - 25, startHeight + 50, textPaint);
rectSize += widthBg / 7;
}
DashPathEffect的作用就是將Path的線段虛線化。構(gòu)造函數(shù)為DashPathEffect(float[] intervals, float offset)，其中intervals為虛線的ON和OFF數(shù)組，該數(shù)組的length必須大于等于2，float[0] ，float[1] 依次代表第一條實(shí)線與第一條虛線的長度，如果數(shù)組后面不再有數(shù)據(jù)則重復(fù)第一個(gè)數(shù)以此往復(fù)循環(huán)。offset為繪制時(shí)的偏移量。
DashPathEffect effects = new DashPathEffect(new float[]{5,5}, 1);
然后將這個(gè)實(shí)例作為linePaint.setPathEffect()的參數(shù)即可。繪制下方文字寫的是一個(gè)簡單的循環(huán)，然后豎線的長度是根據(jù)步數(shù)數(shù)組大小來進(jìn)行計(jì)算的。示例圖中改變平均步數(shù)以后，豎線的長度也進(jìn)行了變化。
//繪制底部波紋
weavPaint.setColor(textColor);
weavPath.moveTo(0, heightBg);
weavPath.lineTo(0, heightBg * 10 / 12);
weavPath.cubicTo(widthBg * 1 / 10, heightBg * 10 / 12, widthBg * 3 / 10, heightBg * 11 / 12, widthBg, heightBg * 10 / 12);
weavPath.lineTo(widthBg, heightBg);
weavPath.lineTo(0, heightBg);
canvas.drawPath(weavPath, weavPaint);
//繪制底部文字
weavPaint.setColor(Color.WHITE);
weavPaint.setTextSize(widthBg / 20);
canvas.drawText("成績不錯(cuò),繼續(xù)努力喲!", widthBg * 1 / 10 - 20, heightBg * 11 / 12 + 50, weavPaint);
底部水波紋的實(shí)現(xiàn)使用的是三階貝塞爾曲線：
cubicTo(x1, y1, x2, y2, x3, y3)：三階貝塞爾曲線， (x1,y1) 為控制點(diǎn)，(x2,y2)為控制點(diǎn)，(x3,y3) 為結(jié)束點(diǎn)，用于繪制復(fù)雜的曲線。
關(guān)于重寫onDraw方法，個(gè)人建議就是最好在本子上將需要完成的自定義view大致輪廓畫下來，標(biāo)注好坐標(biāo)與位置，計(jì)算一下高寬。然后根據(jù)繪制的自定義View，從上到下，從外到內(nèi)，一步一步進(jìn)行繪制。真的很實(shí)用，這樣邏輯清晰，層次分明，對你寫代碼很有幫助。
5.動(dòng)畫的實(shí)現(xiàn)：
private void startAnim() {
//步數(shù)動(dòng)畫的實(shí)現(xiàn)
ValueAnimator walkAnimator = ValueAnimator.ofInt(0, mySize);
walkAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
walkNum = (int) animation.getAnimatedValue();
postInvalidate();
}
});
//排名動(dòng)畫的實(shí)現(xiàn)
ValueAnimator rankAnimator = ValueAnimator.ofInt(0, rank);
rankAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
rankNum = (int) animation.getAnimatedValue();
postInvalidate();
}
});
double size = mySize;
double avgSize = averageSize;
if (size > avgSize) {
size = avgSize;
}
//圓弧動(dòng)畫的實(shí)現(xiàn)
ValueAnimator arcAnimator = ValueAnimator.ofFloat(0, (float) (size / avgSize * 300));
arcAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
arcNum = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animSet.setDuration(3000);
animSet.playTogether(walkAnimator, rankAnimator, arcAnimator);
animSet.start();
}
這里就不得不提到屬性動(dòng)畫的優(yōu)越性了，不僅可以作用在view上，也可以作用于某個(gè)對象上。只需要設(shè)置好開始值與結(jié)束值，添加一個(gè)動(dòng)畫的監(jiān)聽，就能夠得到變化的值，再使用postInvalidate()方法，從而調(diào)用onDraw方法來進(jìn)行數(shù)值的改變。最后設(shè)置一個(gè)組合動(dòng)畫—-AnimatorSet，使三個(gè)動(dòng)畫達(dá)到同步一致的效果。
然后就是使用動(dòng)畫了，剛開始我是將這個(gè)方法寫在init()初始化函數(shù)里面，一直達(dá)不到預(yù)期的效果。后來才知道，自定義View進(jìn)行初始化的時(shí)候，組合動(dòng)畫需要的一些值：步數(shù)，排名，平均步數(shù)等還沒有傳遞過來，所以動(dòng)畫無法完成。最后我是將這個(gè)方法寫在onMeasure()方法的后面才達(dá)到效果，這里很感謝同事的提醒。
6.設(shè)置步數(shù)大小以及在Activity中的使用：
public void reSet(int mysize, int myrank, int myaverageSize) {
walkNum = 0;
arcNum = 0;
rankNum = 0;
mySize = mysize;
rank = myrank;
averageSize = myaverageSize;
startAnim();
}
將設(shè)置的值通過構(gòu)造方法傳遞過來，最后調(diào)用開啟動(dòng)畫的方法即可。對應(yīng)的Activity的代碼：
public class FourActivity extends AppCompatActivity {
private MyQQHealthView view;
public static List<Integer> sizes = new ArrayList<>();
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_four);
initview();
}
private void initview() {
view = (MyQQHealthView) findViewById(R.id.myQQView);
view.setMySize(2345);
view.setRank(11);
view.setAverageSize(5436);
sizes.add(1234);
sizes.add(2234);
sizes.add(4234);
sizes.add(6234);
sizes.add(3834);
sizes.add(7234);
sizes.add(5436);
btn = (Button) findViewById(R.id.set_btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
view.reSet(6534, 8, 4567);
}
});
}
}
自己根據(jù)情況設(shè)置想要的值就可以了。
整個(gè)流程走下來，你會(huì)發(fā)現(xiàn)其實(shí)自定義View并沒有想象之中的那么難。多加練習(xí)，熟能生巧，相信再復(fù)雜的界面也難不住我們的。
OK，下一篇自定義View再見。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)QQ登錄界面遇到問題及解決方法
- Android基于ViewDragHelper仿QQ5.0側(cè)滑界面效果
- Android應(yīng)用中使用ViewPager實(shí)現(xiàn)類似QQ的界面切換效果
- Android使用ViewDragHelper實(shí)現(xiàn)仿QQ6.0側(cè)滑界面(一)
- Android使用ViewDragHelper實(shí)現(xiàn)QQ6.X最新版本側(cè)滑界面效果實(shí)例代碼
- android 通過向viewpage中添加listview來完成滑動(dòng)效果(類似于qq滑動(dòng)界面)
- Android實(shí)現(xiàn)QQ新用戶注冊界面遇到問題及解決方法
相關(guān)文章
Android使alertDialog.builder不會(huì)點(diǎn)擊外面和按返回鍵消失的方法
本篇文章主要介紹了Android使alertDialog.builder不會(huì)點(diǎn)擊外面和按返回鍵消失的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要介紹了Android編程獲取手機(jī)屏幕分辨率大小的方法,涉及Android基于getWindowManager()方法獲取手機(jī)屏幕相關(guān)信息的使用技巧,需要的朋友可以參考下2016-02-02
Android 自定義按鈕點(diǎn)擊事件和長按事件對比
這篇文章主要介紹了 Android 自定義按鈕點(diǎn)擊事件和長按事件對比的相關(guān)資料,需要的朋友可以參考下2017-04-04
使用adb命令向Android模擬器中導(dǎo)入通訊錄聯(lián)系人的方法
這篇文章主要介紹了使用adb命令向Android模擬器中導(dǎo)入通訊錄聯(lián)系人的方法,實(shí)例分析了導(dǎo)入通訊錄存儲(chǔ)文件的技巧,需要的朋友可以參考下2015-01-01
完美解決Android Studio集成crashlytics后無法編譯的問題
下面小編就為大家?guī)硪黄昝澜鉀QAndroid Studio集成crashlytics后無法編譯的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Android自定義漂亮的圓形進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Flutter使用Overlay與ColorFiltered新手引導(dǎo)實(shí)現(xiàn)示例
這篇文章主要介紹了Flutter使用Overlay與ColorFiltered新手引導(dǎo)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Adnroid 自定義ProgressDialog加載中(加載圈)
這篇文章主要介紹了Adnroid 自定義ProgressDialog加載中(加載圈),需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了android UI繪制加減號(hào)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Android編程基于自定義控件實(shí)現(xiàn)時(shí)鐘功能的方法
這篇文章主要介紹了Android編程基于自定義控件實(shí)現(xiàn)時(shí)鐘功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了Android自定義控件的定義及時(shí)鐘功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03