安卓炫酷柱状图开发

来源：互联网发布：深入浅出node.js mobi 编辑：程序博客网时间：2024/06/16 16:15

话不多说先效果图，关于如何画椭圆，画直线了，也就一行代码，难度不大，难度最大是要如何排版，计算每个子图的left，top，right，bottom，这就需要有点数学功底了

这里写图片描述

下面来看自定义VIEW
2.需要重写两个方法，onSizeChange和onDraw方法，这里是不需要重写onMeasure方法的，因为这个自定义View的视图大小没有发生改变，但是如果需要也是可以重写的。

自定义的View中三个最重要的方法解释：

onMeasure可以得到并控制本身和子View的大小
onSizeChange可以得到自身视图View的大小
onDraw绘制视图View的具体实现

public class HistogramCharView extends View {    private int mWidth;    private int mHeight;    private Paint mPaint;    private int paintColors;    private List<Integer> listNumber = new ArrayList<Integer>();    private List<String> listRange = new ArrayList<String>();    private List<Integer> listColors = new ArrayList<Integer>();    private String name;    public HistogramCharView(Context context) {        this(context, null);    }    public HistogramCharView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public HistogramCharView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setStrokeWidth(2f);        mPaint.setColor(Color.WHITE);        setBackgroundColor(Color.BLACK);    }    public void setData(List<Integer> listNumber) {        this.listNumber.clear();        this.listNumber.addAll(listNumber);        this.listRange.clear();        //initNumber();        listRange.add("水分含量%");        listRange.add("温度状况°C");        listRange.add("植物高度h");        listColors.add(0xFF185be2);        listColors.add(0xFFea3d08);        listColors.add(0xFF26de9a);        postInvalidate();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawBackGroudLines(canvas);            //画矩形图        drawRectFView(canvas);    }    //画矩形图    private void drawRectFView(Canvas canvas) {        mPaint.setColor(paintColors);        float pointWidth = (mWidth)/7f;        float pointHeight = (float) (mHeight-20) / 100f;        //绘制文字        mPaint.setTextSize(30);        mPaint.setColor(0xFF00fffd);        for (int i = 0; i < 11; i++) {            String text = i * 10 + "";            canvas.drawText(text, 10, mHeight+10 - i * 10 * pointHeight, mPaint);        }        //绘制虚线        for (int i = 0; i < 11; i++) {            mPaint.setStyle(Paint.Style.STROKE);//空心            mPaint.setColor(0xFF00fffd);  //画笔颜色            Path path = new Path(); //路径            path.moveTo(70, mHeight - i * 10 * pointHeight);  //画笔起点位置点         d            path.lineTo(mWidth, mHeight - i * 10 * pointHeight);     //画笔终点位置点            //使用DashPathEffect来创建一个虚线的轮廓(短横线/小圆点)，而不是使用实线            //float[] { 5, 5, 5, 5 }值控制虚线间距，密度            PathEffect effects = new DashPathEffect(new float[]{3, 3, 3, 3}, 1);            mPaint.setPathEffect(effects);            canvas.drawPath(path, mPaint);        }        //画完虚线后再设置一下画笔        mPaint.setColor(paintColors);        mPaint.setStyle(Paint.Style.STROKE);//空心        for (int i = 0; i < listNumber.size(); i++) {            mPaint.setColor(0xFF62666c);            mPaint.setStyle(Paint.Style.STROKE);//空心            mPaint.setTextSize(50);            float left=pointWidth*(i*2+1);            float right=pointWidth+left;            canvas.drawRoundRect(left, 20, right, mHeight,20,20 ,mPaint);            mPaint.setColor(0xaF00fffd);            mPaint.setTextSize(30);            mPaint.setStyle(Paint.Style.FILL);            canvas.drawRoundRect(left, pointHeight*(100-listNumber.get(i))+20, right,mHeight,20, 20, mPaint);            canvas.drawText(String.valueOf(listRange.get(i)), left+(pointWidth-150)/2f, getHeight()-10, mPaint);            canvas.drawText(String.valueOf(listNumber.get(i)),  left+(pointWidth-40)/2f,   pointHeight*(100-listNumber.get(i))-3, mPaint);        }    }    private void drawBackGroudLines(Canvas canvas) {        //背景颜色        mPaint.setColor(0xFF373d4a);        canvas.drawRect(0, 0, mWidth, getHeight(), mPaint);        mPaint.setColor(0xFF00fffd);        canvas.drawLine(70, 0, 70, mHeight, mPaint);        canvas.drawLine(70, mHeight, mWidth, mHeight, mPaint);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mWidth = getWidth();        mHeight = getHeight() - 40;    }}

接下来的是布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main3"android:layout_width="match_parent"android:layout_height="match_parent"    android:orientation="vertical"    android:background="#373d4a"tools:context="com.example.andream.learnone.Main3Activity"><com.example.andream.learnone.HistogramCharView    android:layout_width="match_parent"    android:layout_height="300dp"    android:layout_marginTop="20dp"    android:id="@+id/histogramCharView"/>    <TextView        android:layout_width="wrap_content"        android:text="植物生长状况"        android:textSize="18sp"        android:layout_marginTop="20dp"        android:layout_gravity="center"        android:textColor="#00fffd"        android:layout_height="wrap_content" />    <Button        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_marginTop="100dp"        android:background="#00fffd"        android:text="数据改变"        android:layout_gravity="bottom"        android:onClick="close"        /></LinearLayout>

接下来的是主界面代码

public class Main3Activity extends AppCompatActivity {private HistogramCharView histogramCharView;    private List<Integer> datas;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main3);        datas = new ArrayList<Integer>();        datas.add(46);        datas.add(34);        datas.add(13);        // 画笔颜色的数组        int paintColor = 0xFF26de9a;       histogramCharView = (HistogramCharView) findViewById(R.id.histogramCharView);        histogramCharView.setData(datas);    }    //关闭页面    public void close(View view) {        datas.clear();        datas.add(64);        datas.add(25);        datas.add(30);        // 画笔颜色的数组        int paintColor = 0xFF26de9a;        histogramCharView.setData(datas);    }}

就这样就实现了，大家慢慢研究吧，一定也可以画出根据好看的图像

参考：http://blog.csdn.net/wenzhi20102321/article/details/66971269

阅读全文

0 0