zhangxuyang321 / StepView

流程步骤指示器 stepview

StepView

introduce

StepView is extracted from the software developed by my company and do the reinforcement, divided into horizontal and vertical version, color size freely adjustable, flexible to use!

中文版在这里

UI

Download Demo

How to use

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>

Horizontal View

Attribute is introduced

Attribute	Describe	Type	Default value	Whether must
h_bg_radius	Background circle radius	dimension	5	No
h_pro_radius	Has completed the radius of the circles	dimension	2	No
h_bg_width	Background line width	dimension	3	No
h_bg_color	Background Color	color	#cdcbcc	No
h_pro_width	The width of the line has been completed	dimension	2	No
h_pro_color	The completed color	color	#029dd5	No
h_text_padding	Text and distance of the circle	dimension	10	No
h_time_padding	Time and distance of the circle	dimension	15	No
h_max_step	Total steps	int	5	No
h_pro_step	Step has been completed	int	1	No
h_textsize	textsize	dimension	10	No

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' />

Code

    /**
     * Progress Settings
     * @param progress  Have completed a few steps
     * @param maxStep  Total steps
     * @param titles   	    Step name
     * @param times      Every step of the completion time
     */
    public void setProgress(int progress, int maxStep, String[] titles, String[] times);
    
    /**
     * Color Settings
     * @param map <text,color>
     */
    public void setKeyColor(Map<String, String> map);

Vertical View

Attribute is introduced

Attribute	Describe	Type	Default value	Whether must
v_bg_radius	Background circle radius	dimension	5	No
v_pro_radius	Has completed the radius of the circle	dimension	2	No
v_bg_width	Background line width	dimension	3	No
v_bg_color	Background Color	color	#cdcbcc	No
v_pro_width	The width of the line has been completed	dimension	2	No
v_pro_color	The completed color	color	#029dd5	No
v_interval	interval	dimension	80	No
v_bgPositionX	In a horizontal position	dimension	100	No
v_textPaddingLeft	The distance of text and lines	dimension	10	No
v_timePaddingRight	The distance of time and lines	dimension	15	No
v_max_step	Total steps	int	5	No
v_pro_step	Step has been completed	int	1	No
v_textsize	Text size	dimension	10	No
v_textMoveTop	The text on the vertical distance	dimension	5	No
v_timeMoveTop	The time on the vertical distance	dimension	4	No

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" />

Code

    /**
     * Progress Settings
     * @param progress Have completed a few steps
     * @param maxStep  Total steps
     * @param titles    Step description
     * @param times    Time description
     */
    public void setProgress(int progress, int maxStep, String[] titles, String[] times);
    
    
    /**
     *  Color Settings
     * @param map <text,color>
     */
    public void setKeyColor(Map<String, String> map);
    

Use attention

###All directions

• When title[] and time[] uploading the null does not show the indicator、words and time.

• Min steps sum(max_step)>=2 and >= finished steps(pro_step)

• The unit of the font’s size is dp

• The color setting of the concrete steps is according to the key from the map whether title[] contain or not to make a decision whether change or not

• Only finished steps can set color individually, unfinished steps all use the color from bg_color

Transverse

• Lateral indicator counts intervals between steps automatically
• Lateral indicator is placed in the middle automatically, when you set paddingLeft ,you do not need to set paddingRight
• Lateral indicator can not slide transversely

###Vertical

• Vertical indicator need to set the intervals between steps(v_interval)
• Vertical indicator can combine with ScrollView to get slide
• Vertical indicator doesn’t use item reusing, you’d better use listview if the date size is bigger
• Vertical indicator’s word drawing is different, which leads to words and *
• steps nodes(O) not in the same horizontal, you can adapt v_textMove Top with v_timeMove Top

LICENSE 开源协议

Apache License Version 2.0