項目中需要同步硬件設備的數(shù)據(jù)，顯示大概百分比和實時數(shù)據(jù)绪杏。自定義的控件。
簡介
@效果圖|center|160*260
- 用戶目前數(shù)量纽绍。
- 設置單位蕾久。
- 根據(jù)顏色來判斷目前所占總數(shù)的大概百分比。
特點
-
項目中使用
可以在代碼或xml中設置 當前數(shù)目和背景的顏色拌夏，當前數(shù)目和單位的字體腔彰，顏色叫编，大小。
@如圖xml|center|300*150
@代碼中|center|300*250
使用簡單霹抛，可以直接在xml中或者動態(tài)代碼中設置對應的屬性，代碼中設置的屬性會覆蓋xml中的屬性卷谈。
功能的設計
- 按照要求寬和高相同onMeasure的代碼
//測量控件的大小杯拐，以為是一個圓，所以用最小的數(shù)字作為他們的直徑的長度世蔗。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int size = Math.min(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
setMeasuredDimension(size, size);
}
- 繪制onDraw()端逼，一條直線，然后去旋轉
- 畫直線
canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, mLineLength, mPaint);
起始點為（width/2污淋，0）就是控件的中心點的正上方顶滩，坐標的-90°位置。
- 旋轉
canvas.rotate(mDrgees, getWidth() / 2, getHeight() / 2);
以控件的中心點為原點寸爆，以設定的角度去旋轉礁鲁，在for中循環(huán)執(zhí)行。
-
顏色
占有百分比和背景顏色赁豆，在for循環(huán)前設定仅醇。如下代碼
//設置未被選中的直線的顏色。
mPaint.setColor(mUnSelectColor);
for (int i = 0; i < mSumLine - mSelectLine; i++) {
canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, mLineLength, mPaint);
canvas.rotate(mDrgees, getWidth() / 2, getHeight() / 2);
}
//設置數(shù)量字體的顏色
mPaint.setColor(mNumColor);
if (!TextUtils.isEmpty(mNumShow)) {
mPaint.setTextSize(mNumTextSize);
mPaint.getTextBounds(mNumShow, 0, mNumShow.length(), mNumShowRect);
}
-
字體
設定字體的顏色魔种，和范圍析二。
//設置數(shù)量字體的顏色
mPaint.setColor(mNumColor);
if (!TextUtils.isEmpty(mNumShow)) {
mPaint.setTextSize(mNumTextSize);
mPaint.getTextBounds(mNumShow, 0, mNumShow.length(), mNumShowRect);
}
if(!TextUtils.isEmpty(mNumShow)){
canvas.drawText(mNumShow, (getWidth() / 2 - mNumShowRect.width() / 2), (getHeight() / 2 + mNumShowRect.height() / 2)
, mPaint);
}
以上就是主要的代碼實現(xiàn)。主要就是ondraw()中代碼的實現(xiàn)节预。
屬性和樣式
| 屬性 | 對應變量 | 類型 | 默認值 |
|---|---|---|---|
| 選中直線顏色 | select_color | color | Color.BLUE |
| 未選中直線顏色 | select_color | color | Color.GRAY |
| 數(shù)量字體顏色 | num_color | color | Color.BLACK |
| 單位字體顏色 | unit_color | color | Color.BLACK |
| 數(shù)量文字 | num_text | String | -- |
| 單位文字 | unit_text | String | -- |
| 數(shù)量文字大小 | num_text_size | dimension | 30px |
| 數(shù)量文字大小 | unit_text_size | dimension | 18px |
| 總直線數(shù)目 | all_line_num | integer | 36 |
| 直線長度 | line_height | dimension | 10px |
| 直線寬度 | line_width | dimension | 2px |
源碼
- 控件代碼
public class PercentageCircle extends View {
//初始化畫筆
private Paint mPaint;
//設置沒有被選中的顏色叶摄。
private int mSelectColor;
//設置選中后的顏色。
private int mUnSelectColor;
//設置數(shù)字的顏色
private int mNumColor;
//設置單位的顏色
private int mUnitColor;
//設置單位字體的大小安拟。
private float mUnitTextSize;
//設置數(shù)目字體的大小蛤吓。
private float mNumTextSize;
//總的數(shù)目
private int mSumLine;
//旋轉的角度
private float mDrgees;
//dp轉換為px。去扣。line的長度
private float mLineLength;
//line的寬度柱衔。
private float mLineWidth;
//初始化被選中的數(shù)目
private int mSelectLine = 0;
//設置控件的單位
private String mUnit;
//設置控件的單位
private String mNumShow;
//設置字體的范圍
private Rect mUnitRect;
//設置字體的范圍
private Rect mNumShowRect;
public PercentageCircle(Context context) {
this(context, null);
}
public PercentageCircle(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PercentageCircle(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//屬性集合
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PercentageCircle);
//設置沒被選中的默認的顏色為灰色。
mUnSelectColor = array.getColor(R.styleable.PercentageCircle_unselect_color, Color.GRAY);
//設置默認被選中的顏色為藍色愉棱。
mSelectColor = array.getColor(R.styleable.PercentageCircle_select_color, Color.BLUE);
//設置字體和單位的默認的顏色為灰色唆铐。
mNumColor = array.getColor(R.styleable.PercentageCircle_num_color, Color.BLACK);
mUnitColor = array.getColor(R.styleable.PercentageCircle_unit_color, Color.BLACK);
//設置字體的大小和默認值
mUnitTextSize = array.getDimensionPixelOffset(R.styleable.PercentageCircle_unit_text_size, (int) dp2px(18));
mNumTextSize = array.getDimensionPixelOffset(R.styleable.PercentageCircle_num_text_size, (int) dp2px(30));
//設置總的數(shù)目
mSumLine = array.getInt(R.styleable.PercentageCircle_all_line_num, 36);
//單位的文本
mUnit = array.getString(R.styleable.PercentageCircle_unit_text);
mNumShow = array.getString(R.styleable.PercentageCircle_num_text);
//設置直線的寬度
mLineWidth = array.getDimensionPixelOffset(R.styleable.PercentageCircle_line_width, (int) dp2px(2));
//長度
mLineLength = array.getDimensionPixelOffset(R.styleable.PercentageCircle_line_length, (int) dp2px(10));
array.recycle();
//實例化畫筆
mPaint = new Paint();
//抗鋸齒
mPaint.setAntiAlias(true);
//設置寬度
mPaint.setStrokeWidth(mLineWidth);
//設置數(shù)目字體的范圍，用來得到 字體的寬和高奔滑。
mNumShowRect = new Rect();
//設置單位字體的范圍艾岂。
mUnitRect = new Rect();
}
//測量控件的大小，以為是一個圓朋其，所以用最小的數(shù)字作為他們的直徑的長度王浴。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int size = Math.min(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
setMeasuredDimension(size, size);
}
//繪制控件
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//設置每個間隔的旋轉的角度.等于360/總數(shù)目的個數(shù)脆炎。
mDrgees = 360 / mSumLine;
Log.i("111", mDrgees + "hha");
canvas.save();
//設置被選中的直線的顏色
mPaint.setColor(mSelectColor);
for (int i = 0; i < mSelectLine; i++) {
canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, mLineLength, mPaint);
canvas.rotate(mDrgees, getWidth() / 2, getHeight() / 2);
}
//設置未被選中的直線的顏色。
mPaint.setColor(mUnSelectColor);
for (int i = 0; i < mSumLine - mSelectLine; i++) {
canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, mLineLength, mPaint);
canvas.rotate(mDrgees, getWidth() / 2, getHeight() / 2);
}
//設置數(shù)量字體的顏色
mPaint.setColor(mNumColor);
if (!TextUtils.isEmpty(mNumShow)) {
mPaint.setTextSize(mNumTextSize);
mPaint.getTextBounds(mNumShow, 0, mNumShow.length(), mNumShowRect);
}
if(!TextUtils.isEmpty(mNumShow)){
canvas.drawText(mNumShow, (getWidth() / 2 - mNumShowRect.width() / 2), (getHeight() / 2 + mNumShowRect.height() / 2)
, mPaint);
}
// canvas.drawText(mNumShow, (getWidth() / 2 - mNumShowRect.width() / 2), (getHeight() / 2 + mNumShowRect.height() / 2)
// , mPaint);
Log.i("111",mNumShow +"---"+ (getWidth() / 2 - mNumShowRect.width() / 2) + "===" + (getHeight() / 2 + mNumShowRect.height() / 2));
//設置單位字體的顏色氓辣。
mPaint.setColor(mUnitColor);
if (!TextUtils.isEmpty(mUnit)) {
mPaint.setTextSize(mUnitTextSize);
mPaint.getTextBounds(mUnit, 0, mUnit.length(), mUnitRect);
}
if(!TextUtils.isEmpty(mUnit)){
canvas.drawText(mUnit, getWidth() / 2 - mUnitRect.width() / 2, getHeight() / 2 + mNumShowRect.height() / 2
+ mUnitRect.height() / 2 + dp2px(20), mPaint);
}
canvas.restore();
}
//設置被選中的數(shù)目秒裕。
public void setSumSelect(int num) {
if (num > mSumLine) {
num = mSumLine;
}
if (num < 0) {
num = 0;
}
this.mSelectLine = num;
invalidate();
}
//設置單位文字
public void setUnit(String unit) {
if (!TextUtils.isEmpty(unit)) {
this.mUnit = unit;
}
invalidate();
}
//設置單位顏色
public void setUnitColor(int color) {
if (!TextUtils.isEmpty(mUnit)) {
this.mUnitColor = color;
}
invalidate();
}
//設置單位字體大小
public void setUnitTextSize(int size) {
if (!TextUtils.isEmpty(mUnit)) {
this.mUnitTextSize = size;
}
invalidate();
}
//設置數(shù)量的文字
public void setNumText(String numText) {
if (!TextUtils.isEmpty(numText)) {
this.mNumShow = numText;
}
invalidate();
}
//設置沒有被選中的顏色
public void setUnSelectColor(int color) {
this.mUnSelectColor = color;
}
//設置被選中的顏色
public void setSelectColor(int color) {
this.mSelectColor = color;
}
//設置數(shù)量顏色
public void setmNumColor(int color) {
if (!TextUtils.isEmpty(String.valueOf(color))) {
this.mNumColor = color;
}
invalidate();
}
//設置數(shù)量字體大小
public void setNumTextSize(int size) {
if (!TextUtils.isEmpty(String.valueOf(size))) {
this.mNumTextSize = size;
}
invalidate();
}
//設置數(shù)目
public void setNumShow(String show) {
if (!TextUtils.isEmpty(show)) {
this.mNumShow = show;
}
invalidate();
}
//設置直線的寬度。
public void setLineWidth(int width) {
this.mLineWidth = width;
}
//設置直線的高度钞啸。
public void setLineLength(int length) {
this.mLineLength = length;
}
//dp轉化為px
private float dp2px(float dpVal) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpVal, getResources().getDisplayMetrics());
}
}
- 屬性
<declare-styleable name="PercentageCircle">
<!--被選中的文字的顏色-->
<attr name="select_color" format="color"/>
<!--沒有被選中的文字的顏色-->
<attr name="unselect_color" format="color"/>
<!--數(shù)量單位的文字的顏色-->
<attr name="unit_color" format="color"/>
<!--數(shù)量文字的顏色-->
<attr name="num_color" format="color"/>
<!--數(shù)量單位的文字-->
<attr name="unit_text" format="string"/>
<!--數(shù)量的字體size大小-->
<attr name="num_text" format="string"/>
<!--數(shù)量單位的文字-->
<attr name="unit_text_size" format="dimension"/>
<!--數(shù)量的字體size大小-->
<attr name="num_text_size" format="dimension"/>
<!--總數(shù)目的直線的條數(shù)-->
<attr name="all_line_num" format="integer"/>
<!--間隔的角度的大小-->
<!--<attr name="interval_degree" format="integer"/>-->
<!--直線的寬度的大小-->
<attr name="line_width" format="dimension"/>
<!--直線的長度-->
<attr name="line_length" format="dimension"/>
</declare-styleable>
- 代碼
//可以動態(tài)的設置自定義view的屬性几蜻。也可以在xml中設置屬性。
//設置被選中的數(shù)量体斩。
percentageCircle.setSumSelect(20);
/**
* 1：可以直接在代碼中動態(tài)設置梭稚。
* 2：動態(tài)設置的會把 xml中設置的 數(shù)量和文字覆蓋掉。
*/
//設置顯示的數(shù)量絮吵。
percentageCircle.setNumShow(60+"");
//設置單位文字
percentageCircle.setUnit("口數(shù)");
percentageCircle.setUnSelectColor(Color.BLACK);
percentageCircle.setSelectColor(Color.RED);
percentageCircle.setUnitColor(Color.GREEN);
percentageCircle.setmNumColor(Color.MAGENTA);
源碼
Github的源碼地址-->PercentageCircle
使用
在model的build.gradle中添加
'compile 'com.cyy:PercentageCircle:1.0.2'
