第三方开源库：步骤显示控件：StepView + timelineview + TimelineView

StepView

github：https://github.com/zhangxuyang321/StepView
有横向和纵向2种方向。

FlowViewHorizontalFlowViewVertical

具体的用法不写了，下面是项目的README.md

Gradle

compile 'com.xyz.step:step:1.0.4'

Maven

<dependency>  <groupId>com.xyz.step</groupId>  <artifactId>step</artifactId>  <version>1.0.4</version>  <type>pom</type></dependency>

横向

属性介绍

属性 介绍 类型 默认 是否必须 h_bg_radius 背景 ○ 的半径 dimension 5 否 h_pro_radius 已完成 ○ 的半径 dimension 2 否 h_bg_width 背景线的宽度 dimension 3 否 h_bg_color 背景的颜色 color cdcbcc 否 h_pro_width 已完成线的宽度 dimension 2 否 h_pro_color 已完成的颜色 color 029dd5 否 h_text_padding 步骤描述文字(title)与○的距离 dimension 10 否 h_time_padding 时间与○的距离 dimension 15 否 h_max_step 总步骤(○)的个数 int 5 否 h_pro_step 已完成步骤 int 1 否 h_textsize 字体大小 dimension 10 否

layout

<com.xyz.step.FlowViewHorizontal        android:id="@+id/hflowview4"        android:layout_width="match_parent"        android:layout_height="80dp"        android:paddingLeft="30dp"        app:h_bg_radius="6dp"        app:h_bg_width='4dp'        app:h_pro_radius='4dp'        app:h_pro_width="2dp"        app:h_text_padding='10dp'        app:h_textsize='10dp'        app:h_time_padding='17dp' />

代码

    /**     * 进度设置     * @param progress 已完成到哪部     * @param maxStep  总步骤     * @param titles   步骤名称     * @param times    完成时间     */    public void setProgress(int progress, int maxStep, String[] titles, String[] times);    /**     * 颜色设置 键值是步骤标题所包含的字符     * @param map 标题-颜色     */    public void setKeyColor(Map<String, String> map);

竖向

属性介绍

属性 介绍 类型 默认 是否必须 v_bg_radius 背景 ○ 的半径 dimension 5 否 v_pro_radius 已完成 ○ 的半径 dimension 2 否 v_bg_width 背景线的宽度 dimension 3 否 v_bg_color 背景的颜色 color cdcbcc 否 v_pro_width 已完成线的宽度 dimension 2 否 v_pro_color 已完成的颜色 color 029dd5 否 v_interval ○ 与 ○之间的间距 dimension 80 否 v_bgPositionX 指示线距view左边缘的距离 dimension 100 否 v_textPaddingLeft 步骤描述文字与指示线的距离 dimension 10 否 v_timePaddingRight 时间与指示线的距离 dimension 15 否 v_max_step 总步骤(○)的个数 int 5 否 v_pro_step 已完成步骤 int 1 否 v_textsize 字体大小 dimension 10 否 v_textMoveTop 指示器右侧文字位置上下移动的距离 dimension 5 否 v_timeMoveTop 指示器左侧文字位置上下移动的距离 dimension 4 否

layout

<com.xyz.step.FlowViewVertical        android:id="@+id/vflow"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingBottom="10dp"        android:paddingRight="10dp"        android:paddingTop="10dp"        app:v_bgPositionX="40dp"        app:v_bg_color="#029dd5"        app:v_bg_radius="8dp"        app:v_bg_width="4dp"        app:v_interval="80dp"        app:v_max_step="10"        app:v_pro_color="#cdcbcc"        app:v_pro_radius="8dp"        app:v_pro_step="9"        app:v_pro_width="4dp"        app:v_textMoveTop="7dp"        app:v_textsize="14dp" />

代码

    /**     * 进度设置     * @param progress 当前进行到哪一步     * @param maxStep  总的步骤     * @param titles   文字描述(指示线右侧)     * @param times    时间描述(指示线左侧)     */    public void setProgress(int progress, int maxStep, String[] titles, String[] times);    /**     * 颜色设置 键值是步骤标题所包含的字符     * @param map 标题-颜色     */    public void setKeyColor(Map<String, String> map);

使用注意

全部

• title[] 和 time[] 传null 的时候则不显示指示器不显示文字与时间
• 最小步骤总和(max_step)>=2且>=已完成步骤(pro_step)
• 字体大小单位是dp
• 具体步骤颜色的设置是根据步骤描述(title[])中是否包含所传入map的key值来决定是否更改的,注意是”包含”
• 只有已完成步骤才可以单独设置颜色,未完成步骤统一使用的是bg_color所得到的颜色

横向

• 横向指示器自动计算步骤之间的间隔
• 横向指示器自动居中显示,当设定paddingLeft后无需再设定paddingRight
• 横向指示器不可以横向滑动

竖向

• 竖向指示器需单独设置步骤之间的间隔(v_interval)
• 竖向指示器可与ScrollView结合使用,从而达到滑动
• 竖向指示器并没有使用item复用,如果数据量较大建议使用listview
• 竖向指示器绘制文字有所不同,也因此导致文字与步骤节点(○)不在一个水平线上,可通过v_textMoveTop与v_timeMoveTop适配

timelineview

github:https://github.com/WrBug/timelineview
不可以同时设置时间和步骤。

效果图

gradle

compile 'com.wrbug:timelineview:1.0.0'

xml

基本：

<com.wrbug.timeline.TimeLineView    android:id="@+id/tlv1"    android:layout_width="wrap_content"    android:layout_height="50dp"/>

详细：

<com.wrbug.opensources.TimeLineView    android:id="@+id/timeLineView3"    android:layout_width="match_parent"    android:layout_height="50dp"    android:layout_margin="20dp"    app:preCircleColor="#0044ff"    app:preLineColor="#333333"    app:startedCircleColor="#880000"    app:startedLineColor="#ff0000"    app:textSize="12sp"/>

JAVA

数据可以是集合或数组

tlv1 = (TimeLineView) findViewById(R.id.tlv1);tlv1.setPointStrings(list, 2);tlv2 = (TimeLineView) findViewById(R.id.tlv2);tlv2.setPointStrings(array,3);

TimeLineView mView=(TimeLineView) findViewById(R.id.timeLineView3);mView.builder()    .pointStrings(txts, 1)    .startedCircleColor(Color.BLUE)    .underwayCircleColor(Color.BLUE)    .preCircleColor(Color.GRAY)    .startedLineColor(Color.BLUE)    .preLineColor(Color.GRAY)    .startedStringColor(Color.BLUE)    .underwayStringColor(Color.BLUE)    .preStringColor(Color.GRAY)    .load();   //开始绘制

XML属性 和方法

属性 类型 说明 textSize float 文本大小 preLineColor int 未开始状态线条颜色 startedLineColor int 已进行状态线条颜色 preCircleColor int 未开始状态圆颜色 underwayCircleColor int 进行中状态圆颜色 startedCircleColor int 已进行状态圆颜色 preStringColor int 未开始状态文本颜色 underwayStringColor int 进行中状态文本颜色 startedStringColor int 已进行状态文本颜色 radius int 圆半径 lineWidth float 线条宽度 方法 类型 说明 pointStrings（） List/String[] 状态文本

TimelineView