自定義View 圓環和圓環進度條

2021-08-05 22:49:56 字數 3460 閱讀 2168

可能小夥伴們感覺自定義view很高深，其實大家用多了別人的輪子，研究別人的輪子，自己也要學著造輪子，那就用最簡單的練練手，教小夥伴們自定義view的一些步驟，這可能是小夥伴們最需要的。

自定義圓環

import android.content.context;


import android.content.res.typedarray;


import android.graphics.canvas;


import android.graphics.color;


import android.graphics.paint;


import android.util.attributeset;


import android.view.view;


import org.w3c.dom.attr;


import example.com.mvpdesign.r;


/** * created by qiang.lin


*/public


class


ringview


extends


view 


public


ringview(context context, attributeset attrs) 


//看了很多自定義view，也用了很多自定義view，view是會自動//呼叫帶有兩個引數的構造器，但是我看了大神的的**，基本上都是指//向三個構造器。


public


ringview(context context, attributeset attrs, int defstyleattr) 


//這裡獲取canvas的高度和寬度，沒有使用到，但是經常會使用到，可以研究下。


@override


protected


void


onmeasure(int widthmeasurespec, int heightmeasurespec) 


@override


protected


void


ondraw(canvas canvas) 


/*** 根據手機的解析度從 dp 的單位 轉成為 px(畫素)


*/public


static


intdip2px(context context, float dpvalue) 


}
配置檔案

name="ringview">


name="ringcolor"


format="color">


attr>


name="ringtext"


format="dimension">


attr>


declare-styleable>
配置檔案在最頂部加上這句

這裡乙個自定義的圓環就完成了。下面來看看自定義圓環進度條。

import android.content.context;


import android.content.res.typedarray;


import android.graphics.canvas;


import android.graphics.color;


import android.graphics.paint;


import android.graphics.rectf;


import android.graphics.typeface;


import android.util.attributeset;


import android.view.view;


import example.com.mvpdesign.r;


/** * created by qiang.lin


*/public


class


roundprogressbar


extends


view 


public


roundprogressbar(context context, attributeset attrs) 


public


roundprogressbar(context context, attributeset attrs, int defstyleattr) 


@override


protected


void


onmeasure(int widthmeasurespec, int heightmeasurespec) 


@override


protected


void


ondraw(canvas canvas) 


//畫進度條


mpaint.setstrokewidth(roundwidth);


mpaint.setcolor(progresscolor);


//畫圓形的區域。


rectf oval=new rectf(center-radius,center-radius,center+radius,center+radius);


mpaint.setstyle(paint.style.stroke);


canvas.drawarc(oval, 90, -360 * progress / max, false, mpaint);  //根據進度畫圓弧


invalidate();


}public


intgettextsize() 


//通過**來設定字型大小。


public


void


settextsize(int textsize) 


}
name="roundprogressbar">


name="textsize"


format="dimension">


attr>


name="ringcolors"


format="color">


attr>


name="progesscolor"


format="color">


attr>


name="ringwidth"


format="dimension">


attr>


name="textcolor"


format="color">


attr>


declare-styleable>
完事，自定義view——圓環進度條就這樣完成了。

總結：自定義view步驟：

1、繼承view

2、重寫onmeasure和ondraw方法。

3、在呼叫三個引數構造器，在裡面做初始化自定義屬性，前提需在attrs xml檔案下建立自定義屬性。並例項化paint

4、在ondraw方法裡開始你的畫畫，一大堆數學問題等著你，就是算。

5、設定你的屬性的get和set方法，然後再set方法裡 invalidate();，好的自定義view就這樣完成了。

自定義view （三） 用view圓環進度條

參考的鴻揚大神的部落格 部落格位址 做了乙個圓環進度條，感覺可以深入下，做乙個環形的餅狀圖 照著他的 敲了一遍，初步理解了，裡面給了非常詳細的注釋，主要看 步驟還是一樣 1 自定義view的屬性 2 在view的構造方法中獲得我們自定義的屬性 3 重寫onmesure 4 重寫ondraw 新建vi...

Vue React圓環進度條

資料展示，一直是各行各業樂此不疲的需求，具體到前端開發行業，則是各種各種圖表資料展示，各種 資料展示，煩不勝煩 繁不勝繁 前幾天剛做了折線圖 柱狀圖 餅狀圖之類的圖表資料展示效果，今天又碰到了類似圓環進度條的展示效果。天天跟資料打交道，天天跟介面打交道，專案做了不少，菜逼還是菜逼，都是淚啊！其實說白...

自定義view 進度條

廢話不多說先看效果圖 效果圖 原諒模擬器顯示的不好看，為了錄gif圖，只能用模擬器 乙個背景，乙個進度，乙個進度值顯示，進度條與文字顯示的高度是1 2，其中用到了drawroundrect用來畫帶圓角的矩形，空心與實心都是paint的屬性設定的，drawtext用來畫文字 注意點 1.進度條進度滿進...