题目见Github
通过一下午的时间做了个练习，比较复杂的就是直方图和饼图。
-
直方图
device-2017-07-13-183502.png
package com.hencoder.hencoderpracticedraw1.practice;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import java.util.Arrays;
import java.util.List;
public class Practice10HistogramView extends View {
private Paint mPaint;
private List<String> mStrings = Arrays.asList("Froyo", "GB", "ICS", "JB", "KitKat", "L", "M");
private List<Integer> mIntegerList = Arrays.asList(2, 5, 6, 40, 80, 100, 30);
private RectF rectF = new RectF();
private Rect descRectF = new Rect();
public Practice10HistogramView(Context context) {
super(context);
init();
}
public Practice10HistogramView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public Practice10HistogramView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth() - 100 - 100;
int marign = 20;
int eachWidth = (width - marign * (mStrings.size() + 1)) / mStrings.size();
canvas.drawLine(100, 30, 100, getHeight() - 160, mPaint);
canvas.drawLine(100, getHeight() - 160, getWidth() - 100, getHeight() - 160, mPaint);
mPaint.setTextSize(28);
for (int i = 0; i < mStrings.size(); i++) {
int x = eachWidth * i + marign * (i + 1) + 100;
Rect rect = new Rect();
mPaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
canvas.drawText(mStrings.get(i), x + eachWidth / 2 - rect.width() / 2, getHeight() - 120, mPaint);
}
mPaint.setTextSize(48);
String desc = "直方图";
mPaint.getTextBounds(desc, 0, desc.length(), descRectF);
canvas.drawText(desc, getWidth() / 2 - descRectF.width() / 2, getHeight() - 20, mPaint);
mPaint.setColor(Color.parseColor("#72B916"));
mPaint.setStyle(Paint.Style.FILL);
int height = getHeight() - 230;
int eachHeight = height / 100;
for (int i = 0; i < mIntegerList.size(); i++) {
rectF.left = eachWidth * i + marign * (i + 1) + 100;
rectF.top = height - eachHeight * mIntegerList.get(i);
rectF.right = rectF.left + eachWidth;
rectF.bottom = getHeight() - 160;
canvas.drawRect(rectF, mPaint);
}
}
}
- 饼图
device-2017-07-13-183511.png
package com.hencoder.hencoderpracticedraw1.practice;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import java.util.Arrays;
import java.util.List;
public class Practice11PieChartView extends View {
private Paint mPaint;
private List<Integer> mIntegerList = Arrays.asList(40, 20, 7, 3, 20, 30);
private List<String> mStrings = Arrays.asList("AAFSF", "BFDBC", "CDF", "DFE", "EDSFSDFD", "FFDCX");
private int sum = 0;
private int radius = 300;
private Paint mWhitePaint;
private RectF mRectF1 = new RectF();
private RectF mRectF2 = new RectF();
private RectF mRectF3 = new RectF();
private RectF mRectF4 = new RectF();
public Practice11PieChartView(Context context) {
super(context);
init();
}
public Practice11PieChartView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public Practice11PieChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(2);
for (int a : mIntegerList) {
sum += a;
}
mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mWhitePaint.setColor(Color.WHITE);
mWhitePaint.setStrokeWidth(3);
mWhitePaint.setTextSize(30);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mRectF1.left = getWidth() / 2 - radius + 5;
mRectF1.top = getHeight() / 2 - radius + 5;
mRectF1.right = getWidth() / 2 + radius + 5;
mRectF1.bottom = getHeight() / 2 + radius + 5;
mRectF2.left = getWidth() / 2 - radius - 5;
mRectF2.top = getHeight() / 2 - radius + 5;
mRectF2.right = getWidth() / 2 + radius - 5;
mRectF2.bottom = getHeight() / 2 + radius + 5;
mRectF3.left = getWidth() / 2 - radius - 5;
mRectF3.top = getHeight() / 2 - radius - 5;
mRectF3.right = getWidth() / 2 + radius - 5;
mRectF3.bottom = getHeight() / 2 + radius - 5;
mRectF4.left = getWidth() / 2 - radius + 5;
mRectF4.top = getHeight() / 2 - radius - 5;
mRectF4.right = getWidth() / 2 + radius + 5;
mRectF4.bottom = getHeight() / 2 + radius - 5;
}
private int degreeed = 0;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 综合练习
// 练习内容：使用各种 Canvas.drawXXX() 方法画饼图
for (int i = 0; i < mIntegerList.size(); i++) {
int degree = mIntegerList.get(i) * 360 / sum;
int red = (int) (Math.random() * 255);
int green = (int) (Math.random() * 255);
int blue = (int) (Math.random() * 255);
mPaint.setColor(Color.rgb(red, green, blue));
if (degreeed < 180) {
int centerDegree = degreeed + degree / 2;
if (degreeed < 90) {
float startX = (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius) + getWidth() / 2;
float startY = (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius) + getHeight() / 2;
float endX = startX + 25;
float endY = startY + 25;
canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
canvas.drawLine(endX, endY, endX + 70, endY, mWhitePaint);
canvas.drawText(mStrings.get(i), endX + 80, endY, mWhitePaint);
canvas.drawArc(mRectF1, degreeed, degree, true, mPaint);
} else {
float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
float startY = (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius) + getHeight() / 2;
float endX = startX - 25;
float endY = startY + 25;
canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
canvas.drawLine(endX, endY, endX - 70, endY, mWhitePaint);
Rect rect = new Rect();
mWhitePaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
canvas.drawText(mStrings.get(i), endX - 80 - rect.width(), endY, mWhitePaint);
canvas.drawArc(mRectF2, degreeed, degree, true, mPaint);
}
} else {
int centerDegree = degreeed + degree / 2;
if (degreeed < 270) {
float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
float startY = getHeight() / 2 + (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius);
float endX = startX - 25;
float endY = startY - 25;
canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
canvas.drawLine(endX, endY, endX - 70, endY, mWhitePaint);
Rect rect = new Rect();
mWhitePaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
canvas.drawText(mStrings.get(i), endX - 80 - rect.width(), endY, mWhitePaint);
canvas.drawArc(mRectF3, degreeed - 360, degree, true, mPaint);
} else {
float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
float startY = getHeight() / 2 + (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius);
float endX = startX + 25;
float endY = startY - 25;
canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
canvas.drawLine(endX, endY, endX + 70, endY, mWhitePaint);
canvas.drawText(mStrings.get(i), endX + 80, endY, mWhitePaint);
canvas.drawArc(mRectF4, degreeed - 360, degree, true, mPaint);
}
}
degreeed += degree;
}
mPaint.setColor(Color.BLACK);
}
}
