android 柱体控件,Android自定义控件圆角圆柱形
HDCylinder
一个非常轻量级别的圆角圆柱形，支持渐动画以及各种自定义属性
barchart.gif
Github地址
特性
支持动画过度
圆滑的圆角显示
支持选中变大、变色、气泡提示
支持各种自定义属性
如何快速集成
导入方式
在工程级别的build.gradle添加
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
在应用级别的build.gradle添加
api 'com.github.yinhaide:HDCylinder:0.0.1'
可设置属性
//颜色属性
private int behindColor = Color.parseColor("#8AFFA239");//背后柱形的颜色
private int behindSelectColor = Color.parseColor("#FFFFA239");//背后柱形的颜色
private int frontColor = Color.parseColor("#8A398EFF");//前面柱形的颜色
private int frontSelectColor = Color.parseColor("#FF398EFF");//前面柱形的颜色
//柱形属性
private float barWidthRatio = 0.05f;//正常柱形宽度百分比
private float selectBarWidthRatio = 0.07f;//选中的柱形宽度百分比
private float distanceRatio = 0.05f;//柱形间距宽度百分比
private float marginTextRatio = 0.03f;//柱形距离横坐标点娿距离百分比
//画板四周边距
private float marginLeftRatio = 0.05f;//画板左边距百分比
private float marginRightRatio = 0.05f;//画板右边距百分比
private float marginTopRatio = 0.05f;//画板上边距百分比
private float marginBottomRatio = 0.05f;//画板下边距百分比
//文字属性
private float textRatio = 0.05f;//文字的大小百分比
//气泡的属性
private float bubbleHeightRatio = 0.2f;//泡泡的高度百分比
private float bubbleWidthRatio = 0.2f;//泡泡的长度百分比
private float triangleRatio = 0.02f;//尖部三角形边长百分比
//动画
private int animationTime = 1000;//动画持续时间
范例
注意点:如果要设置渐变色的画注意其实颜色与结束颜色要保持一致
[XML]
android:background="@color/colorWhite"
android:id="@+id/bcv"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cy_barWidthRatio="0.05"
app:cy_selectBarWidthRatio="0.07"/>
[JAVA]
/**
* 柱形高度分布情况,是一个String[]类表,规则如下
* float[0]:前面柱形高度百分比(0-1f)
* float[1]:后面柱形高度百分比(0-1f)
*/
List heightArray = new ArrayList<>();
//x坐标轴的文字描述列表
List xAxisArray = new ArrayList<>();
//点击选中之后显示的文字.需要换行的用'/'分开
List tipsArray = new ArrayList<>();
//设置默认值
heightArray.add(new float[]{0.02f, 0.5f});
heightArray.add(new float[]{0.05f, 0.8f});
heightArray.add(new float[]{0.08f, 0.9f});
heightArray.add(new float[]{0.1f, 1f});
heightArray.add(new float[]{0.3f, 0.5f});
heightArray.add(new float[]{0.4f, 0.7f});
xAxisArray.add("1");
xAxisArray.add("2");
xAxisArray.add("3");
xAxisArray.add("4");
xAxisArray.add("5");
xAxisArray.add("6");
tipsArray.add("Deephhhhdd 20 min/Light 18 min");
tipsArray.add("Deep 10 min/Light 15 min");
tipsArray.add("Deep 30 min/Light 28 min");
tipsArray.add("Deep 40 min/Light 16 min");
tipsArray.add("Deep/Light");
tipsArray.add("Deep 50 min/Light 18 min");
cylinderView.setdataSource(heightArray, xAxisArray, tipsArray);
分享设计思路
绘制圆柱的难点在于当高度在一个宽度半径范围之内，直接调用drawRoundRect是不会得到预期值的，需要分别处理
第一步：圆柱高度小于半径高度绘制扇形
第二步：圆柱高度大于一个半径下两个半径绘制半圆加长方形
第三部：圆柱高度大于直径绘制圆柱形
这个项目会持续更新中...
都看到这里了，如果觉得写的可以或者对你有帮助的话，顺手给个星星点下Star~
这个控件内部采用一个Fragment框架，如果有兴趣的话可以去了解一下
关于我
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！