Android StepsView 步骤控件

最新推荐文章于 2025-01-14 09:31:20 发布

原创最新推荐文章于 2025-01-14 09:31:20 发布 · 2.8k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

android 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一款自定义步骤条控件的实现方法，支持缩放和透明动画效果，参数可自定义，适用于Android项目。文章提供了XML布局和Java代码示例，展示了如何设置步骤条的文字、颜色、动画等属性。

文章目录

前言
一、先看效果
二、使用方法
- 1.xml代码
- 2.java代码
总结

前言

最近项目需要使用步骤条,网上找了一下没有找到合适的.但感觉实现的方式可以借鉴,就结合项目自己花时间写了一个.里面的各个参数都可以自定义.代码可以在GitHub上下载.

步骤支持两种动画效果:缩放,

地址:https://github.com/jenlyser/StepsView

提示：以下是本篇文章正文内容，下面案例可供参考

一、先看效果？

二、使用方法

1.xml代码

代码如下（示例）：

注意:控件需要设置背景.否则会导致异常,此处我还没找到原因.

<wking.views.steps.StepsView
    android:id="@+id/steps1"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#fff"></wking.views.steps.StepsView>

2.java代码

代码如下（示例）：

String[] mSteps = {"步骤1", "步骤2", "完成"};
StepsView stepsView1=findViewById(R.id.steps1);
stepsView1.setSteps(mSteps).drawSteps();

private String[] mSteps2 = {"步骤1", "步骤2", "步骤3", "步骤4", "完成"};
private String[] mSteps3 = {"动画", "缩放动画", "透明动画", "动画颜色", "动画时长"};
private String[] mSteps4 = {"文字","文字少能居中", "文字多会换行文字多会换行","字体颜色","文字大小"};
private String[] mSteps5 = {"步骤圆形", "设置颜色", "圆形线宽", "圆形大小", "连接线大小"};

        StepsView stepsView2=findViewById(R.id.steps2);
        stepsView2.setSteps(mSteps2)
                .setAnimationType(StepsView.AnimationType.Scale)
                .setTextMarginTop(30)
                .setStepPadding(60)
                .setStepsColor(Color.parseColor("#bbbbbb"))
                .setProgressColor(Color.parseColor("#ff6666"))
                .setCurrentColor(Color.parseColor("#ff6666"))
                .setCurrentPosition(1)
                .drawSteps();

        StepsView stepsView3=findViewById(R.id.steps3);
        stepsView3.setSteps(mSteps3)
                .setAnimationType(StepsView.AnimationType.Alpha)
                .setTextMarginTop(20)
                .setStepPadding(60)
                .setStepsColor(Color.parseColor("#bbbbbb"))
                .setProgressColor(Color.parseColor("#ff6666"))
                .setCurrentColor(Color.parseColor("#ff6666"))
                .setAnimationColor(Color.parseColor("#0099cc"))
                .setCurrentPosition(2)
                .drawSteps();

        StepsView stepsView4=findViewById(R.id.steps4);
        stepsView4.setSteps(mSteps4)
                .setStepPadding(60)
                .setAnimationType(StepsView.AnimationType.Scale)
                .setTextMarginTop(20)
                .setStepsColor(Color.parseColor("#bbbbbb"))
                .setProgressColor(Color.parseColor("#ff6666"))
                .setCurrentColor(Color.parseColor("#ff6666"))
                .setAnimationColor(Color.WHITE)
                .setTextMaxLine(2)
                .setTextSize(13)
                .setCurrentPosition(3)
                .drawSteps();

        StepsView stepsView5=findViewById(R.id.steps5);
        stepsView5.setSteps(mSteps5)
                .setStepPadding(70)
                .setStepBarHeight(80)
                .setStepsColor(Color.parseColor("#bbbbbb"))
                .setProgressColor(Color.parseColor("#0099cc"))
                .setCurrentColor(Color.parseColor("#0099cc"))
                .setAnimationType(StepsView.AnimationType.Scale)
                .setTextMarginTop(30)
                .setCircleRadius(20)
                .setCircleStrokeWidth(12)
                .setLineHeight(12)
                .setTextMaxLine(2)
                .setCurrentPosition(3)
                .drawSteps();

        StepsView stepsView6=findViewById(R.id.steps6);
        stepsView6.setSteps(mSteps5)
                .setStepPadding(80)
                .setAnimationType(StepsView.AnimationType.Scale)
                .setTextMarginTop(30)
                .setStepsColor(Color.parseColor("#777777"))
                .setProgressColor(Color.parseColor("#0099cc"))
                .setCurrentColor(Color.parseColor("#ff6666"))
                .setAnimationColor(Color.WHITE)
                .setTextMaxLine(2)
                .setCurrentPosition(1)
                .drawSteps();

        StepsView stepsView7=findViewById(R.id.steps7);
        stepsView7.setSteps(mSteps5)
                .setStepPadding(80)
                .setAnimationType(StepsView.AnimationType.Alpha)
                .setTextMarginTop(30)
                .setStepsColor(Color.parseColor("#777777"))
                .setProgressColor(Color.parseColor("#0099cc"))
                .setCurrentColor(Color.parseColor("#ff6666"))
                .setStepTextColor(Color.BLACK)
                .setStepCurrentTextColor(Color.BLACK)
                .setStepProgressTextColor(Color.BLACK)
                .setAnimationColor(Color.WHITE)
                .setLineHeight(5)
                .setTextMaxLine(2)
                .setCurrentPosition(1)
                .drawSteps();