28 自定义View画坐标和柱状图

时间:2021-09-04 01:03:39

28 自定义View画坐标和柱状图

  • 自定义View类

    RectView.java
package com.qf.sxy.day29_customview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View; /**
* Created by sxy on 2016/9/29.
*/
public class RectView extends View { private Paint mPaint; //设置条形图的 间距和宽度
private int rectSpace = 50;
private int rectWith = 50;
//必须是所有的柱状图高度的最大公约数以下的约数 否则余数高度无法画出
private int times = 50;//设置走多少次
private int current = 0;//当前走的次数 //数据 条状态图的高度 颜色
private int[][]rectArray ={{500,Color.YELLOW},{200,Color.RED},{350,Color.BLACK},{250,Color.GREEN}}; public RectView(Context context, AttributeSet attrs) {
super(context, attrs);
//初始化画笔对象
initPaint();
} private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLACK);
mPaint.setStrokeWidth(3);
} public RectView(Context context) {
this(context,null);
} /**
* 绘制 条形统计图
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); //画坐标点
canvas.drawCircle(50,getHeight()-50,2,mPaint); //画x轴
canvas.drawLine(50,getHeight()-50,getWidth()-50,getHeight()-50,mPaint); //画Y轴
canvas.drawLine(50,getHeight()-50,50,50,mPaint); //画Y轴箭头
canvas.drawLine(50,50,25,75,mPaint);
canvas.drawLine(50,50,75,75,mPaint); //绘制条形图 n 条
for(int i=0;i<rectArray.length;i++){ //条形图 左边
int left = rectSpace +(rectSpace+rectWith)*i;
//获取顶部位置
int top = rectArray[i][0]/times*current;
//重新设置颜色
mPaint.setColor(rectArray[i][1]);
//绘制条形图
canvas.drawRect(left+50,getHeight()-top-50,left+50+rectWith,getHeight()-50,mPaint); }
// 效果让其柱状图慢慢上升
current++;
if(current<times){
invalidate();//刷新
} }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.qf.sxy.day29_customview.MainActivity"> <com.qf.sxy.day29_customview.widget.RectView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>