Android饼状图控件效果！类似IOS

craining · 发表于 2012-12-14 17:04:51

本帖最后由 craining 于 2014-4-25 12:17 编辑

类似Iphone中有的一种饼状图，如图：

说明：

（1）点击饼状图上的某块，会就近旋转到某侧（左上右下、不旋转，可调用方法设置），被点击的块滑出（距离可调用方法设置）；

（2）另外各个块的大小、颜色、总体大小、饼状图的半径、边缘的宽度、颜色、动画是否开启都可调用方法设置；

（3）可以代码触发某块被点击的效果。

（4）用户点击某块后的监听，可获得到饼状图所示数据：被点击的块的位置（以传入的各个块的值的顺序）、被点击块的大小、颜色、所占总体的比例、动画旋转的时间（可用于控制被点击块详情的显示）。

构造方法：

(1)public PieChartView(Context context,                   java.lang.String[] itemColors,                   float[] itemSizes,                   float total,                   int radius,                   int strokeWidth,                   java.lang.String strokeColor,                   int rotateWhere,                   float separateDistence,                   float rotateSpeed)若需要用java代码显示布局，则使用此构造方法
参数：
context - 上下文
itemColors - 饼状图上从第一个块开始，各个块的颜色；如两块：传值String[] itemColors = {“#000000″, “#FFFFFF”}，为空，则显示随机颜色。参见： )]setItemsColors(java.lang.String[])
itemSizes - 饼状图上各个块的大小；如两块：传值float[] itemSizes = {(float) 50.0, (float) 50.0}，为空，则只显示圆环。参见：)]setItemsSizes(float[])
total - 饼状图所表示的整体大小；大于或等于 itemSizes 各项数据之和，若小于，则等于，默认等于。参见：setTotal(int)
radius - 饼状图的半径，但不包括边缘圆环的粗度。默认为 100。参见：setRaduis(int)
strokeWidth - 饼状图边缘圆环的粗度；默认为 3。参见：setStrokeWidth(int)strokeColor - 饼状图边缘圆环的颜色，默认为黑色(#000000).参见：setStrokeColor(java.lang.String)
rotateWhere - 若动画已开启，则饼状图上被点击的块旋转到的位置；左侧：TO_LEFT；顶部：TO_TOP；右侧：TO_RIGHT；底部：TO_BOTTOM；不旋转：NO_ROTATE；  默认为： TO_RIGHT；参见：setRotateWhere(int)
separateDistence - 被选中的块的偏移距离；为了凸显备选中的块，偏移凸显；若为负或未设置，默认为：DEFAULT_SEPARATE_DISTENCE。参见： setSeparateDistence(float);
rotateSpeed - 若动画开启，则表示旋转动画的速度；若为负或未设置，默认为：DEFAULT_ANIM_SPEED。参见：setRotateSpeed(float);

(2)public PieChartView(Context context,                   AttributeSet attrs)XML 布局添加PieView 如：<com.zgy.piechartview.PieChartView
android:id=”@+id/parbar_view”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”/>
用xml代码显示布局时使用此方法。

其它参数尚未添加，请用 set 方法进行设置。

参数：context -attrs -

饼状图属性的设置的方法：

void setAnimEnabled(boolean isAnimEnabled)
是否开启动画
boolean isAnimEnabled()
判断是否开启了旋转动画

void setItemsSizes(float[] items)
饼状图上各个块的大小；如两块：传值float[] itemSizes = {(float) 50.0, (float) 50.0}，为空，则只显示圆环。
float[] getItemsSizes()
获得各个块的值

void setItemsColors(java.lang.String[] colors)
饼状图上从第一个块开始，各个块的颜色；如两块：传值String[] itemColors = {“#000000″, “#FFFFFF”}，为空，则显示默认颜色。
java.lang.String[] getItemsColors()
获得各个item块的颜色

void setRaduis(int radius)
饼状图的半径，但不包括边缘圆环的粗度。
float getRaduis()
获得饼状图的半径，但不包括边缘圆环的粗度

void setStrokeWidth(int strokeWidth)
设置饼状图边缘圆环的粗度
float getStrokeWidth()
获得饼状图边缘圆环的粗度

void setStrokeColor(java.lang.String strokeColor)
饼状图边缘圆环的颜色，默认为黑色(#000000).
java.lang.String getStrokeColor()
获得饼状图边缘圆环的颜色

void setRotateSpeed(float rotateSpeed)
若开启了动画，设置动画的旋转速度；若未开启动画，待动画开启时方可生效。
float getRotateSpeed()
若开启了动画，获得动画的旋转速度

void setRotateWhere(int rotateWhere)
设置饼状图上被点击的块转到的位置

int getRotateWhere()
判断饼状图上被点击的块旋转到的位置

void setSeparateDistence(float separateDistence)
设置被选中的块分离的距离
float getSeparateDistence()
返回被选中的块分离的距离

void setShowItem(int position, boolean anim, boolean listen)
设置要显示的item
int getShowItem()
获得显示的item

void setTotal(int total)
饼状图所表示的整体大小；

float getTotal()
获得整体大小

绘制时的主要算法：

1、被点击块的计算

2、旋转角度的计算，如何就近旋转（顺时针或逆时针）。

可打成jar包使用；

源码：

PieChartSource.zip (123.38 KB, 下载次数: 731)

如有bug，欢迎反馈并提供解决方案！

注意：
对于初次运行不旋转的，请仔细看一下Activity里的代码，注意此行：pieChart.setRotateWhere(PieChartView.TO_RIGHT);//设置选中的item停靠的位置，默认在右侧

开发进阶需多研究别人的demo，学习别人的编程思想；
善于抓住自己的灵感，并开发实现，才能培养出好的产品设计、开发思想！

几个优秀项目推荐，源码获得方法可从应用里的“关于页”获得。
可直接在手机市场上搜索下载

1、【赚钱鸟】一款cocos2dx游戏

豌豆荚市场：http://url.cn/RPwiXD

2、【安卓Waiter】手机助手，多个亮点功能

豌豆荚市场下载：
http://url.cn/KrNdMN

360市场下载：
http://openbox.mobilem.360.cn/d.php?p=com.zgy.ringforu

3、【安卓开发助手】Android程序员的必备工具

360市场下载：
http://openbox.mobilem.360.cn/d.php?p=com.zgy.debugtool.main

sea_turtle

学习

sea_turtle

太强大了

sea_turtle

再支持一下

android自定义控件(四) View中的方法

android自定义控件(四) View中的方法

[素材资源] Android饼状图控件效果！类似IOS

点评

本帖被以下淘专辑推荐:

相关帖子

android自定义控件(四) View中的方法

android自定义控件(四) View中的方法

[素材资源] Android饼状图控件效果！ 类似IOS

点评

本帖被以下淘专辑推荐:

相关帖子

[素材资源] Android饼状图控件效果！类似IOS