手把手教你用Android自定义饼状图
2019年07月21日
作者:佚名
照例先上效果图
通过该例子,你能学到什么:
对Paint 深入理解,画绘制饼图,矩形,文字等
加深对canvas的API的掌握,对自定义View掌握
下面我们分七步来完成一个简单的饼形图绘制过程。
1. 重新View的构造方法
public PieView(Context context) { this(context,null); } public PieView(Context context,AttributeSet attrs) { this(context,attrs,0); } public PieView(Context context,AttributeSet attrs,int defStyleAttr) { super(context,defStyleAttr); init(); } private void init() { mPieColorList = new ArrayList<>(); mPieValue = new ArrayList<>(); mStringList = new ArrayList<>(); mPaint = new Paint(); mMaxString = ""; mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(10);//画笔宽度 mPaint.setAntiAlias(true);//抗锯齿 }
2.绘制图形
/** * 绘制饼图 * * @param canvas * @param amount */ private void drawPie(Canvas canvas,int amount) { mPaint.setColor(mCurrentColor); mPaint.setStyle(Paint.Style.FILL); int angle = (int) (360f * amount / mMaxValue); Log.d("angle","drawPie: " + angle); canvas.drawArc(oval,mStartAngle,angle,true,mPaint); mStartAngle += angle; } /** * 绘制矩形 * * @param canvas */ private void drawRect(Canvas canvas) { if (mCurrentIndex == 0) { rect = new RectF(mRectMarginLeft,mPadding,mRectMarginLeft + RECT_WIDTH,mPadding + RECT_WIDTH); canvas.drawRect(rect,mPaint); } else { rect = new RectF(mRectMarginLeft,(mCurrentIndex) * TEXT_VERTICAL_PADDING + mPadding,(mCurrentIndex) * TEXT_VERTICAL_PADDING + mPadding + RECT_WIDTH); canvas.drawRect(rect,mPaint); } } /** * 绘画文字 * * @param canvas * @param text */ private void drawText(Canvas canvas,String text) { mPaint.setColor(TEXT_COLOR); if (mCurrentIndex == 0) { canvas.drawText(text,mTextMarginLeft,mPadding + TEXT_SIZE * 0.8f - 5,mPaint); } else { canvas.drawText(text,(mCurrentIndex) * TEXT_VERTICAL_PADDING + mPadding + TEXT_SIZE * 0.8f - 5,mPaint); } }
3.Pie 实体类
public class Pie { public int PieColor; public int PieValue; public String PieString; public Pie(int pieValue,String pieString,int pieColor) { this.PieValue = pieValue; this.PieString = pieString; this.PieColor = pieColor; } }
4.xml引用
<aikaifa.canvas.widget.PieView android:layout_width="match_parent" android:layout_height="200dp" android:id="@+id/PieView" />
5.填充数据
public class MainActivity extends Activity { private ArrayList<Pie> pieArrayList = new ArrayList<>(); private String[] arr = {"C#","C","C++","JAVA","JavaScript","Object-C"}; private int[] pre = {20,30,10,20}; private PieView pieView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pieView = (PieView) findViewById(R.id.PieView); int[] pieColor = {getResources().getColor(R.color.blue),getResources().getColor(R.color.red),getResources().getColor(R.color.gray_dark),getResources().getColor(R.color.dark),getResources().getColor(R.color.colorPrimary),getResources().getColor(R.color.black_alpha_light)}; for (int i = 0; i < arr.length; i++) { Pie pie = new Pie(pre[i],arr[i],pieColor[i]); pieArrayList.add(pie); } pieView.SetPie(pieArrayList); } }
6.完整的PieView
public class PieView extends View { private Paint mPaint; //饼图和矩形的距离 private final int PIE_RECT_PADDING = getResources().getDimensionPixelSize(R.dimen.pie_rect_padding); //矩形的宽度 private final int RECT_WIDTH = getResources().getDimensionPixelSize(R.dimen.rect_width); //矩形和文字的距离 private final int RECT_TEXT_PADDING = getResources().getDimensionPixelSize(R.dimen.rect_text_padding); //文字的大小 private final int TEXT_SIZE = getResources().getDimensionPixelSize(R.dimen.text_size); //文字的垂直距离 private final int TEXT_VERTICAL_PADDING = getResources().getDimensionPixelSize(R.dimen.text_vertical_padding); //得到文字颜色 private final int TEXT_COLOR = getResources().getColor(R.color.gray_dark); //文字和控件顶部的距离 private float mPadding; //饼图的半径 private int mPieRadios; //所有数值的总和 private int mMaxValue; //饼图开始的角度 private int mStartAngle; //文字的宽度 private int mTextWidth; //控件半高 private int mControlHalfHeight; //当前索引 private int mCurrentIndex; //左边距 private int mRectMarginLeft; private int mTextMarginLeft; //当前颜色 private int mCurrentColor; //圆的范围 private RectF oval; //最长的字符串 private String mMaxString; private List<Integer> mPieColorList; private List<Integer> mPieValue; private List<String> mStringList; private ArrayList<Pie> mPieArrayList; private RectF rect; public PieView(Context context) { this(context,defStyleAttr); init(); } private void init() { mPieColorList = new ArrayList<>(); mPieValue = new ArrayList<>(); mStringList = new ArrayList<>(); mPaint = new Paint(); mMaxString = ""; mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(10);//画笔宽度 mPaint.setAntiAlias(true);//抗锯齿 } @Override protected void onSizeChanged(int width,int height,int oldWidth,int oldHeight) { super.onSizeChanged(width,height,oldWidth,oldHeight); mTextWidth = (int) mPaint.measureText(mMaxString); mControlHalfHeight = height / 2; //饼图半径 mPieRadios = mControlHalfHeight - 5; //控件内容宽度 int contentWidth = mPieRadios * 2 + PIE_RECT_PADDING + RECT_WIDTH + RECT_TEXT_PADDING + mTextWidth; //内容的左边距 int contentMarginLeft = (width - contentWidth) / 2; //矩形的左边距 mRectMarginLeft = contentMarginLeft + mPieRadios * 2 + PIE_RECT_PADDING; //文字的左边距 mTextMarginLeft = mRectMarginLeft + RECT_WIDTH + RECT_TEXT_PADDING; //文字和控件顶部的距离 mPadding = height / mPieArrayList.size() * 0.8f; oval = new RectF(contentMarginLeft,mControlHalfHeight - mPieRadios,contentMarginLeft + mPieRadios * 2,mControlHalfHeight + mPieRadios); } /** * @param pieArrayList */ public void SetPie(ArrayList<Pie> pieArrayList) { mPieArrayList = pieArrayList; for (Pie mPie : mPieArrayList) { mPieColorList.add(mPie.PieColor); mPieValue.add(mPie.PieValue); mStringList.add(mPie.PieString); if (mMaxString.length() > mPie.PieString.length()) mMaxString = mPie.PieString; } //使用postInvalidate可以直接在主线程中更新界面 postInvalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mStartAngle = -90; mCurrentIndex = 0; mMaxValue = 100; mPaint.setStyle(Paint.Style.FILL); for (int i = 0; i < mPieValue.size(); i++) { mCurrentColor = mPieColorList.get(mCurrentIndex); Log.i("mCurrentColor","onDraw: " + mCurrentColor); drawPie(canvas,mPieValue.get(mCurrentIndex)); drawRect(canvas); drawText(canvas,mStringList.get(mCurrentIndex)); mCurrentIndex++; } } /** * 绘制饼图 * * @param canvas * @param amount */ private void drawPie(Canvas canvas,mPaint); } } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { float x = event.getX(); float y = event.getY(); Log.e("",x+"-----------"); } return true; } }
7.其他文件
colors.xml
<color name="dark">#0097a7</color> <color name="grey">#e0e0e0</color> <color name="gray_dark">#666666</color> <color name="black_alpha_light">#3c3f41</color> <color name="black_light">#383838</color> <color name="blue">#03a9f4</color> <color name="red">#ff4081</color>
dimens.xml
<dimen name="fab_margin">16dp</dimen> <dimen name="pie_rect_padding">30dp</dimen> <dimen name="rect_text_padding">6dp</dimen> <dimen name="rect_width">15dp</dimen> <dimen name="text_size">18sp</dimen> <dimen name="text_vertical_padding">25dp</dimen>
总结
好了,这样一个简单的饼形图绘制就算完成了。希望这篇文章的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。
以上是来客网为你收集整理的手把手教你用Android自定义饼状图全部内容,希望文章能够帮你解决手把手教你用Android自定义饼状图所遇到的程序开发问题。
如果觉得来客网网站内容还不错,欢迎将来客网网站推荐给程序员好友。