zhou-you / Easysegmentedbarview
本库主要提供一个简单易用的自定义分段控件,方便快速实现分段效果,支持xml配置、代码配置、分段规则按均分/比例分、数字分段、文本分段、渐变分段、bar条样式正常/圆形/三角形,segment文字样式、进度设置、进度标记类型设置、分段描述设置、其它更多自定义设置等功能。
Stars: ✭ 455
Programming Languages
java
68154 projects - #9 most used programming language
Labels
Projects that are alternatives of or similar to Easysegmentedbarview
Android Week View
Android Week View is an android library to display calendars (week view or day view) within the app. It supports custom styling.
Stars: ✭ 3,347 (+635.6%)
Mutual labels: custom-view
Pudding
🌟 Pudding use WindowManager(don't need request permission) to pull down a view that are displayed on top their attached window
Stars: ✭ 371 (-18.46%)
Mutual labels: custom-view
Wmzpagecontroller
分页控制器,替换UIPageController方案,具备完整的生命周期,多种指示器样式,多种标题样式,可悬浮,支持ios13暗黑模式(仿优酷,爱奇艺,今日头条,简书,京东等多种标题菜单) (Pagination controller with full life cycle, multiple indicator styles, multiple title styles)
Stars: ✭ 405 (-10.99%)
Mutual labels: segment
Android Ruler Picker
Android custom view that uses ruler for picking the number from given range.
Stars: ✭ 335 (-26.37%)
Mutual labels: custom-view
Sliding Panel
Android sliding panel that is part of the view hierarchy, not above it.
Stars: ✭ 433 (-4.84%)
Mutual labels: custom-view
Material Calendar View
📅 Material Design Calendar compatible with API 11+
Stars: ✭ 360 (-20.88%)
Mutual labels: custom-view
Cvcalendar
A custom visual calendar for iOS 8+ written in Swift (>= 4.0).
Stars: ✭ 3,435 (+654.95%)
Mutual labels: custom-view
Voiceripple
Voice Record Button that has ripple effect with users voice
Stars: ✭ 379 (-16.7%)
Mutual labels: custom-view
Uicollectionview Layouts Kit
📐 A set of custom layouts for UICollectionView with examples [Swift 5.3, iOS 12].
Stars: ✭ 410 (-9.89%)
Mutual labels: custom-view
Percentagechartview
An Android percentage chart that displays the progress of any single given task or information.
Stars: ✭ 324 (-28.79%)
Mutual labels: custom-view
Compositionavatar
Android composition avatar. 仿QQ讨论组头像
Stars: ✭ 371 (-18.46%)
Mutual labels: custom-view
Widgetcase
自定义控件模块库:各种风格的自定义控件,拿来就用,API文档详细,持续集成,长期维护,有问必答;
Stars: ✭ 440 (-3.3%)
Mutual labels: custom-view
Android Otpview Pinview
A custom view to enter otp of different sizes used usually in cases of authentication.
Stars: ✭ 422 (-7.25%)
Mutual labels: custom-view
EasySegmentedBarView
本库主要提供一个简单易用的自定义分段控件,方便快速实现分段效果,支持xml配置、代码配置、分段规则按均分/比例分、数字分段、文本分段、渐变分段、bar条样式正常/圆形/三角形,segment文字样式、进度设置、进度指示标记类型设置、分段描述设置、分段间距、其它更多自定义设置等功能。
功能
- 支持xml配置;
- 支持通过代码配置;
- 支持bar条分段规则按均分/比例分;
- 支持数字分段、文本分段;
- 支持bar条渐变分段;
- 支持设置bar条side样式正常/圆形/三角形;
- 支持segment文字样式;
- 支持进度设置,unit单位显示,进度为数字或指定文本;
- 支持进度指示标记类型设置,上部显示/覆盖叠加显示;
- 支持进度指示三角形是否显示;
- 支持分段间距设置;
- 支持其它更多自定义设置、包括颜色、长宽、间距等;
关于我
联系方式
本群旨在为使用我github项目的人提供方便,如果遇到问题欢迎在群里提问。
欢迎加入QQ交流群(Q1群已满,请加入Q2群)
演示(请star支持)
版本说明
Demo下载
用法介绍
build.gradle设置
dependencies {
compile 'com.zhouyou:segmentedbar:1.0.9'
}
想查看所有版本,请点击下面地址。
在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 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
感谢
在此感谢SegmentedBarView-Android作者提供的开源库,对于本库的完成提供了很大的帮助。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].