滚动柱形图的画法

可以先看看最后的结果图：

主函数

public class MainActivity extends AppCompatActivity {
    private List<Histogram> mData;
    private HistogramView histogramView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        histogramView= (HistogramView) findViewById(R.id.histogram);
        initData();
        histogramView.setmData(mData);
    }
    private void initData() {
        mData = new ArrayList<>();
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 20));
        mData.add(new Histogram("从vfcg", 40));
        mData.add(new Histogram("uyi", 50));
        mData.add(new Histogram("建行卡", 35));
        mData.add(new Histogram("风格化", 38));
        mData.add(new Histogram("法国红酒", 65));
        mData.add(new Histogram("erythrocyte", 30));
        mData.add(new Histogram("规划局", 30));
        mData.add(new Histogram("是否", 30));
        mData.add(new Histogram("环境", 30));
        mData.add(new Histogram("股份合计", 30));
        mData.add(new Histogram("电饭锅", 30));
        mData.add(new Histogram("历史", 30));
        mData.add(new Histogram("打算", 30));
        mData.add(new Histogram("你会使对方", 30));
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

activity_main布局：

<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">
<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.redcircle.myprictise.histogram.HistogramView
        android:id="@+id/histogram"
        android:layout_width="1000dp"
        android:layout_height="match_parent" />
</HorizontalScrollView>

</RelativeLayout>

histogramview布局文件：

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

Histogram类

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;
    }
}

HistogramView 类

public class HistogramView extends View{
    private int height;
    private int width;
    private Paint mPaintWhite;
    private Paint mPaintGray;
    private float topBarHeight=50;
    private float bottomBarHeight=50;
    private float mHistogramWidth=20;
    private float mHistogramSpacing=50;
    private Paint mPaintHistogram;
    private Paint mPaintHistogramBackground;
    private List<Histogram> mData;

    public void setmData(List<Histogram> mData) {
        this.mData = mData;
        requestLayout();//onMesure
        invalidate();//onDraw
    }

    public HistogramView(Context context) {
        super(context);
    }

    public HistogramView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //将dip转化成px像素
        topBarHeight= Dptools.dip2px(context,50);
        bottomBarHeight=Dptools.dip2px(context,50);
        mHistogramWidth= Dptools.dip2px(context, 20);
        mHistogramSpacing=Dptools.dip2px(context,50);
        mPaintWhite=new Paint();
        mPaintWhite.setColor(Color.YELLOW);
        mPaintWhite.setStyle(Paint.Style.FILL);


        mPaintGray=new Paint();
        mPaintGray.setColor(Color.argb(0xff,0xf9,0xf9,0xf9));
        mPaintGray.setStyle(Paint.Style.FILL);

        mPaintHistogram=new Paint();
        mPaintHistogram.setStrokeWidth(mHistogramWidth);
        mPaintHistogram.setColor(Color.argb(0xff,0xff,0xa2,0x6e));

        mPaintHistogramBackground=new Paint();
        mPaintHistogramBackground.setStrokeWidth(mHistogramWidth);
        mPaintHistogramBackground.setColor(Color.argb(0xff,0xee,0xee,0xee));
//        mPaintHistogramBackground.setColor(Color.RED);
        mPaintHistogramBackground.setTextSize(mHistogramWidth);

    }

    @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)*mHistogramSpacing);
        }

        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, mPaintGray);
        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(mHistogramSpacing * (i + 1), height - bottomBarHeight, mHistogramSpacing * (i + 1), topBarHeight, mPaintHistogramBackground);
                canvas.drawLine(mHistogramSpacing * (i + 1), height - bottomBarHeight, mHistogramSpacing * (i + 1), height - bottomBarHeight - (height - topBarHeight - bottomBarHeight) * histogram.getPercent() / 100, mPaintHistogram);

                String percent = histogram.getPercent() + "%";
                canvas.drawText(percent, mHistogramSpacing * (i + 1) - mPaintHistogramBackground.measureText(percent) / 2, topBarHeight, mPaintHistogramBackground);
                canvas.save();
                canvas.rotate(-45, mHistogramSpacing * (i + 1), height - bottomBarHeight + 5);
                canvas.drawText(histogram.getName(), mHistogramSpacing * (i + 1) - mPaintHistogramBackground.measureText(histogram.getName()), height - bottomBarHeight +10, mPaintHistogramBackground);
                canvas.restore();

            }
        }
    }

    }

自定HistogramScrollView 滚动

public class HistogramScrollView extends HorizontalScrollView {
private HistogramView histogramView;
    public HistogramScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view=inflater.inflate(R.layout.histogramview,null);
        histogramView= (HistogramView) view.findViewById(R.id.histogramview);
        this.addView(view);
    }
    public void setdata(List<Histogram> mData) {
        histogramView.setmData(mData);
    }
}

主函数

public class MainActivity extends AppCompatActivity {
    private List<Histogram> mData;
    private HistogramScrollView histogramScrollView;
    private Button mButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButton= (Button) findViewById(R.id.button);
        histogramScrollView= (HistogramScrollView) findViewById(R.id.scroll_histogram);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                initData();
                histogramScrollView.setdata(mData);
            }
        });

    }
    private void initData() {
        mData = new ArrayList<>();
        mData.add(new Histogram("张三", 30));
        mData.add(new Histogram("张三", 20));
        mData.add(new Histogram("从vfcg", 40));
        mData.add(new Histogram("uyi", 50));
        mData.add(new Histogram("建行卡", 35));
        mData.add(new Histogram("风格化", 38));
        mData.add(new Histogram("法国红酒", 65));
        mData.add(new Histogram("erythrocyte", 30));
        mData.add(new Histogram("规划局", 30));
        mData.add(new Histogram("是否", 30));
        mData.add(new Histogram("环境", 30));
        mData.add(new Histogram("股份合计", 30));
        mData.add(new Histogram("电饭锅", 30));
        mData.add(new Histogram("历史", 30));
        mData.add(new Histogram("打算", 30));
        mData.add(new Histogram("你会使对方", 30));
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

activity_main布局

<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.myprictise.histogram.HistogramScrollView
        android:layout_width="match_parent"
        android:id="@+id/scroll_histogram"
        android:layout_height="match_parent">

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

</RelativeLayout>

不过自定义HistogramScrollView 和HorizontalScrollView最后的效果都是一样的。