简易通用流程 StepView
JosYQM
8年前
<h2>StepView</h2> <h2>介绍</h2> <p>StepView是由自己公司开发的软件中抽取出来又做了强化,分为横向版和竖向版,颜色大小随意可调,灵活好用!</p> <h2>UI</h2> <p><a href="/misc/goto?guid=4959737645299206777" rel="nofollow,noindex">Download Demo</a></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/97c65220b30f9276670b7b9fba21ff8c.png"> <img src="https://simg.open-open.com/show/d516535d3280ff420abe5c5ed6fec711.png"></p> <h2>使用</h2> <h3>Gradle</h3> <pre> <code class="language-java">compile 'com.xyz.step:step:1.0.4'</code></pre> <h3>Maven</h3> <pre> <code class="language-java"><dependency> <groupId>com.xyz.step</groupId> <artifactId>step</artifactId> <version>1.0.4</version> <type>pom</type> </dependency></code></pre> <h3>横向</h3> <p>属性介绍</p> <table> <thead> <tr> <th>属性</th> <th>介绍</th> <th>类型</th> <th>默认</th> <th>是否必须</th> </tr> </thead> <tbody> <tr> <td>h_bg_radius</td> <td>背景 ○ 的半径</td> <td>dimension</td> <td>5</td> <td>否</td> </tr> <tr> <td>h_pro_radius</td> <td>已完成 ○ 的半径</td> <td>dimension</td> <td>2</td> <td>否</td> </tr> <tr> <td>h_bg_width</td> <td>背景线的宽度</td> <td>dimension</td> <td>3</td> <td>否</td> </tr> <tr> <td>h_bg_color</td> <td>背景的颜色</td> <td>color</td> <td>#cdcbcc</td> <td>否</td> </tr> <tr> <td>h_pro_width</td> <td>已完成线的宽度</td> <td>dimension</td> <td>2</td> <td>否</td> </tr> <tr> <td>h_pro_color</td> <td>已完成的颜色</td> <td>color</td> <td>#029dd5</td> <td>否</td> </tr> <tr> <td>h_text_padding</td> <td>步骤描述文字(title)与○的距离</td> <td>dimension</td> <td>10</td> <td>否</td> </tr> <tr> <td>h_time_padding</td> <td>时间与○的距离</td> <td>dimension</td> <td>15</td> <td>否</td> </tr> <tr> <td>h_max_step</td> <td>总步骤(○)的个数</td> <td>int</td> <td>5</td> <td>否</td> </tr> <tr> <td>h_pro_step</td> <td>已完成步骤</td> <td>int</td> <td>1</td> <td>否</td> </tr> <tr> <td>h_textsize</td> <td>字体大小</td> <td>dimension</td> <td>10</td> <td>否</td> </tr> </tbody> </table> <p>layout</p> <pre> <code class="language-java"><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></pre> <p>代码</p> <pre> <code class="language-java">/** * 进度设置 * @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);</code></pre> <h3>竖向</h3> <p>属性介绍</p> <table> <thead> <tr> <th>属性</th> <th>介绍</th> <th>类型</th> <th>默认</th> <th>是否必须</th> </tr> </thead> <tbody> <tr> <td>v_bg_radius</td> <td>背景 ○ 的半径</td> <td>dimension</td> <td>5</td> <td>否</td> </tr> <tr> <td>v_pro_radius</td> <td>已完成 ○ 的半径</td> <td>dimension</td> <td>2</td> <td>否</td> </tr> <tr> <td>v_bg_width</td> <td>背景线的宽度</td> <td>dimension</td> <td>3</td> <td>否</td> </tr> <tr> <td>v_bg_color</td> <td>背景的颜色</td> <td>color</td> <td>#cdcbcc</td> <td>否</td> </tr> <tr> <td>v_pro_width</td> <td>已完成线的宽度</td> <td>dimension</td> <td>2</td> <td>否</td> </tr> <tr> <td>v_pro_color</td> <td>已完成的颜色</td> <td>color</td> <td>#029dd5</td> <td>否</td> </tr> <tr> <td>v_interval</td> <td>○ 与 ○之间的间距</td> <td>dimension</td> <td>80</td> <td>否</td> </tr> <tr> <td>v_bgPositionX</td> <td>指示线距view左边缘的距离</td> <td>dimension</td> <td>100</td> <td>否</td> </tr> <tr> <td>v_textPaddingLeft</td> <td>步骤描述文字与指示线的距离</td> <td>dimension</td> <td>10</td> <td>否</td> </tr> <tr> <td>v_timePaddingRight</td> <td>时间与指示线的距离</td> <td>dimension</td> <td>15</td> <td>否</td> </tr> <tr> <td>v_max_step</td> <td>总步骤(○)的个数</td> <td>int</td> <td>5</td> <td>否</td> </tr> <tr> <td>v_pro_step</td> <td>已完成步骤</td> <td>int</td> <td>1</td> <td>否</td> </tr> <tr> <td>v_textsize</td> <td>字体大小</td> <td>dimension</td> <td>10</td> <td>否</td> </tr> <tr> <td>v_textMoveTop</td> <td>指示器右侧文字位置上下移动的距离</td> <td>dimension</td> <td>5</td> <td>否</td> </tr> <tr> <td>v_timeMoveTop</td> <td>指示器左侧文字位置上下移动的距离</td> <td>dimension</td> <td>4</td> <td>否</td> </tr> </tbody> </table> <p>layout</p> <pre> <code class="language-java"><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></pre> <p>代码</p> <pre> <code class="language-java">/** * 进度设置 * @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);</code></pre> <h2>使用注意</h2> <h3>全部</h3> <ul> <li>title[] 和 time[] 传null 的时候则不显示指示器不显示文字与时间</li> <li>最小步骤总和(max_step)>=2且>=已完成步骤(pro_step)</li> <li>字体大小单位是dp</li> <li>具体步骤颜色的设置是根据步骤描述(title[])中是否包含所传入map的key值来决定是否更改的,注意是"包含"</li> <li>只有已完成步骤才可以单独设置颜色,未完成步骤统一使用的是bg_color所得到的颜色</li> </ul> <h3>横向</h3> <ul> <li>横向指示器自动计算步骤之间的间隔</li> <li>横向指示器自动居中显示,当设定paddingLeft后无需再设定paddingRight</li> <li>横向指示器不可以横向滑动</li> </ul> <h3>竖向</h3> <ul> <li>竖向指示器需单独设置步骤之间的间隔(v_interval)</li> <li>竖向指示器可与ScrollView结合使用,从而达到滑动</li> <li>竖向指示器并没有使用item复用,如果数据量较大建议使用listview</li> <li>竖向指示器绘制文字有所不同,也因此导致文字与步骤节点(○)不在一个水平线上,可通过v_textMoveTop与v_timeMoveTop适配</li> </ul> <h2>LICENSE 开源协议</h2> <pre> <code class="language-java">Apache License Version 2.0</code></pre> <p> </p> <p> </p> <p> </p>