Android自定義控件圓角圓柱形

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框架，如果有興趣的話可以去了解一下

• https://github.com/yinhaide/HDRocket

關於我

• Email: [email protected]
• Github: https://github.com/yinhaide
• 簡書: https://www.jianshu.com/u/33c3dd2ceaa3
• CSDN: https://blog.csdn.net/yinhaide