HDCylinder
一個非常輕量級別的圓角圓柱形仍劈，支持漸動畫以及各種自定義屬性
barchart.gif
Github地址
https://github.com/yinhaide/HDCylinder
特性
支持動畫過度
圓滑的圓角顯示
支持選中變大霜幼、變色、氣泡提示
支持各種自定義屬性
如何快速集成
導入方式
在工程級別的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;//動畫持續(xù)時間
范例
注意點:如果要設置漸變色的畫注意其實顏色與結(jié)束顏色要保持一致
[XML]
<com.yhd.cylinder.CylinderView
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[]類表,規(guī)則如下
* float[0]:前面柱形高度百分比(0-1f)
* float[1]:后面柱形高度百分比(0-1f)
*/
List<float[]> heightArray = new ArrayList<>();
//x坐標軸的文字描述列表
List<String> xAxisArray = new ArrayList<>();
//點擊選中之后顯示的文字.需要換行的用'/'分開
List<String> 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);
分享設計思路
繪制圓柱的難點在于當高度在一個寬度半徑范圍之內(nèi)，直接調(diào)用drawRoundRect是不會得到預期值的，需要分別處理
- 第一步：圓柱高度小于半徑高度繪制扇形
- 第二步：圓柱高度大于一個半徑下兩個半徑繪制半圓加長方形
- 第三部：圓柱高度大于直徑繪制圓柱形
這個項目會持續(xù)更新中...
都看到這里了揭鳞，如果覺得寫的可以或者對你有幫助的話，順手給個星星點下Star~
這個控件內(nèi)部采用一個Fragment框架梆奈，如果有興趣的話可以去了解一下
關于我
- Email: 123302687@qq.com
- Github: https://github.com/yinhaide
- 簡書: http://www.reibang.com/u/33c3dd2ceaa3
- CSDN: https://blog.csdn.net/yinhaide
