安卓(Android)開發(fā)之自定義餅狀圖
先來看看效果圖
先分析餅狀圖的構(gòu)成,非常明顯,餅狀圖就是一個又一個的扇形構(gòu)成的,每個扇形都有不同的顏色,對應(yīng)的有名字,數(shù)據(jù)和百分比。
經(jīng)以上信息可以得出餅狀圖的最基本數(shù)據(jù)應(yīng)包括:名字 數(shù)據(jù)值 百分比 對應(yīng)的角度 顏色。
用戶關(guān)心的數(shù)據(jù) : 名字 數(shù)據(jù)值 百分比
需要程序計算的數(shù)據(jù): 百分比 對應(yīng)的角度
其中顏色這一項可以用戶指
public class PieData { private String name; // 名字 private float value; // 數(shù)值 private float percentage; // 百分比 private int color = 0; // 顏色 private float angle = 0; // 角度 public PieData(@NonNull String name, @NonNull float value) { this.name = name; this.value = value; } }
自定義View:
先按照自定義View流程梳理一遍(確定各個步驟應(yīng)該做的事情):
步驟 | 關(guān)鍵字 | 作用 |
1 | 構(gòu)造函數(shù) | 初始化(初始化畫筆Paint) |
2 | onMeasure | 測量View的大小(暫時不用關(guān)心) |
3 | onSizeChanged | 確定View大小(記錄當前View的寬高) |
4 | nLayout | 確定子View布局(無子View,不關(guān)心) |
5 | onDraw | 實際繪制內(nèi)容(繪制餅狀圖) |
6 | 提供接口 | 提供接口(提供設(shè)置數(shù)據(jù)的接口) |
代碼如下:
public class PieView extends View { // 顏色表 private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080, 0xFFE6B800, 0xFF7CFC00}; // 餅狀圖初始繪制角度 private float mStartAngle = 0; // 數(shù)據(jù) private ArrayList<PieData> mData; // 寬高 private int mWidth, mHeight; // 畫筆 private Paint mPaint = new Paint(); public PieView(Context context) { this(context, null); } public PieView(Context context, AttributeSet attrs) { super(context, attrs); mPaint.setStyle(Paint.Style.FILL); mPaint.setAntiAlias(true); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (null == mData) return; float currentStartAngle = mStartAngle; // 當前起始角度 canvas.translate(mWidth / 2, mHeight / 2); // 將畫布坐標原點移動到中心位置 float r = (float) (Math.min(mWidth, mHeight) / 2 * 0.8); // 餅狀圖半徑 RectF rect = new RectF(-r, -r, r, r); // 餅狀圖繪制區(qū)域 for (int i = 0; i < mData.size(); i++) { PieData pie = mData.get(i); mPaint.setColor(pie.getColor()); canvas.drawArc(rect, currentStartAngle, pie.getAngle(), true, mPaint); currentStartAngle += pie.getAngle(); } } // 設(shè)置起始角度 public void setStartAngle(int mStartAngle) { this.mStartAngle = mStartAngle; invalidate(); // 刷新 } // 設(shè)置數(shù)據(jù) public void setData(ArrayList<PieData> mData) { this.mData = mData; initDate(mData); invalidate(); // 刷新 } // 初始化數(shù)據(jù) private void initDate(ArrayList<PieData> mData) { if (null == mData || mData.size() == 0) // 數(shù)據(jù)有問題 直接返回 return; float sumValue = 0; for (int i = 0; i < mData.size(); i++) { PieData pie = mData.get(i); sumValue += pie.getValue(); //計算數(shù)值和 int j = i % mColors.length; //設(shè)置顏色 pie.setColor(mColors[j]); } float sumAngle = 0; for (int i = 0; i < mData.size(); i++) { PieData pie = mData.get(i); float percentage = pie.getValue() / sumValue; // 百分比 float angle = percentage * 360; // 對應(yīng)的角度 pie.setPercentage(percentage); // 記錄百分比 pie.setAngle(angle); // 記錄角度大小 sumAngle += angle; Log.i("angle", "" + pie.getAngle()); } }
注意:在更改了數(shù)據(jù)需要重繪界面時要調(diào)用invalidate()這個函數(shù)重新繪制。
以上就是小編為大家整理的安卓(Android)中自定義餅狀圖的制作思路,利用實例代碼實現(xiàn)餅狀圖就很簡單了,希望本文對大家開發(fā)安卓(Android)有所幫助。
相關(guān)文章
Android 狀態(tài)欄虛擬導(dǎo)航鍵透明效果的實現(xiàn)方法
這篇文章主要介紹了Android 狀態(tài)欄虛擬導(dǎo)航鍵透明效果的實現(xiàn)方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03Android實現(xiàn)創(chuàng)意LoadingView動畫效果
這篇文章主要介紹了Android實現(xiàn)創(chuàng)意LoadingView動畫效果的相關(guān)資料,需要的朋友可以參考下2016-02-02Android實現(xiàn)簡易計算器(可以實現(xiàn)連續(xù)計算)
這篇文章主要為大家詳細介紹了Android實現(xiàn)簡易計算器,可以實現(xiàn)連續(xù)計算,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-03-03Android 通過Intent使用Bundle傳遞對象詳細介紹
這篇文章主要介紹了Android 通過Intent使用Bundle傳遞對象詳細介紹的相關(guān)資料,并附實例代碼講解,具有一定的參考價值,需要的朋友可以參考下2016-11-11Android實現(xiàn)本地Service方法控制音樂播放
這篇文章主要為大家詳細介紹了Android實現(xiàn)本地Service方法控制音樂播放,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-03-03