[AndroidUI]自定义view(五)：实现动态柱状图

package com.example.testview5;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.Toast;

public class HistogramView extends View {

private int viewWidth;//控件宽度

private int viewHeight;//控件高度
private int total = 5000;//整条的数值

private int targetHeight;//目标的高度
private int target;//目标的数值

private int nowHeight;//当前的高度
private int now = 0;//当前的数值

private Paint paint;
private Rect rect;//图片的区域
private Bitmap bitmap;//柱状图使用的图片
private HistogramAnimation ha;//从0开始上升的动画

//供外部调用
public void show(int target) {
this.target = target;
startAnimation(ha);
}

public HistogramView(Context context, AttributeSet attrs) {
super(context, attrs);

paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(18);
paint.setColor(Color.parseColor("#6DCAEC"));

rect = new Rect();
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.column);
ha = new HistogramAnimation();
ha.setDuration(3000);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
viewWidth = MeasureSpec.getSize(widthMeasureSpec);
viewHeight = MeasureSpec.getSize(heightMeasureSpec);
targetHeight = target * viewHeight / total;
setMeasuredDimension(viewWidth, viewHeight);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

rect = new Rect(0, viewHeight - nowHeight, viewWidth, viewHeight);
canvas.drawBitmap(bitmap, null, rect, paint);
canvas.drawText(now + "", 0, viewHeight- nowHeight - 10, paint);
}

private class HistogramAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);

//interpolatedTime取值0-1，代表动画进度
now = (int)(target * interpolatedTime);
nowHeight = (int)(targetHeight * interpolatedTime);
//可以通过此函数调用onDraw
postInvalidate();
}
}
}

package com.example.testview5;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class AxleView extends View {

private Paint paint;
private String[] xStrings;//x轴上的信息
private String[] yStrings;//y轴上的信息

public AxleView(Context context, AttributeSet attrs) {
super(context, attrs);

paint = new Paint();
xStrings = new String[]{"周一", "周二", "周三",
"周四", "周五", "周六", "周日",};
yStrings = new String[]{"5000", "4000", "3000", "2000",
"1000","0",};
}

//左上角为原点，右为x轴方向，下为y轴方向
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//因为设置宽高为match_parent，所以为了不越界，需要减去一个值
int width = getWidth() - 100;
int height = getHeight() - 100;

//1.绘制坐标线
paint.setColor(Color.DKGRAY);
int startX = 50;
int startY = 30;
canvas.drawLine(startX, startY, startX, startY + height, paint);
canvas.drawLine(startX, startY + height, startX + width, startY + height, paint);

//2.绘制x轴上的信息
paint.setColor(Color.BLACK);
int xOffset = width / xStrings.length;
for (int i = 0; i < xStrings.length; i++) {
canvas.drawText(xStrings[i], startX + xOffset * i + 10, startY + height + 20, paint);
}

//3.绘制y轴上的信息和坐标内部的水平线
int yOffset = height / yStrings.length;
for (int i = 0; i < yStrings.length; i++) {
int x = startX - 50;
int y = startY + yOffset * i + 100;

paint.setColor(Color.BLACK);
canvas.drawText(yStrings[i], x, y, paint);

paint.setColor(Color.LTGRAY);
canvas.drawLine(x + 50, y, x + 50 + width, y, paint);
}
}
}

package com.example.testview5;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

private HistogramView[] hvs = new HistogramView[7];
private int[] values = new int[]{
1500,2000,2500,4500,4000,3500,1000
};
private int[] ids = new int[]{
R.id.hv1, R.id.hv2, R.id.hv3, R.id.hv4,
R.id.hv5, R.id.hv6, R.id.hv7,
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

for (int i = 0; i < hvs.length; i++) {
hvs[i] = (HistogramView) findViewById(ids[i]);
hvs[i].show(values[i]);
}
}
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.example.testview5.AxleView
android:id="@+id/axleView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<com.example.testview5.HistogramView
android:id="@+id/hv1"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="40dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv2"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="100dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv3"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="160dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv4"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="220dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv5"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="280dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv6"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="340dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

<com.example.testview5.HistogramView
android:id="@+id/hv7"
android:layout_width="40dp"
android:layout_height="500dp"
android:layout_alignLeft="@id/axleView"
android:layout_marginLeft="400dp"
android:layout_alignBottom="@id/axleView"
android:layout_marginBottom="70dp"/>

</RelativeLayout>