自定义View画报表

自定义view

package com.redcircle.redcircle.Widget;

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

import com.redcircle.redcircle.utils.DpTools;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2015/10/12.
 */
public class HistogramView extends View {
    private int width;
    private int height;
    private float topBarHeight = 50;
    private float bottomBarHeight = 50;
    private float HistogramWidth = 20;
    private float mSpacing = 50;
    private Paint mPaintWhite;
    private Paint mPaintBackground;
    private Paint mPaintHistogram;
    private List<Histogram> mData;
    private Paint mPaintHistogramPro;

    public void setData(List<Histogram> data) {
        this.mData = data;
//        requestLayout();//onMeasure方法
        invalidate();//onDraw方法
    }

    public HistogramView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initData();
        topBarHeight = DpTools.dip2px(context,50);
        bottomBarHeight = DpTools.dip2px(context,50);
        HistogramWidth = DpTools.dip2px(context,20);
        mSpacing = DpTools.dip2px(context,50);

        mPaintWhite = new Paint();
        mPaintWhite.setColor(Color.WHITE);

        mPaintBackground = new Paint();
        mPaintBackground.setARGB(255, 212, 212, 212);

        mPaintHistogram = new Paint();
        mPaintHistogram.setARGB(255, 183, 183, 183);
        mPaintHistogram.setStrokeWidth(HistogramWidth);
        mPaintHistogram.setStyle(Paint.Style.FILL);
        mPaintHistogram.setTextSize(HistogramWidth);
        mPaintHistogram.setTextAlign(Paint.Align.CENTER);

        mPaintHistogramPro = new Paint();
        mPaintHistogramPro.setARGB(255, 254, 135, 69);
        mPaintHistogramPro.setStrokeWidth(HistogramWidth);
    }
    public void initData(){
        mData = new ArrayList<>();
        mData.add(new Histogram("张三",30));
        mData.add(new Histogram("李四", 35));
        mData.add(new Histogram("王五",40));
        mData.add(new Histogram("张三", 45));
        mData.add(new Histogram("李四", 50));
        mData.add(new Histogram("王五", 55));
        mData.add(new Histogram("张三",60));
        mData.add(new Histogram("李四", 65));
        mData.add(new Histogram("王五", 70));
        mData.add(new Histogram("张三", 75));
        mData.add(new Histogram("李四", 80));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("李四", 50));
        mData.add(new Histogram("王五", 55));
        mData.add(new Histogram("张三", 60));
        mData.add(new Histogram("李四", 65));
        mData.add(new Histogram("王五", 70));
        mData.add(new Histogram("张三", 75));
        mData.add(new Histogram("李四",80));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 30));
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mData==null){
            width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
        }else {
            width = (int) ((mData.size()+1)*mSpacing);
        }
        height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0, 0, width, topBarHeight, mPaintWhite);
        canvas.drawRect(0, topBarHeight, width, height - bottomBarHeight, mPaintBackground);
        canvas.drawRect(0, height - bottomBarHeight, width, height, mPaintWhite);

        if (mData!=null){
            for (int i =0;i<mData.size();i++){
                Histogram histogram = mData.get(i);
                canvas.drawLine(mSpacing*(i+1),height-bottomBarHeight,mSpacing*(i+1),topBarHeight,mPaintHistogram);
                canvas.drawLine(mSpacing*(i+1),height-bottomBarHeight,mSpacing*(i+1),height - topBarHeight - (height - topBarHeight - bottomBarHeight) * histogram.getPercent() / 100,mPaintHistogramPro);

                String percent = histogram.getPercent()+"%";
                canvas.drawText(percent,mSpacing*(i+1),topBarHeight,mPaintHistogram);

                canvas.save();
                canvas.rotate(-45, mSpacing * (i + 1), height - bottomBarHeight + 5);
                canvas.drawText(histogram.getName(), mSpacing * (i + 1) - mPaintBackground.measureText(histogram.getName()), height - bottomBarHeight + 35, mPaintHistogram);
                canvas.restore();
            }
        }
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.redcircle.redcircle.Widget.HistogramView
            android:id="@+id/histogramview"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.redcircle.redcircle.Widget.HistogramView>


    </HorizontalScrollView>

</LinearLayout>

获得比例和姓名所需要的类

package com.redcircle.redcircle.Widget;

/**
 * Created by Administrator on 2015/10/13.
 */
public class Histogram {
    private String name;
    private int percent;

    public Histogram(){}

    public Histogram(String name, int percent) {
        this.name = name;
        this.percent = percent;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPercent() {
        return percent;
    }

    public void setPercent(int percent) {
        this.percent = percent;
    }
}

工具类dp与px转换

package com.redcircle.redcircle.utils;

import android.content.Context;

/**
 * Created by Administrator on 2015/10/13.
 */
public class DpTools {
    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

另一种滚动报表的方式

HistogramActivity

public class HistogramActivity extends BaseActivity {
    private List<Histogram> mData;
    private ScrollHistogramView histogramView;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        histogramView = (ScrollHistogramView) findViewById(R.id.scroll_histogram);
        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                initData();
                histogramView.setData(mData);
            }
        });
    }
    public void initData(){
        mData = new ArrayList<>();
        mData.add(new Histogram("张三",30));
        mData.add(new Histogram("李四", 35));
        mData.add(new Histogram("王五",40));
        mData.add(new Histogram("张三", 45));
        mData.add(new Histogram("李四",50));
        mData.add(new Histogram("王五", 55));
        mData.add(new Histogram("张三",60));
        mData.add(new Histogram("李四", 65));
        mData.add(new Histogram("王五", 70));
        mData.add(new Histogram("张三", 75));
        mData.add(new Histogram("李四", 80));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("李四", 50));
        mData.add(new Histogram("王五", 55));
        mData.add(new Histogram("张三", 60));
        mData.add(new Histogram("李四", 65));
        mData.add(new Histogram("王五", 70));
        mData.add(new Histogram("张三", 75));
        mData.add(new Histogram("李四",80));
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 30));
    }
}

ScrollHistogramView

package com.redcircle.redcircle.Widget;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.HorizontalScrollView;

import com.redcircle.redcircle.R;

import java.util.List;

/**
 * Created by Administrator on 2015/10/12.
 */
public class ScrollHistogramView extends HorizontalScrollView {
    private HistogramView histogramView;

    public ScrollHistogramView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.histogram_view,null);
        histogramView = (HistogramView) view.findViewById(R.id.histogramview);
        this.addView(view);
    }
    public void setData(List<Histogram>mData){
        histogramView.setData(mData);
    }
}

HistogramView中需要添加一个方法，以通知它重新测量和重绘

 public void setData(List<Histogram> data) {
        this.mData = data;
        requestLayout();//onMeasure方法
        invalidate();//onDraw方法
    }

布局文件

自定义scrollview的布局文件

<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"
    tools:context=".MainActivity">
    <com.redcircle.redcircle.Widget.ScrollHistogramView
        android:id="@+id/scroll_histogram"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.redcircle.redcircle.Widget.ScrollHistogramView>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="刷新界面"/>

</RelativeLayout>

自定义view的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
        <com.redcircle.redcircle.Widget.HistogramView
            android:id="@+id/histogramview"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.redcircle.redcircle.Widget.HistogramView>


</LinearLayout>