Git Product home page Git Product logo

animatedpieview's Introduction

AnimatedPieView

一个好吃的甜甜圈?请问客官要啥口味捏-V-

English Doc

jcenter license Android Arsenal Api Author

开发进度 (更新日志->日志

如果您有别的需求,可以提交您的issue哦,当然,也可以直接修改源码-V-

  • 支持TypeFace
  • 点选文字或图表选中甜甜圈
  • 增加默认选中支持
  • 增加图例支持
  • 增加删除数据的方法
  • 增加描述标签支持
  • 项目优化/重构,1.2.0发布
  • 允许alpha突出选中的甜甜圈
  • 允许甜甜圈之间含有间隔
  • 文字自适应点击动画位置
  • 文字描述动画
  • 有文字描述的甜甜圈
  • 点击事件回调的甜甜圈
  • 点击动画的甜甜圈
  • 可以点击的甜甜圈
  • 可以变成大饼的甜甜圈
  • 动画长大的甜甜圈

主要功能

描述 方法 预览
动画生长 -- pie_animation
饼图/甜甜圈转换 strokeMode(boolean) pie_switch
角度间隙 splitAngle(float) pie_split_angle
绘制文字 drawText(true) pie_with_text
点击效果 canTouch(true) / selectListener() pie_click_effect
焦点甜甜圈效果 (反向) focusAlphaType(
AnimatedPieViewConfig.FOCUS_WITH_ALPHA_REV,150
)
pie_click_with_focus_alpha_type_rev
焦点甜甜圈效果 focusAlphaType(
AnimatedPieViewConfig.FOCUS_WITH_ALPHA,150
)
pie_click_with_focus_alpha_type
甜甜圈标签 IPieInfo.PieOption pie_option

依赖

添加依赖(请把{latestVersion}替换成上面的jcenter标签所示版本)

	dependencies {
	        implementation 'com.github.razerdp:AnimatedPieView:{latestVersion}'
	}

基本使用方式(简单的超乎想像)

step 1:定义任意类实现IPieInfo接口(如果懒,可以使用SimplePieInfo)

public class Test implements IPieInfo {
    @Override
    public float getValue() {
        //这个数值将会决定其所占有的饼图百分比
        return 0.5f;
    }

    @Override
    public int getColor() {
        //该段甜甜圈的颜色,请返回@colorInt,不要返回@colorRes
        return Color.WHITE;
    }

    @Override
    public String getDesc() {
        //描述文字,可不返回
        return "这是一个测试";
    }
    
    @Nullable
    @Override
    public PieOption getPieOpeion() {
       //一些别的设置,比如标签
       return mPieOption;
    }
}

step 2:定义config并配置就可以了

AnimatedPieView mAnimatedPieView = findViewById(R.id.animatedPieView);
AnimatedPieViewConfig config = new AnimatedPieViewConfig();
config.startAngle(-90)// 起始角度偏移
      .addData(new SimplePieInfo(30, getColor("FFC5FF8C"), "这是第一段"))//数据(实现IPieInfo接口的bean)
      .addData(new SimplePieInfo(18.0f, getColor("FFFFD28C"), "这是第二段"))
      ...(尽管addData吧)
      .duration(2000);// 持续时间
                
// 以下两句可以直接用 mAnimatedPieView.start(config); 解决,功能一致
mAnimatedPieView.applyConfig(config);
mAnimatedPieView.start();
        

进阶用法(所有配置都在config,and...相信我,我提供大多数配置,但日常用到的,其实不多哈哈)

AnimatedPieViewConfig mConfig=mAnimatedPieView.getConfig();
mConfig.animOnTouch(true)// 点击事件是否播放浮现动画/回退动画(默认true)
       .addData(IPieInfo info, boolean autoDesc)// 添加数据,autoDesc:是否自动补充描述?(百分比)
       .floatExpandAngle(15f)// 点击后圆弧/扇形扩展的角度
       .floatShadowRadius(18f)// 点击后的阴影扩散范围
       .floatUpDuration(500)// 点击浮现动画时间
       .floatDownDuration(500)// 上一个浮现的圆弧回退的动画时间
       .floatExpandSize(15)// 点击后扇形放大数值,,只对饼图有效
       .strokeMode(true)// 是否只画圆弧【甜甜圈哈哈】,否则画扇形(默认true)
       .strokeWidth(15)// 圆弧(甜甜圈)宽度
       .duration(2500)// 动画时间
       .startAngle(-90f)// 开始的角度
       .selectListener(new OnPieSelectListener<IPieInfo>())//点击事件
       .drawText(true)// 是否绘制文字描述
       .textSize(12)// 绘制的文字大小
       .textMargin(8)// 绘制文字与导航线的距离
       .autoSize(true)// 自动测量甜甜圈半径
       .pieRadius(100)// 甜甜圈半径
       .pieRadiusRatio(0.8f)// 甜甜圈半径占比
       .guidePointRadius(2)// 设置描述文字的开始小点的大小
       .guideLineWidth(4)// 设置描述文字的指示线宽度
       .guideLineMarginStart(8)// 设置描述文字的指示线开始距离外圆半径的大小
       .textGravity(AnimatedPieViewConfig.ABOVE)// 设置描述文字方向 【
            -AnimatedPieViewConfig.ABOVE:文字将会在导航线上方绘制
            -AnimatedPieViewConfig.BELOW:文字在导航线下方绘制
            -AnimatedPieViewConfig.ALIGN:文字与导航线对齐
            -AnimatedPieViewConfig.ECTOPIC:文字在12象限部分绘制在线的上方,在34象限绘制在线的下方
       】
       .canTouch(true)// 是否允许甜甜圈点击放大
       .typeFae(TypeFace)// 字体样式
       .splitAngle(1)// 甜甜圈间隙角度
       .focusAlphaType(AnimatedPieViewConfig.FOCUS_WITH_ALPHA_REV,150)// 焦点甜甜圈的alpha表现形态及alpha削减值
       .interpolator(new DecelerateInterpolator())// 动画插值器
       .focusAlpha(150) // 选中的/或者非选中的甜甜圈的alpha值(跟focusAlphaType挂钩)
       .legendsWith((ViewGroup) findViewById(R.id.ll_legends), new OnPieLegendBindListener<BasePieLegendsView>() {
                                @Override
                                public BasePieLegendsView onCreateLegendView(int position, IPieInfo info) {
                                    return position % 2 == 0 ?
                                            DefaultPieLegendsView.newInstance(MainActivity.this)
                                            : DefaultCirclePieLegendsView.newInstance(MainActivity.this);
                                }

                                @Override
                                public boolean onAddView(ViewGroup parent, BasePieLegendsView view) {
                                    return false;
                                }
                            }); //图例支持

更多配置:

在IPieInfo中,你可以配置PieOption以扩展每个甜甜圈的行为

    @Nullable
    @Override
    public PieOption getPieOption() {
        return new PieOption()
                .setDefaultSelected(true) // 默认选中
                .setIconHeight(50) // 图标的高度
                .setIconWidth(50) //图标宽度
                .setIconScaledHeight(0.5f) // 图标高度缩放
                .setIconScaledWidth(0.5f) // 图标宽度缩放
                .setLabelIcon(bitmap) // 图标资源
                .setLabelPadding(5) // 图标与文字的距离
                .setLabelPosition(PieOption.NEAR_PIE); // 图标在甜甜圈内侧
    }

打赏(看在我那么努力维护的份上。。。给个零食呗~)

微信 支付宝

控件思路【按思路顺序更新】

一起弄个甜甜圈吧

LICENSE

Apache-2.0

animatedpieview's People

Contributors

430public avatar razerdp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

animatedpieview's Issues

How to set color in piechart. ???

该问题是怎么引起的?

How to set color in PieChart. I don't know what I am doing wrong.
Following is my code.

AnimatedPieView mAnimatedPieView = (AnimatedPieView) findViewById(R.id.chart);
AnimatedPieViewConfig mConfig = mAnimatedPieView.getConfig();
IPieInfo iPieInfo= new IPieInfo() {
@OverRide
public float getValue() {
return 50;
}

        @Override
        public int getColor() {
            return R.color.green;
        }

        @Override
        public String getDesc() {
            return "Bitcoin";
        }
    };
    mConfig.addData(new SimplePieInfo(iPieInfo.getValue(), iPieInfo.getColor(),iPieInfo.getDesc()))
            .setDuration(2000)
            .setConfig(mConfig);
    mAnimatedPieView.start();

重现步骤

报错信息

1.2.5版本,动画显示有问题

1.2.5版本运行,
1、 如果有2个数据,并且有一个大于3/4,会有一个数据会闪一下
2、如果3个数据以上,并且有一个大于3/4,第一个数据会不显示
我降级到1.2.0版本就没这个问题了
另外我使用的是fragment

数据

AnimatedPieViewConfig config = new AnimatedPieViewConfig();
config.addData(new SimplePieInfo(3, getColor(R.color.bg_color4)));
config.addData(new SimplePieInfo(1, getColor(R.color.bg_color5)));
config.addData(new SimplePieInfo(83, getColor(R.color.bg_color34)));
config.splitAngle(1);
config.duration(1200);
pieChartView.applyConfig(config).start();

AnimatedPieViewConfig config = new AnimatedPieViewConfig();
config.addData(new SimplePieInfo(2, getColor(R.color.bg_color4)));
config.addData(new SimplePieInfo(43, getColor(R.color.bg_color5)));
config.splitAngle(1);
config.duration(1200);
pieChartView.applyConfig(config).start();

Unable to click on 2nd Data block when added even number of views

该问题是怎么引起的?

When I add even number of data values in config e.g 2, 4, 6, The pie is unable to click on the 2nd data block. It is not animated on click, and the click event isn't detected even in the SelectListener(). The problem doesn't arise when adding odd numbers of values such as 3,5,7.

重现步骤

Create a pieview with all default config, add even numbers of data blocks using addData (i.e calling addData even number of times). Issue will arise when unable to click on 2nd data block. Now try adding only odd number of data (i.e calling addData odd number of times). And everything runs fine.

报错信息

No error messege, only unable to detect clicks when clicked on 2nd Data block (2nd value added in config)

字体大小导致的显示问题

setTextSize(48)后,文字与甜甜圈和折线交叉了

config.setTextSize(48)
          .setTextLineStrokeWidth(4)// 设置描述文字的指示线宽度
          .setTextLineTransitionLength(50)// 设置描述文字的指示线折角处长度
          .setDirectText(false)

最后一个参数改成true也无法解决这个问题

screenshot_2018-02-01-15-45-14

加载饼图时能否设置默认突出显示某个数据块

该问题是怎么引起的?

1.加载显示饼图时不能默认突出显示某个数据块,一定要点击了才能做到这种效果,希望加载饼图时能默认做到如下效果:
image
2.喜欢该库的点击效果,但是又想要MPAndroidChart那种显示效果,块里可以显示label和图例就最好了,希望以后会有这些功能。
image
image

重现步骤

报错信息

New Version

We are planning to refactor this library in the near future. We will adapt to AndroidX and fix some previous bugs. We very much hope to get your suggestions and let us improve this library.

Please provide your comments under this issue.

Color in ring isn't the same than color in label

The color in the label isn't the same than color show into the pie.
Not issues in the emulator but in a real device.
Color for 61.08% is 1976D2
and the color for 38,92% is 64B5F6
The real colors are the shown in the label

Sin nombre

Any way to change desc font family / typeface?

I've been looking on available methods and there's no way to change typeface. I also checked on library files to see if theres something I can override to change font. No fortune.

Any tips?

当pieInfo值差异过大时候没有成功显示

该问题是怎么引起的?

由于添加的数据差异过大,导致有些比例不是很大的部分无法显示出来

重现步骤

比如插入了四条数据,在华为荣耀4X 上第二条数据显示的是白色。具体插入的数据

    .addData(new SimplePieInfo(0, getColor("FF446767")), true)
                    .addData(new SimplePieInfo(50f, getColor("ff2bbc80")), true)
                    .addData(new SimplePieInfo(1641f, getColor("FFbb76b4")), true)
                    .addData(new SimplePieInfo(109f, getColor("FFFFD28C"),"长文字test"), false)






缺了一块

有概率个别数据出现,当焦点在缺处时它又会出现。

线的长度固定,不根据内容变化怎么操作?

该问题是怎么引起的?

线的长度固定,不根据内容变化怎么操作?

重现步骤

线的长度固定,不根据内容变化怎么操作?

报错信息

线的长度固定,不根据内容变化怎么操作?

文字描述重叠问题

该问题是怎么引起的?

部分比例相对来说会小

重现步骤

config
.addData(new SimplePieInfo(50.9184314356136125, getColor("FFFFD28C"), "长文字test"), false)
.addData(new SimplePieInfo(0.11943538617599236, getColor("FF446767")), true)
.addData(new SimplePieInfo(0.11780274681129415, getColor("FFFFD28C")), true)
.addData(new SimplePieInfo(0.722165651192247, getColor("FFbb76b4")), true)
.addData(new SimplePieInfo(0.6028910840057398, getColor("ff2bbc80")), true)
.addData(new SimplePieInfo(0.1249620647212785, getColor("ff8be8ff")), true)
.addData(new SimplePieInfo(0.158853315195452116, getColor("fffa734d")), true)
.addData(new SimplePieInfo(0.6632297717331086, getColor("ff957de0")), true)
.addData(new SimplePieInfo(0.8226830459369171, getColor("FF446767")), true)

报错信息

How do I reduce the margin/padding around the chart

chart
How do I reduce the margins in the area around the chart which I have highlighted? It seems a bit excessive and would be nice if we had some control

I tried calling the PieManager.setChartContentRect() to change the margin values but that had no effect

AnimatedPieView not rendering properly

该问题是怎么引起的?

we are using PagerAdapter for rendering the graph. The issue is half the graph is rendering on the screen.
1
2
3

重现步骤

报错信息

Add icon to labels

Greetings

This is indeed a great library. I would like to request setting icons for every IPieInfo optionally. Ideally, it could accept a drawable or a vector. Apps supporting <21 must pass a .png while apps where min is 21 can pass a vector. This way the library doesn't have to deal with supporting vectors on older versions.
The icon would be on the side of the label, depending on the positioning and as the label the color should be the same than in the chart.

Image Example

Thanks for the awesome work :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.