Android 如何画圆饼图来表示智能机的市场份额

原创 2013年12月03日 18:27:49

先让大家看一下效果图:

智能机的份额可能不太准确,仅仅是举例说明一下:

定制的View代码如下:


/**
 *饼状图
 *
 * @author caicai
 *
 */

@SuppressLint("ResourceAsColor")
public class RoundDistributionView extends View {

    /**
     * 饼状图的开始位置
     */

    private int beginDegree;

    /**
     * 画笔对象的引用
     */

    private Paint paint;
    
    

    /**
     * 写文字的画笔引用
     */

    private Paint textPaint;
    /**
     * 圆环进度的颜色
     */

    /**
     * 中间进度百分比的字符串的颜色
     */
    private int textColor;

    /**
     * 中间进度百分比的字符串的字体
     */
    private float textSize;

    private String[] distributionStrings = { "Android", "IOS", "WinPhone",
            "Others" };

    private int[] distributionPercents = { 60, 10, 10,20 };

    private int[] colors = { Color.RED, Color.BLUE, Color.GREEN};


    public RoundDistributionView(Context context) {
        this(context, null);
    }

    public RoundDistributionView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundDistributionView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);

        paint = new Paint();
        
        setDistributionStrings(getResources().getStringArray(R.array.name_distribution));
        setDistributionPercents(getResources().getIntArray(R.array.percent_distribution));
        setColors(getResources().getIntArray(R.array.colors));

        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundProgressBar);

        // 获取自定义属性和默认值
        textColor = mTypedArray.getColor(
                R.styleable.RoundProgressBar_textColor, Color.GREEN);
        textSize = mTypedArray.getDimension(
                R.styleable.RoundProgressBar_textSize, 16);
        beginDegree = mTypedArray.getInt(
                R.styleable.RoundProgressBar_beginDegree, 0);

        mTypedArray.recycle();

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextSize(textSize);
        textPaint.setColor(textColor);
    }

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

        /**
         * 得到圆的圆心和半径
         */
        int centre = getWidth() / 2; // 获取圆心的x坐标
        int radius = centre; // 圆环的半径
        paint.setStyle(Paint.Style.FILL); // 设置空心
        paint.setAntiAlias(true); // 消除锯齿
        canvas.drawCircle(centre, centre, radius, paint);

        Log.e("log", centre + "");

        /**
         * 画圆弧,画扇形
         */

        // 设置扇型是实心
        RectF oval = new RectF(centre - radius, centre - radius, centre
                + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限

            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            for (int i = 0; i < colors.length; i++) {
                paint.setColor(colors[i]);
                int startPosition = 0;
                int endPoisition = 0;
                for (int j = 0; j < i; j++) {
                    startPosition += distributionPercents[j];
                    endPoisition += distributionPercents[j];
                }
                endPoisition += distributionPercents[i];
                Log.e("log", "开始度数====" + 360 * startPosition / 100 + " 弧度===="
                        + 360 * distributionPercents[i] / 100 + " 颜色:" + i);
                canvas.drawArc(oval, beginDegree + 360 * startPosition / 100,
                        360 * distributionPercents[i] / 100, true, paint); // 根据进度画圆弧
                /**
                 * 写市场份额百分比
                 */
                textPaint.setStrokeWidth(0);
                textPaint.setTypeface(Typeface.DEFAULT_BOLD); // 设置字体
                String displayText = distributionStrings[i] + ":"
                        + distributionPercents[i] + "%";
                float textWidth = textPaint.measureText(displayText); // 测量字体宽度,我们需要根据字体的宽度设置在扇型的平分线的中点
                int middleDegree = beginDegree + 360
                        * (startPosition + endPoisition) / 2 / 100;
                float positionX = ((float) (centre - textWidth / 2.0 + radius
                        * Math.cos(Math.toRadians(middleDegree)) / 2.0));
                float positionY = (float) (centre + textSize / 2.0 + radius
                        * Math.sin(Math.toRadians(middleDegree)) / 2.0);
                //Math.toRadians(middleDegree) 把度数转化成PI 360度等于2*PI 这条特别主要千万别忘了用这个函数Math.toRadians
                canvas.drawText(displayText, positionX, positionY, textPaint);
        }

    }
    
    public int[] getColors() {
        return colors;
    }

    public void setColors(int[] colors) {
        this.colors = colors;
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public float getTextSize() {
        return textSize;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    public int getBeginDegree() {
        return beginDegree;
    }

    public void setBeginDegree(int beginDegree) {
        this.beginDegree = beginDegree;
    }

    public String[] getDistributionStrings() {
        return distributionStrings;
    }

    public void setDistributionStrings(String[] distributionStrings) {
        this.distributionStrings = distributionStrings;
    }

    public int[] getDistributionPercents() {
        return distributionPercents;
    }

    public void setDistributionPercents(int[] distributionPercents) {
        this.distributionPercents = distributionPercents;
    }

}


attrs.xml文件(此文件在values文件夹下面)的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <declare-styleable name="RoundProgressBar">  
        <attr name="textColor" format="color" />  
        <attr name="textSize" format="dimension" />
        <attr name="beginDegree" format="integer"></attr>
    </declare-styleable>
</resources>


在strings.xml文件里面加入如下内容:

 <integer-array
        name="percent_distribution">
        <item>65</item>
        <item>25</item>
        <item>15</item>
    </integer-array>
    <string-array name="name_distribution">
        <item >Android</item>
        <item >IOS</item>
        <item >Others</item>
    </string-array>
    <array name="colors">
        <item>#FFFF0000</item>
        <item>#FF0000FF</item>
        <item>#FF00FF00</item>
    </array>


注意这三个数组的个数多少是一致的,第一个数组各个item的值之和为100(各自的市场份额百分比),第二个数组各自智能手机的名称,第三个数组为自己扇型图的背景色。


主Activity的layout文件内容如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:round_custom="http://schemas.android.com/apk/res/你的包名"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <你的包名.RoundDistributionView
        android:layout_height="400dip"
        android:layout_width="400dip"
        android:layout_margin="40dip"
        round_custom:textColor="#FFFFFFFF"
        round_custom:beginDegree="90"
        
        />

</RelativeLayout>


注意上面的红色字体,xmlns:round_custom="http://schemas.android.com/apk/res/你的包名"  round_custom是定制的前缀,只有在上面的attrs.xml文件中定义的属性才可以,如textColor,textSize,beginDegree等属性。





希望对大家有所帮助。


Android自定义带动画的饼图PieChart

Android中自定义带动画的饼图PieChart

Android -- 短信验证就是那么简单

又有半个月没更新文章了,最近工作比较忙,一时没时间写,今天趁着清闲,赶紧补上一篇。。。。。     今天就说一下 Android集成短信验证功能的实现,最常见的短信验证界面我们都知道,两个输入框(输入...

分析称2016年Android智能手机市场份额将近半

分析称2016年Android智能手机市场份额将近半市场调研公司ABI Research的分析显示,2010年智能手机的出货量达3.02亿部,同比增长71%。而自问世以来就一路高歌猛进的Android...

2012全球智能手机市场份额:华为销量第三,中兴跻身前五

权威市场研究机构IDC发布的最新报告显示,在去年第四季度的全球智能手机出货量榜上,华为在三星和苹果之后位居第三,首次有中国手机厂商进入全球智能手机的前三强,中兴排名第五。 数据显示,去年第四季度,全...

6月份智能手机市场份额发布:联想超华为第二逼近三星

2012年6月分中国手机市场份额前十 2012年6月份中国智能手机市场份额前十   2012年6月份中国智能手机市场份额发布:联想超华为份额第二逼近三星   7月23日国内第三方市场调...

一年后,Android4.4市场份额终于上升到30%

发表于2014-11-05 08:05| 5195次阅读| 来源CSDN| 43 条评论| 作者张勇 Android移动操作系统Google 摘要:根据谷歌最近七天的统计数据显...

Android 4.0市场份额增至21%,Android4.1仅1.2%

谷歌Android开发者论坛9月10日宣布,来自Google Play应用商店的数据显示,Android 2.3目前仍是使用数最多的Android版本,在所有Android版本中占57.5%。 ...

Android占据80%的市场份额

Android 系统每个版本的生命周期较短,这不是什么秘密,但总体来看,Android系统在移动通信市场占绝对的主导地位,约80%的市场份额被Android占据,苹果iOS目前已下滑到13%,剩余的市...

英特尔进军智能机市场 联手谷歌优化Android

新浪科技讯 北京时间9月14日早间消息,英特尔和谷歌周二宣布,两家公司已结为开发合作伙伴关系。这是英特尔进军智能手机市场的重要一步。   两家公司表示,将针对英特尔凌动处理器对谷歌Android系统...
  • ifeon
  • ifeon
  • 2011年09月14日 09:41
  • 355

有感地震:Android智能机将进军企业市场

有感地震:Android智能机将进军企业市场   据国外媒体报道,Android设备已然成为个人消费电子品市场上的领头羊,然而Android系统(http://www.gec-edu.org/#)在...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 如何画圆饼图来表示智能机的市场份额
举报原因:
原因补充:

(最多只允许输入30个字)