自定義view基礎(chǔ)入門——實現(xiàn)餅狀圖
自定義view應(yīng)該是Android開發(fā)的基本功吧，最近無聊打算再重頭過一遍自定義view，今天寫的是一個比較簡單的demo了，是一個自定義的餅狀圖，我是根據(jù)自定義view教程學(xué)習(xí)的。
效果圖
其實這個自定義view還是挺簡單的，只需要讓用戶傳入一個list，然后根據(jù)list里面的數(shù)據(jù)，找出不同數(shù)據(jù)占的權(quán)重，然后在繪制扇形的過程中，上不同的色就可以了，當(dāng)然這只是一個入門級的自定義view。
核心代碼：
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;
}
}
/**
* Created by linSir
* date at 2017/5/22.
* describe: 自定義的餅狀圖
*/
public class PieView extends View {
private int[] mColors = {Color.RED, Color.BLACK, Color.BLUE, Color.GREEN, Color.YELLOW};
private float mStartAngle = 0; //初始化繪制的角度
private ArrayList<PieData> mData; //數(shù)據(jù)
private int mWidth, mHeight; //寬，高
private Paint mPaint = new Paint();
public PieView(Context context) {
super(context);
}
public PieView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint.setStyle(Paint.Style.FILL); //設(shè)置畫筆的模式為填充
mPaint.setAntiAlias(true); //設(shè)置抗鋸齒
}
@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);
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(); //刷新
}
public void setData(ArrayList<PieData> mData) {
this.mData = mData;
initData(mData);
invalidate();
}
private void initData(ArrayList<PieData> mData) {
if (null == mData || mData.size() == 0)
return;
float sumValue = 0;
for (int i = 0; i < mData.size(); i++) {
PieData pie = mData.get(i);
sumValue += pie.getValue();
int j = i % mColors.length;
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;
pie.setPercentage(percentage);
pie.setAngle(angle);
sumAngle += angle;
}
}
}
public class MainActivity extends AppCompatActivity {
private PieView mPieView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPieView = (PieView) findViewById(R.id.mPieView);
ArrayList<PieData> list = new ArrayList<PieData>();
PieData data = new PieData("test",1);
PieData data2 = new PieData("test",2);
PieData data3 = new PieData("test",1);
PieData data4 = new PieData("test",4);
list.add(data);
list.add(data2);
list.add(data3);
list.add(data4);
mPieView.setData(list);
}
}
寫到這里，我們的自定義view就寫完了，效果如上圖所示，當(dāng)然這只能算是自定義view家族中最為簡單的自定義view了，在之后的學(xué)習(xí)生活中吧，我打算總結(jié)一下自定義view的基本知識點(diǎn)，還有一些常見的問題，并且多做一些例子，大家一起討論~
