首页 > 代码库 > 环形图 自定义(一)

环形图 自定义(一)

需求:自定义环形图(饼图),实现2项数据配比显示;

效果图:

实现分析:

1.目录结构:

代码实现:

1. color.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <!-- 饼图 -->    <color name="pie_progress_bank">#fd8f8b</color>    <color name="pie_progress_fund">#2999f9</color>    <color name="text_tag_bg">#aaaaaa</color>    <color name="text_progress_bg">#fb4b45</color>    <color name="text_term_bg">#aaaaaa</color></resources>

2. fragment_main.xml

<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="com.jjc.demo.MainActivity$PlaceholderFragment" >    <com.jjc.demo.RingView        android:id="@+id/ringview"        android:layout_width="match_parent"        android:layout_height="match_parent" /></RelativeLayout>

3. RingView.java

package com.jjc.demo;import java.math.BigDecimal;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.view.View;/** * 当前环形图实现原理,先画一个完整环形,然后再画一部分环形,两者叠加,显示两种不同的配比; * @author ThinkPad * */public class RingView extends View{        /** 当前进度 */    private int progress;    /** 总进度 */    private int max;        private Paint paint;    private RectF oval;    private int width;    private int height;    private String term = "";    /** 半径 */    private float radius;    /** 画笔宽度 */    private float paintWidth;    /** 组合字体 *///    private float tagTextSize;    /** 配比字体 */    private float progressTextSize;    //    private float tagTextSize;    /** 期限字体 *///    private float termTextSize;    private double rate;    /**     * 设置总数     * @param max     */    public void setMax(int max) {        this.max = max;    }    public void setPaintWidth(float paintWidth) {        this.paintWidth = paintWidth;    }    /**     * 设置进度     * @param progress     */    public void setProgress(int progress) {        this.progress = progress;        invalidate();    }    /**     * 设置收益率     * @param rate     */    public void setRate(double rate) {        this.rate = round(rate, 2, 4);    }    public void setTerm(String term) {        this.term = term;    }        public RingView(Context context, AttributeSet attrs) {        super(context, attrs);        paint = new Paint();        oval = new RectF();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        height = canvas.getHeight();        width = canvas.getWidth();                initRadius();        initPaint();        initDebugLine(canvas ,false);        initBankPaint(canvas);        initFundPaint(canvas);                initDescrip(canvas);    }        /**     * 测试文字是否居中,标尺线     */    private void initDebugLine(Canvas canvas ,boolean isDebug) {                if(isDebug){            //竖线            paint.setColor(Color.BLACK); canvas.drawLine(width/2, 0, width/2, height, paint);            //横线             paint.setColor(Color.GRAY); canvas.drawLine(0, height/2, width, height/2, paint);        }    }    /**     * 比较高度和宽度,然后取短的作为圆环的半径     */    private void initRadius() {        if (width > height) {            radius = (float) (height * 0.4);        } else {            radius = (float) (width * 0.4);        }    }    private void initPaint() {        if(paintWidth == 0){            paintWidth = radius/10;        }                paint.setAntiAlias(true);// 设置是否抗锯齿        paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿    }    private void initBankPaint(Canvas canvas) {        paint.setColor(getResources().getColor(R.color.pie_progress_bank));// 设置银行理财画笔                /** 银行理财标注 */        // 设置样式-填充           paint.setStyle(Style.FILL);           // 绘制一个矩形           canvas.drawRect(new Rect(10, height-35, 22, height-15), paint);         paint.setTextSize((float) (radius/5.5));// 设置标注文字的大小        canvas.drawText("银行理财", 35, height-18, paint);                /** 银行理财的饼图  */        paint.setStrokeWidth(paintWidth);// 设置画笔宽度        paint.setStyle(Style.STROKE);// 设置中空的样式        canvas.drawCircle(width / 2, height / 2, radius, paint);    }        private void initFundPaint(Canvas canvas) {        paint.setColor(getResources().getColor(R.color.pie_progress_fund));// 设置货币基金画笔                /** 货币基金标注 */        // 设置样式-填充           paint.setStyle(Style.FILL);           // 绘制一个矩形           canvas.drawRect(new Rect(10, height-65, 22, height-45), paint);         paint.setTextSize((float) (radius/5.5));// 设置标注文字的大小        canvas.drawText("货币基金", 35, height-48, paint);                /** 货币基金的饼图  */        paint.setStrokeWidth(paintWidth);// 设置画笔宽度        paint.setStyle(Style.STROKE);// 设置中空的样式        oval.set((width / 2 - radius), (height / 2 - radius),                (width / 2 + radius), (height / 2 + radius));        canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, paint);// 画圆弧,第二个参数为:起始角度,第三个为跨的角度,第四个为true的时候是实心,false的时候为空心    }        private void initDescrip(Canvas canvas) {        paint.reset();// 将画笔重置        paint.setStrokeWidth(3);// 再次设置画笔的宽度        progressTextSize = (float) (radius / 2);        paint.setTextSize((float) (radius / 7));// 设置标记文字的大小        paint.setColor(getResources().getColor(R.color.text_tag_bg));// 设置画笔颜色        canvas.drawText("组合收益率", (float) (width / 2 - radius / 2.8),                (float) (height / 2 - progressTextSize * 0.5), paint);        paint.setTextSize((float) (radius / 7));// 设置期限文字的大小        paint.setColor(getResources().getColor(R.color.text_term_bg));// 设置画笔颜色        canvas.drawText(term, (float) (width / 2 - radius / 4.5),                (float) (height / 2 + progressTextSize * 0.7), paint);        /** 配比数 */        paint.setTextSize(progressTextSize);// 设置进度文字的大小        paint.setColor(getResources().getColor(R.color.text_progress_bg));// 设置画笔颜色        canvas.drawText(rate+"",                (float) (width / 2 - progressTextSize * 1.1),                (float) (height / 2 + progressTextSize / 2.5), paint);                paint.setTextSize((float) (radius / 5));// 设置百分号的大小        canvas.drawText("%",                (float) (width / 2 + progressTextSize * 0.9),                (float) (height / 2 + progressTextSize / 2.5), paint);    }    /**     * 对double数据进行取精度.     * <p>     * For example: <br>     * double value = http://www.mamicode.com/100.345678; 
>@param value * double数据. * @param scale * 精度位数(保留的小数位数). * @param roundingMode * 精度取值方式. * @return 精度计算后的数据. */ private double round(double value, int scale, int roundingMode) { BigDecimal bd = new BigDecimal(value); bd = bd.setScale(scale, roundingMode); double d = bd.doubleValue(); bd = null; return d; } }

4.MainActivity.java

package com.jjc.demo;import android.support.v7.app.ActionBarActivity;import android.support.v4.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;public class MainActivity extends ActionBarActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        if (savedInstanceState == null) {            getSupportFragmentManager().beginTransaction()                    .add(R.id.container, new PlaceholderFragment()).commit();        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.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();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }    /**     * A placeholder fragment containing a simple view.     */    public static class PlaceholderFragment extends Fragment {        private View rootView;        private RingView ringView;        public PlaceholderFragment() {        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState) {            rootView = inflater.inflate(R.layout.fragment_main, container, false);            return rootView;        }                @Override        public void onActivityCreated(Bundle savedInstanceState) {            super.onActivityCreated(savedInstanceState);            initView();        }        private void initView() {            ringView = (RingView) rootView.findViewById(R.id.ringview);            ringView.setMax(100);            ringView.setRate(5.43);            ringView.setTerm("六个月");            ringView.setProgress(40);        }            }}

 

代码:http://pan.baidu.com/s/1eQzk5SQ

环形图 自定义(一)