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

StepView

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

FlowViewHorizontal
FlowViewVertical

具体的用法不写了，下面是项目的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