EasySegmentedBarView簡單易用的自定義分段控件,方便快速實現分段效果

github源碼地址：https://github.com/zhou-you/EasySegmentedBarView

EasySegmentedBarView

本庫主要提供一個簡單易用的自定義分段控件，方便快速實現分段效果，支持xml配置、代碼配置、分段規則按均分/比例分、數字分段、文本分段、漸變分段、bar條樣式正常/圓形/三角形，segment文字樣式、進度設置、進度指示標記類型設置、分段描述設置、分段間距、其它更多自定義設置等功能。

功能

• 支持xml配置；
• 支持經過代碼配置；
• 支持bar條分段規則按均分/比例分；
• 支持數字分段、文本分段；
• 支持bar條漸變分段；
• 支持設置bar條side樣式正常/圓形/三角形；
• 支持segment文字樣式；
• 支持進度設置，unit單位顯示，進度爲數字或指定文本；
• 支持進度指示標記類型設置,上部顯示/覆蓋疊加顯示；
• 支持進度指示三角形是否顯示；
• 支持分段間距設置；
• 支持其它更多自定義設置、包括顏色、長寬、間距等；

關於我

聯繫方式

本羣旨在爲使用我github項目的人提供方便，若是遇到問題歡迎在羣裏提問。

歡迎加入QQ交流羣:581235049

演示（請star支持）

版本說明

Demo下載

用法介紹

build.gradle設置

dependencies {
 compile 'com.zhouyou:segmentedbar:1.0.1'
}

想查看全部版本，請點擊下面地址。

在xml佈局中

<com.zhouyou.view.segmentedbar.SegmentedBarView
                android:id="@+id/barView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                app:sbv_empty_segment_text="No segments"
                app:sbv_segment_gap_width="5dp"
                app:sbv_segment_rule="average"
                app:sbv_segment_text_size="15sp"
                app:sbv_show_description_text="true"
                app:sbv_side_style="rounded"
                app:sbv_side_text_style="twoSided"
                app:sbv_value_sign_height="30dp"
                app:sbv_value_sign_round="8dp"
                app:sbv_value_sign_width="100dp"
                />

具體屬性設置

屬性	類型	默認值	說明
sbv_side_style	enum	rounded	分段條樣式normal/rounded/angle,normal:正常樣式 rounded:圓角樣式 angle:三角樣式
sbv_sliderType	enum	進度框	支持設置：Sign/Slider Sign:進度框指示，在分段條上部 Slider:滑塊指示，覆蓋在分段條上
sbv_sliderImg	reference	沒有默認圖片	設置sbv_sliderType屬性爲Slider模式時，須要設置圖片，例如：app:sbv_sliderImg="@mipmap/slider"
sbv_segment_gap_width	dimension	2dp	每一個分段之間的間隙，若是不須要能夠設置0dp
sbv_side_text_style	enum	oneSided	分段條上文字顯示樣式oneSided/twoSided oneSided例如：<50 twoSided 例如：40-60
sbv_segment_text_size	dimension	14sp	分段條上文字顏色
sbv_bar_height	dimension	24dp	分段條高度
sbv_show_segment_text	boolean	true （顯示）	是否顯示分段條上文字
sbv_show_description_text	boolean	false(不顯示)	是否顯示分段條底部說明文字
sbv_show_description_top_text	boolean	false(不顯示)	是否顯示分段條上部說明文字
sbv_segment_bg	boolean	false(不顯示)	是否顯示分段條背景
sbv_segment_startcolor	color	紅色	漸變背景的起始顏色（sbv_segment_bg屬性爲true才起做用 ）
sbv_segment_endcolor	color	綠色	漸變背景的結束顏色（sbv_segment_bg屬性爲true才起做用 ）
sbv_empty_segment_text	string	Empty	空分段展現的提示文字
sbv_empty_segment_background	color	#858585	空分段bar條的背景顏色
sbv_value_sign_background	color	#7492E2	進度塊背景顏色
sbv_value_sign_border_color	color	#7492E2	進度塊邊框顏色
sbv_value_text_size	dimension	14sp	進度文字大小
sbv_value_sign_border_size	dimension	2dp	分段條上部value背景框邊框粗細
sbv_value_sign_height	dimension	32dp	進度塊高度
sbv_value_sign_width	dimension	72dp	進度塊寬度
sbv_value_sign_round	dimension	4dp	進度塊圓角大小
sbv_arrow_height	dimension	5dp	進度塊上三角指示高度
sbv_arrow_width	dimension	10dp	進度塊上三角指示寬度
sbv_show_sign_boder	boolean	false(不顯示)	是否顯示進度塊邊框
sbv_description_text_color	color	Color.DKGRAY	描述文字字體顏色
sbv_description_text_size	dimension	14sp	描述文字字體大小
sbv_description_box_height	dimension	24dp	分段條上部描述文字方塊高度
sbv_description_box_top_height	dimension	24dp	分段條底部描述文字方塊高度
sbv_descriptionAlign	enum	Center	分段條底部描述文字對齊方式支持Center/Both模式，Center:居中顯示 ，Both：兩端顯示
sbv_descriptionTopAlign	enum	Center	分段條上部部描述文字對齊方式支持Center/Both模式，Center:居中顯示 ，Both：兩端顯示
sbv_segment_rule	enum	average	設置分段規則scale/average模式，scale：按比例分段 average：平均分段

