HDCylinder
一個非常輕量級別的圓角圓柱,支持漸動畫以及各種自定義屬性
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;//動畫持續時間
範例
注意點:如果要設置漸變色的畫注意其實顏色與結束顏色要保持一致
[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[]類表,規則如下
* 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);
分享設計思路
繪製圓柱的難點在於當高度在一個寬度半徑範圍之內,直接調用drawRoundRect是不會得到預期值的,需要分別處理
- 第一步:圓柱高度小於半徑高度繪製扇形
- 第二步:圓柱高度大於一個半徑下兩個半徑繪製半圓加長方形
- 第三部:圓柱高度大於直徑繪製圓柱形
這個項目會持續更新中…
都看到這裏了,如果覺得寫的可以或者對你有幫助的話,順手給個星星點下Star~
這個控件內部採用一個Fragment框架,如果有興趣的話可以去了解一下
關於我
- Email: [email protected]
- Github: https://github.com/yinhaide
- 簡書: https://www.jianshu.com/u/33c3dd2ceaa3
- CSDN: https://blog.csdn.net/yinhaide