在代碼中

方式一

SegmentedBarView barView = (SegmentedBarView) findViewById(R.id.barView);
        ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 9.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(9.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        barView.setValueWithUnit(13.96f, "10<sup>12</sup>/l");
        //barView.setSegmentSideRule(SegmentedBarViewSideRule.average);//經過代碼設置規則
        //barView.setValue(13.96f);
        //barView.setValue(13.96f,"Optimal");
        barView.setSegments(segments);

方式二

SegmentedBarView barView = new SegmentedBarView(this);
        ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 6.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(6.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        barView.setValue(4.96f);
        barView.setUnit("m");
        barView.setSideTextStyle(SegmentedBarViewSideTextStyle.TWO_SIDED);
        barView.setSideStyle(SegmentedBarViewSideStyle.ROUNDED);
        barView.setSegments(segments);
        barView.setShowDescriptionText(false);
        barView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        barView.setPadding(0, getResources().getDimensionPixelSize(R.dimen.vertical_padding), 0, 0);
        sideStyleLayout.addView(barView);

方式三

ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 6.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(6.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        SegmentedBarView barView = SegmentedBarView.builder(this)
                .segments(segments)
                .value(5.25f)
                .unit("ml<sup>2</sup>")
                .showDescriptionText(true)
                .sideStyle(SegmentedBarViewSideStyle.ANGLE)
                .build();
        barView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        barView.setPadding(0, getResources().getDimensionPixelSize(R.dimen.vertical_padding), 0, 0);
        javaCodeLayout.addView(barView);

具體方法設置

方法	說明
setBarHeight(int barHeight)	設置分段條高度
setDescriptionBoxHeight(int descriptionBoxHeight)	分段條底部部描述文字方塊高度
setDescriptionTextColor(int descriptionTextColor)	分段條底部描述文字顏色
setDescriptionTextSize(int descriptionTextSize)	分段條底部描述文字字體大小
setDrawSegmentBg(boolean drawSegmentBg)	設置是否顯示分段條背景
setEmptySegmentColor(int emptySegmentColor)	設置沒有分段時分段條顏色
setGapWidth(int gapWidth)	設置分段之間的間距
setGradientBgSegmentColor(int startColor, int endColor)	設置分段條背景的漸變色，啓始顏色值和結束顏色值
setSegments(List<Segment> segments)	設置分段集合
setSegmentSideRule(int sideRule)	設置分段規則scale/average模式，scale：按比例分段 average：平均分段
setSegmentTextColor(int segmentTextColor)	分段條上文字顏色
setSegmentTextSize(int segmentTextSize)	分段條上文字字體大小
setShowDescriptionText(boolean showDescriptionText)	是否顯示分段條底部的描述文字
setShowSegmentText(boolean showSegmentText)	是否顯示分段條上的文字
setSideStyle(int sideStyle)	分段條樣式normal/rounded/angle,normal:正常樣式 rounded:圓角樣式 angle:三角樣式 ，例如：setSideStyle(SegmentedBarViewSideStyle.NORMAL)
setSideTextStyle(int sideTextStyle)	分段條上文字顯示樣式SegmentedBarViewSideTextStyle.TWO_SIDED和SegmentedBarViewSideTextStyle.ONE_SIDED
setUnit(String unit)	設置單位 ，例如："ml<sup>2</sup>"
setValue(Float value)	設置當前進度值
setValue(float value, String valueText)	設置當前進度值，例如（80，「優秀」）,進度框上文字不會顯示80，會顯示「優秀」，主要用於轉換使用
setValueSegment(Integer valueSegment)	設置文字分段時，進度位置，例如：分3段，從0開始 ValueSegment=1，表示進度塊在第二個位置上展現
setValueSegmentText(String valueSegmentText)	設置分段進度塊上的文字描述，配合setValueSegment使用，只針對文字分段沒有數字進度，具體看Demo4，非數字分段
setValueSignColor(int valueSignColor)	進度框背景顏色
setValueSignSize(int width, int height)	進度框大小設置
setValueTextColor(int valueTextColor)	進度框上文字字體顏色
setValueTextSize(int valueTextSize)	進度框上文字字體大小
setValueWithUnit(Float value, String unitHtml)	設置有單位的進度

Other

其它更多設置和使用方法，請參考Demo

感謝

該庫部分思想借鑑瞭如下項目：
https://github.com/gspd-mobi/SegmentedBarView-Android
在此特別感謝上述做者，喜歡原做的能夠去使用原項目。同時歡迎你們下載體驗本項目，若是使用過程當中遇到什麼問題，歡迎反饋。

歡迎加入個人圈子