diff --git a/.readme/vertical.gif b/.readme/vertical.gif
deleted file mode 100644
index 020abc3b1cd29881be57172b59320087f4ec5552..0000000000000000000000000000000000000000
Binary files a/.readme/vertical.gif and /dev/null differ
diff --git a/README.md b/README.md
index 31ee9c3f3cdfe0ea2a6c6fa28e61075bd67c10bc..9056a3ce3258e5b72c4b1e4a0be123d1a12046aa 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,85 @@
 # MaterialStepperView
 
-**本项目是基于开源项目MaterialStepperView进行鸿蒙化的移植和开发的，可以通过项目标签（<https://gitee.com/chinasoft_ohos/okhttp_ohos>）以及github地址（<https://github.com/fython/MaterialStepperView>）追踪到原安卓项目版本项目介绍**
+**本项目是基于开源项目MaterialStepperView进行鸿蒙化的移植和开发的，可以通过项目标签（<https://gitee.com/chinasoft_ohos/MaterialStepperView>）以及github地址（<https://github.com/fython/MaterialStepperView>）追踪到原安卓项目版本项目介绍**
 
 #### 项目介绍
 - 项目名称：MaterialStepperView
 - 所属系列：鸿蒙的第三方组件适配移植
-- 功能：进度表
-- 项目移植状态：有差异
+- 功能：竖直样式的 Stepper 组件。未来将会加入更多的样式。你可以自定义正常/激活的圆点颜色、完成图标、动画时长、是否启用动画、线条颜色以及错误高亮颜色之类的参数。
+- 项目移植状态：无差异
 - 调用差异：无
+- 基线版本：MaterialStepperView组件Tags 1.0.0
 - 开发版本：sdk5，DevEco Studio2.1 beta3
 - 项目作者和维护人：王冬冬
 - 联系方式：wangdongdong073@chinasoftinc.com
 - 原项目Doc地址：https://github.com/fython/MaterialStepperView
 
+
 #### 项目介绍
 - 编程语言：Java
 - 外部库依赖：无
 
+
 #### 安装教程
 
-1. 下载okhttp的jar包okhttp.jar（位于：<https://gitee.com/chinasoft_ohos/okhttp_ohos/releases/v0.0.1_alpha>）。
-2. 启动 DevEco Studio，将下载的jar包，导入工程目录“entry->libs”下。
-3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。
+
+1. 下载MaterialStepperView的har包MaterialStepperView.har。
+2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
+3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。
 ```
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
 	……
 }
 ```
-4. 在导入的jar包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，点击“OK”即引用成功。
 
 
 #### 使用说明
 - 目前我们只做了竖直样式的 Stepper 组件。未来将会加入更多的样式。
 你可以自定义正常/激活的圆点颜色、完成图标、动画时长、是否启用动画、线条颜色以及错误高亮颜色之类的参数。
+```示例XML
+ <moe.feng.common.stepperview.VerticalStepperItemView
+            ohos:id="$+id:stepper_0"
+           ohos:height="match_content"
+            ohos:top_margin="24vp"
+            ohos:width="match_parent"
+            app:step_index="1"
+            app:step_state="selected"
+            app:step_summary="Summarized if needed"
+            app:step_summary_done="Summarized if needed. Done"
+            app:step_title="Step 1" >
+</moe.feng.common.stepperview.VerticalStepperItemView>
+
+
+<moe.feng.common.stepperview.VerticalStepperView
+		ohos:id="$+id:vertical_stepper_view"
+			ohos:width="match_parent"
+			ohos:height="match_parent"
+			app:step_done_icon="$graphic:ic_done_white_16dp"
+			app:step_animation_duration="300"/>
+```
+
+-属性介绍
+  step_index  当前第几步
+  step_state  当前的状态
+  step_summary 当前状态信息
+  step_summary_done  当前的状态
+  step_title   当前标题
+  step_done_icon  完成图标
+  step_animation_duration  执行动画时间
+
+
 #### 测试信息
 CodeCheck代码测试无异常
+
 VirusTotal病毒安全检测通过
+
 测试员：李仲
 
 #### 版本迭代
+
 - v0.0.1-alpha
+
 #### 版权和许可信息
 
 
diff --git a/entry/build.gradle b/entry/build.gradle
index fa32f368dfb0fe2dedb1663eb4f2b2148b17146c..e84d30a775e7dad18e2007cc900f6c4c54993506 100644
--- a/entry/build.gradle
+++ b/entry/build.gradle
@@ -3,7 +3,7 @@ apply plugin: 'com.huawei.ohos.decctest'
 ohos {
     compileSdkVersion 5
     defaultConfig {
-        compatibleSdkVersion 4
+        compatibleSdkVersion 5
     }
     buildTypes {
         release {
@@ -19,8 +19,8 @@ ohos {
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
     testImplementation 'junit:junit:4.13'
-    compile project(':library')
     ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.100'
+    compile project(":library")
 }
 decc {
     supportType = ['html','xml']
diff --git a/entry/src/main/config.json b/entry/src/main/config.json
index e208f812b2a301838629df47a17849d69ef0c1f5..13344484eb7ac8ecc8303d56e1d0e436ab18ebd7 100644
--- a/entry/src/main/config.json
+++ b/entry/src/main/config.json
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "moe.feng.common.steperview",
+    "bundleName": "moe.feng.common.stepperview.demo",
     "vendor": "feng",
     "version": {
       "code": 1,
@@ -14,7 +14,7 @@
   },
   "deviceConfig": {},
   "module": {
-    "package": "moe.feng.common.steperview",
+    "package": "moe.feng.common.stepperview.demo",
     "name": ".MyApplication",
     "deviceType": [
       "phone"
@@ -46,7 +46,7 @@
           }
         ],
         "orientation": "unspecified",
-        "name": "moe.feng.common.steperview.MainAbility",
+        "name": "moe.feng.common.stepperview.demo.MainAbility",
         "icon": "$media:icon",
         "description": "$string:mainability_description",
         "label": "$string:app_name",
diff --git a/entry/src/main/java/moe/feng/common/steperview/utils/Utilty.java b/entry/src/main/java/moe/feng/common/steperview/utils/Utilty.java
deleted file mode 100644
index 9506b2334d867bdeabc6dda0cfc2ddf84f0ac129..0000000000000000000000000000000000000000
--- a/entry/src/main/java/moe/feng/common/steperview/utils/Utilty.java
+++ /dev/null
@@ -1,97 +0,0 @@
-package moe.feng.common.steperview.utils;
-
-import moe.feng.common.steperview.ResourceTable;
-import ohos.agp.components.DirectionalLayout;
-import ohos.agp.components.LayoutScatter;
-import ohos.agp.components.Text;
-import ohos.agp.components.element.Element;
-import ohos.agp.render.BlendMode;
-import ohos.agp.render.Paint;
-import ohos.agp.utils.LayoutAlignment;
-import ohos.agp.utils.TextAlignment;
-import ohos.agp.window.dialog.ToastDialog;
-import ohos.app.Context;
-import ohos.eventhandler.EventHandler;
-import ohos.eventhandler.EventRunner;
-import ohos.utils.IntervalTimer;
-
-public class Utilty {
-
-    private static final int MAX_LINE = 2;
-    private static final int DURATION = 5000;
-    private static final int OFFSET_Y = 60;
-    public static int getFontHeight(int fontSize)
-    {
-        Paint paint = new Paint();
-        paint.setTextSize(fontSize);
-        Paint.FontMetrics fm = paint.getFontMetrics();
-        return (int) Math.ceil(fm.descent - fm.top) + 2;
-    }
-
-    public static void toast(Context context,String string){
-        DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(context)
-                .parse(ResourceTable.Layout_layout_toast, null, false);
-        Text text = (Text) toastLayout.findComponentById(ResourceTable.Id_msg_toast);
-        text.setText(string);
-        text.setTextAlignment(TextAlignment.LEFT);
-        text.setMultipleLine(true);
-        text.setMaxTextLines(MAX_LINE);
-        text.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_END);
-        new ToastDialog(context)
-                .setComponent(toastLayout)
-                .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
-                .setAlignment(LayoutAlignment.BOTTOM | LayoutAlignment.HORIZONTAL_CENTER)
-                .setOffset(0, OFFSET_Y)
-                .show();
-    }
-    public void runInMainThread(Runnable task) {
-        EventRunner runner = EventRunner.getMainEventRunner();
-        EventHandler handler = new EventHandler(runner);
-        handler.postTask(task);
-    }
-
-    private IntervalTimer gameTimer;
-    private int i=0;
-    private void startGameLoop() {
-        if (gameTimer == null) {
-            gameTimer = new IntervalTimer(1000, 1000) {
-                @Override
-                public void onInterval(long l) {
-                    runInMainThread(new Runnable() {
-                        @Override
-                        public void run() {
-                            System.out.println("123123123123123123");
-                            i++;
-                            if(i==6){
-                            }
-                        }
-                    });
-                }
-
-                @Override
-                public void onFinish() {
-                    gameTimer.schedule();
-                }
-            };
-            gameTimer.schedule();
-        }
-    }
-
-    private void stopGameLoop() {
-        if (gameTimer != null) {
-            gameTimer.cancel();
-            gameTimer = null;
-        }
-    }
-    //Element 传 PixelMapElement
-    public static Element getTintElement(Element element, int intColor) {
-        int[] colors = new int[]{intColor, intColor};
-        int[][] states = new int[2][];
-        states[0] = new int[]{1};
-        states[1] = new int[]{-1};
-        element.setStateColorList(states, colors);
-        element.setStateColorMode(BlendMode.SRC_ATOP);
-        return element;
-    }
-}
-
diff --git a/entry/src/main/java/moe/feng/common/steperview/utils/ViewCreateHelper.java b/entry/src/main/java/moe/feng/common/steperview/utils/ViewCreateHelper.java
deleted file mode 100644
index 7ccaf236494e221be2ca7659923105d9fa0a8f23..0000000000000000000000000000000000000000
--- a/entry/src/main/java/moe/feng/common/steperview/utils/ViewCreateHelper.java
+++ /dev/null
@@ -1,428 +0,0 @@
-package moe.feng.common.steperview.utils;
-
-
-import moe.feng.common.steperview.ResourceTable;
-import moe.feng.common.steperview.view.SampleItemProvider;
-import moe.feng.common.stepperview.CustomeDirectionalLayout;
-import moe.feng.common.stepperview.view.ViewUtils;
-import ohos.agp.animation.Animator;
-import ohos.agp.animation.AnimatorValue;
-import ohos.agp.components.*;
-import ohos.agp.components.element.Element;
-import ohos.agp.components.element.PixelMapElement;
-import ohos.agp.components.element.ShapeElement;
-import ohos.agp.text.Font;
-import ohos.agp.utils.Color;
-import ohos.app.Context;
-import ohos.eventhandler.EventHandler;
-import ohos.eventhandler.EventRunner;
-import ohos.global.resource.NotExistException;
-import ohos.global.resource.Resource;
-import ohos.utils.IntervalTimer;
-
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Version 1.0
- * ModifiedBy
- * date 2021-03-15 10:13
- * description ViewCreateHelper
- */
-public final class ViewCreateHelper {
-    private Context slice;
-
-    /**
-     * 构造函数
-     *
-     * @param abilitySlice Context
-     */
-    public ViewCreateHelper(Context abilitySlice) {
-        this.slice = abilitySlice;
-    }
-
-    /**
-     * 创建view
-     *
-     * @return Component
-     */
-    private List<Text> titles = new ArrayList<>();
-    private List<Text> contents = new ArrayList<>();
-    private List<Button> oks = new ArrayList<>();
-    private List<Button> cancles = new ArrayList<>();
-    private List<CustomeDirectionalLayout> expandableTextViews = new ArrayList<>();
-    private List<Image> backgrounds = new ArrayList<>();
-    private List<Image> pics = new ArrayList<>();
-    private List<Text> nums = new ArrayList<>();
-    private List<Text> hints = new ArrayList<>();
-    private Image warn;
-    private List<Image> picsaves = new ArrayList<>();
-    private boolean bchangeicon = false;
-    private boolean bchangecolor = false;
-    private List<Boolean> isClick = new ArrayList<>();
-
-
-    public Component createView(int positioan) {
-        System.out.println("xxx" + "createView");
-        isClick.add(true);
-        isClick.add(false);
-        isClick.add(false);
-        CustomeDirectionalLayout.isFirst = false;
-        CustomeDirectionalLayout.hasset = 0;
-        Component mainComponent =
-                LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_pager_srcoll_item, null, false);
-        System.out.println("xxx" + "mainComponent");
-
-        if (!(mainComponent instanceof ComponentContainer)) {
-            return mainComponent;
-        }
-        Button setButton = null;
-        ComponentContainer rootLayout = (ComponentContainer) mainComponent;
-        DirectionalLayout root = (DirectionalLayout) rootLayout.findComponentById(ResourceTable.Id_root);
-
-        System.out.println("xxx" + "root");
-
-        int itemCount = root.getChildCount();
-        if (positioan == 0) {
-            if (root != null && itemCount > 0) {
-                System.out.println("xxx" + "getChildCount");
-                for (int index = 0; index < itemCount; index++) {
-                    Component component = root.getComponentAt(index);
-                    if (index == 0) {
-                        component.setVisibility(Component.HIDE);
-                    } else if (index == 4) {
-                        Button changecolor = (Button) root.findComponentById(ResourceTable.Id_btn_change_point_color);
-                        System.out.println("xxx" + "changecolor");
-                        changecolor.setClickedListener(new Component.ClickedListener() {
-                            @Override
-                            public void onClick(Component component) {
-                                bchangecolor = !bchangecolor;
-                                for (int i = 0; i < isClick.size(); i++) {
-                                    if (isClick.get(i))
-                                        backgrounds.get(i).setBackground(getElement());
-                                }
-
-                            }
-                        });
-
-                    } else if (index == 5) {
-                        Button changeicon = (Button) root.findComponentById(ResourceTable.Id_btn_change_done_icon);
-                        System.out.println("xxx" + "changeicon");
-                        changeicon.setClickedListener(new Component.ClickedListener() {
-                            @Override
-                            public void onClick(Component component) {
-                                bchangeicon = !bchangeicon;
-                                if (bchangeicon) {
-                                    for (int i = 0; i < pics.size(); i++) {
-                                        if (pics.get(i).getVisibility() == Component.VISIBLE) {
-                                            pics.get(i).setVisibility(Component.HIDE);
-                                            picsaves.get(i).setVisibility(Component.VISIBLE);
-                                        }
-                                    }
-                                } else {
-                                    for (int i = 0; i < pics.size(); i++) {
-                                        if (picsaves.get(i).getVisibility() == Component.VISIBLE) {
-                                            picsaves.get(i).setVisibility(Component.HIDE);
-                                            pics.get(i).setVisibility(Component.VISIBLE);
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                    } else {
-                        component.setVisibility(Component.VISIBLE);
-                        System.out.println("xxx" + "else==null" + index);
-                        Text titleText = (Text) component.findComponentById(ResourceTable.Id_title);
-                        System.out.println("xxx" + "titleText");
-
-                        Text expandabletext = (Text) component.findComponentById(ResourceTable.Id_expandable_text);
-                        System.out.println("xxx" + "expandabletext");
-
-                        Button ok = (Button) component.findComponentById(ResourceTable.Id_button_next_1);
-                        System.out.println("xxx" + "ok");
-
-                        Button cancle = (Button) component.findComponentById(ResourceTable.Id_button_prev_1);
-                        Component line = component.findComponentById(ResourceTable.Id_lines);
-                        System.out.println("xxx" + "cancle");
-                        if (index == 2) {
-                            setButton = (Button) component.findComponentById(ResourceTable.Id_button_test_error);
-                            System.out.println("xxx" + "setButton");
-
-                            setButton.setVisibility(Component.VISIBLE);
-
-                        }
-                        Text num = (Text) component.findComponentById(ResourceTable.Id_num);
-                        System.out.println("xxx" + "num");
-
-                        Image background = (Image) component.findComponentById(ResourceTable.Id_background);
-                        System.out.println("xxx" + "background");
-                        Image pic = (Image) component.findComponentById(ResourceTable.Id_pic);
-                        System.out.println("xxx" + "pic");
-                        num.setText(String.valueOf(index));
-                        System.out.println("xxx" + "num.setText");
-                        Image picsave = (Image) component.findComponentById(ResourceTable.Id_picsave);
-                        picsaves.add(picsave);
-                        Text hint = (Text) component.findComponentById(ResourceTable.Id_hint);
-                        hint.setVisibility(Component.HIDE);
-                        hints.add(hint);
-                        nums.add(num);
-                        backgrounds.add(background);
-                        pics.add(pic);
-                        cancles.add(cancle);
-                        oks.add(ok);
-                        titleText.setText("Step " + (index));
-                        System.out.println("xxx" + "titleText.setText");
-
-                        titles.add(titleText);
-                        contents.add(expandabletext);
-                        CustomeDirectionalLayout expandableTextView = (CustomeDirectionalLayout)
-                                component.findComponentById(ResourceTable.Id_expandable);
-                        expandableTextView.setPositionText(positionText);
-                        expandableTextViews.add(expandableTextView);
-                        System.out.println("xxx" + "(index + 1)");
-
-                        if (index == 1) {
-                            titleText.setTextColor(Color.BLACK);
-                            titleText.setFont(Font.DEFAULT_BOLD);
-                            expandabletext.setText(ResourceTable.String_content_step_0);
-                            warn = (Image) component.findComponentById(ResourceTable.Id_warn);
-                        }
-                        if (index == 3) {
-                            line.setVisibility(Component.HIDE);
-                            expandabletext.setText("This is the last step,you can finish steps now!");
-                            hint.setText("    last step!");
-                            hint.setVisibility(Component.VISIBLE);
-                        }
-
-                    }
-                }
-                setListener(setButton);
-            }
-        } else {
-            if (root != null && itemCount > 0) {
-                System.out.println("xxx" + "getChildCount");
-                for (int index = 0; index < itemCount; index++) {
-                    Component component = root.getComponentAt(index);
-                    if (index == 0) {
-                        component.setVisibility(Component.VISIBLE);
-                        ListContainer listContainer = (ListContainer) component.findComponentById(ResourceTable.Id_step_list);
-                        List<String> list = new ArrayList<>();
-                        list.add("test");
-                        list.add("test");
-                        list.add("test");
-                        SampleItemProvider sampleItemProvider = new SampleItemProvider(slice, list);
-                        listContainer.setItemProvider(sampleItemProvider);
-                    } else {
-                        component.setVisibility(Component.HIDE);
-
-                        System.out.println("xxx" + "else==null" + index);
-                    }
-                }
-            }
-        }
-        System.out.println("xxx" + "setButton");
-
-
-        return rootLayout;
-    }
-
-    private boolean isokclick = false;
-
-    private Element getElement() {
-        ShapeElement background = null;
-        if (bchangecolor) {
-            background = new ShapeElement(slice, ResourceTable.Graphic_dark_background);
-
-        } else {
-            background = new ShapeElement(slice, ResourceTable.Graphic_blue_cir_background);
-
-        }
-        return background;
-    }
-
-    private void setListener(Button error) {
-
-        backgrounds.get(0).setBackground(getElement());
-        ViewUtils.startAnimator(slice, oks.get(0), "#007DFF");
-        oks.get(0).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isokclick = true;
-                nums.get(0).setVisibility(Component.HIDE);
-                if (!bchangeicon) {
-                    pics.get(0).setVisibility(Component.VISIBLE);
-                } else {
-                    picsaves.get(0).setVisibility(Component.VISIBLE);
-
-                }
-                isClick.set(1, true);
-
-                backgrounds.get(1).setBackground(getElement());
-                System.out.println("yyyyyy" + 1);
-                titles.get(0).setFont(Font.DEFAULT);
-                titles.get(1).setTextColor(Color.BLACK);
-                titles.get(1).setFont(Font.DEFAULT_BOLD);
-                expandableTextViews.get(0).setDefault(0, false);
-                expandableTextViews.get(1).setDefault(0, true);
-            }
-        });
-        ViewUtils.startAnimator(slice, oks.get(2), "#007DFF");
-        oks.get(2).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isokclick = true;
-
-                Utilty.toast(slice, "Finish!");
-            }
-        });
-        ViewUtils.startAnimator(slice, cancles.get(0), "#ECECEC");
-        cancles.get(0).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-
-
-            }
-        });
-        ViewUtils.startAnimator(slice, cancles.get(1), "#ECECEC");
-        cancles.get(1).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isClick.set(1, false);
-
-                isokclick = false;
-                titles.get(0).setFont(Font.DEFAULT_BOLD);
-                titles.get(1).setTextColor(Color.GRAY);
-                titles.get(1).setFont(Font.DEFAULT);
-                nums.get(0).setVisibility(Component.VISIBLE);
-                if (!bchangeicon) {
-
-                    pics.get(0).setVisibility(Component.HIDE);
-                } else {
-                    picsaves.get(0).setVisibility(Component.HIDE);
-                }
-                hints.get(0).setVisibility(Component.HIDE);
-                expandableTextViews.get(0).setDefault(0, true);
-                expandableTextViews.get(1).setDefault(0, false);
-                ShapeElement background = new ShapeElement(slice, ResourceTable.Graphic_gray_shap);
-                backgrounds.get(1).setBackground(background);
-
-
-            }
-        });
-        cancles.get(2).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isClick.set(2, false);
-
-                isokclick = false;
-                nums.get(1).setVisibility(Component.VISIBLE);
-                if (!bchangeicon) {
-
-                    pics.get(1).setVisibility(Component.HIDE);
-                } else {
-                    picsaves.get(1).setVisibility(Component.HIDE);
-                }
-                hints.get(2).setVisibility(Component.VISIBLE);
-                expandableTextViews.get(1).setDefault(0, true);
-                expandableTextViews.get(2).setDefault(0, false);
-                ShapeElement background = new ShapeElement(slice, ResourceTable.Graphic_gray_shap);
-                backgrounds.get(2).setBackground(background);
-                titles.get(1).setFont(Font.DEFAULT_BOLD);
-                titles.get(2).setTextColor(Color.GRAY);
-                titles.get(2).setFont(Font.DEFAULT);
-
-            }
-        });
-        ViewUtils.startAnimator(slice, oks.get(1), "#007DFF");
-        oks.get(1).setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isClick.set(2, true);
-
-                isokclick = true;
-//                expandableTextViews.get(0).setDefault(1, false);
-                expandableTextViews.get(1).setDefault(1, false);
-                expandableTextViews.get(2).setDefault(1, true);
-                System.out.println("yyyyyy" + 2);
-
-                titles.get(1).setFont(Font.DEFAULT);
-                titles.get(2).setTextColor(Color.BLACK);
-                titles.get(2).setFont(Font.DEFAULT_BOLD);
-                nums.get(0).setVisibility(Component.HIDE);
-                if (!bchangeicon) {
-
-                    pics.get(0).setVisibility(Component.VISIBLE);
-                    pics.get(1).setVisibility(Component.VISIBLE);
-
-                } else {
-                    picsaves.get(0).setVisibility(Component.VISIBLE);
-                    picsaves.get(1).setVisibility(Component.VISIBLE);
-
-                }
-                nums.get(1).setVisibility(Component.HIDE);
-                backgrounds.get(1).setBackground(getElement());
-                backgrounds.get(2).setBackground(getElement());
-
-
-            }
-        });
-        if (null != error) {
-            ViewUtils.startAnimator(slice, error, "#F44336");
-            error.setClickedListener(new Component.ClickedListener() {
-                @Override
-                public void onClick(Component component) {
-                    if (!isclick) {
-                        isclick = true;
-                        nums.get(0).setVisibility(Component.HIDE);
-                        if (!bchangeicon) {
-
-                            pics.get(0).setVisibility(Component.HIDE);
-                        } else {
-                            picsaves.get(0).setVisibility(Component.HIDE);
-
-                        }
-                        backgrounds.get(0).setVisibility(Component.HIDE);
-                        warn.setVisibility(Component.VISIBLE);
-                        hints.get(0).setVisibility(Component.VISIBLE);
-                        titles.get(0).setTextColor(Color.RED);
-                        hints.get(0).setText("Test error!");
-                        hints.get(0).setTextColor(Color.RED);
-                    } else {
-                        isclick = false;
-                        hints.get(0).setVisibility(Component.VISIBLE);
-                        warn.setVisibility(Component.HIDE);
-
-                        nums.get(0).setVisibility(Component.HIDE);
-                        if (!bchangeicon) {
-
-                            pics.get(0).setVisibility(Component.VISIBLE);
-                        } else {
-
-                            picsaves.get(0).setVisibility(Component.VISIBLE);
-
-                        }
-                        backgrounds.get(0).setBackground(getElement());
-                        backgrounds.get(0).setVisibility(Component.VISIBLE);
-                        titles.get(0).setTextColor(Color.BLACK);
-                        hints.get(0).setText("Summarized if needed. Done");
-                        hints.get(0).setTextColor(Color.GRAY);
-                    }
-                }
-            });
-        }
-    }
-
-    private boolean isclick = false;
-    CustomeDirectionalLayout.PositionText positionText = new CustomeDirectionalLayout.PositionText() {
-        @Override
-        public void setPositionColor(int p) {
-            if (p == 0 && isokclick) {
-                hints.get(0).setVisibility(Component.VISIBLE);
-            } else if (p == 1 && isokclick) {
-                hints.get(2).setVisibility(Component.HIDE);
-            }
-        }
-    };
-
-}
diff --git a/entry/src/main/java/moe/feng/common/steperview/view/SampleItemProvider.java b/entry/src/main/java/moe/feng/common/steperview/view/SampleItemProvider.java
deleted file mode 100644
index e317bc81538b1bf307bddfe07b324f57ac6e2d3b..0000000000000000000000000000000000000000
--- a/entry/src/main/java/moe/feng/common/steperview/view/SampleItemProvider.java
+++ /dev/null
@@ -1,275 +0,0 @@
-package moe.feng.common.steperview.view;
-
-import moe.feng.common.steperview.ResourceTable;
-import moe.feng.common.steperview.utils.Utilty;
-import moe.feng.common.stepperview.CustomeDirectionalLayout;
-import moe.feng.common.stepperview.util.Log;
-import moe.feng.common.stepperview.view.ViewUtils;
-import ohos.agp.animation.Animator;
-import ohos.agp.animation.AnimatorValue;
-import ohos.agp.components.*;
-import ohos.agp.components.element.ShapeElement;
-import ohos.agp.text.Font;
-import ohos.agp.utils.Color;
-import ohos.app.Context;
-
-import java.util.List;
-
-public class SampleItemProvider extends RecycleItemProvider {
-    private List<String> list;
-    private Context mContext;
-
-    public SampleItemProvider(Context context, List<String> list) {
-        this.list = list;
-        this.mContext = context;
-    }
-
-    @Override
-    public int getCount() {
-        return list.size();
-    }
-
-    @Override
-    public Object getItem(int position) {
-        return list.get(position);
-    }
-
-    @Override
-    public long getItemId(int position) {
-        return position;
-    }
-
-    @Override
-    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
-        Component cpt = convertComponent;
-        System.out.println("xxx" + "convertComponent===" + 0);
-
-        if (cpt == null) {
-            cpt = LayoutScatter.getInstance(mContext).parse(ResourceTable.Layout_step_list_item_layout, null, false);
-        }
-        CustomeDirectionalLayout layout = (CustomeDirectionalLayout) cpt.findComponentById(ResourceTable.Id_expandable);
-        Button okButton = (Button) cpt.findComponentById(ResourceTable.Id_button_next_1);
-        Button cancle = (Button) cpt.findComponentById(ResourceTable.Id_button_prev_1);
-        Text text = (Text) cpt.findComponentById(ResourceTable.Id_expandable_text);
-        DirectionalLayout dd = (DirectionalLayout) cpt.findComponentById(ResourceTable.Id_direct);
-        Text title = (Text) cpt.findComponentById(ResourceTable.Id_title);
-        Text num = (Text) cpt.findComponentById(ResourceTable.Id_num);
-        Button errorButton = (Button) cpt.findComponentById(ResourceTable.Id_button_next_error);
-
-        Image backgroundimage = (Image) cpt.findComponentById(ResourceTable.Id_background);
-        Button toggle = (Button) cpt.findComponentById(ResourceTable.Id_button_prev_0);
-        Component lines = cpt.findComponentById(ResourceTable.Id_lines);
-        Image pic = (Image) cpt.findComponentById(ResourceTable.Id_pic);
-        Image warn = (Image) cpt.findComponentById(ResourceTable.Id_warn);
-
-        toggle.setVisibility(Component.HIDE);
-        System.out.println("xxx" + "getComponent===" + 0);
-        title.setText("Step " + (position + 1));
-        num.setText(String.valueOf(position + 1));
-
-        if (position == 0) {
-            System.out.println("xxx" + "getComponent===" + dd.getHeight() + text.getHeight() + dd.getMarginBottom() + dd.getMarginTop() + text.getMarginTop());
-            title.setTextColor(Color.BLACK);
-            title.setFont(Font.DEFAULT_BOLD);
-            layout.setHeight(470);
-            text.setText("This is the first step. Click OK button to next step.\n\nTest Message.");
-            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_blue_cir_background);
-            backgroundimage.setBackground(background);
-            toggle.setVisibility(Component.VISIBLE);
-            cancle.setVisibility(Component.HIDE);
-
-
-        } else {
-            if (position == 1) {
-                layout.setHeight(0);
-                text.setText("This is the second step. Click OK button to next step or Cancel button to previous step.\n\nThe summary text of each step is optional. If you haven\\'t set, summary view won\\'t be displayed.");
-            } else if (position == 2) {
-                lines.setVisibility(Component.HIDE);
-                layout.setHeight(100);
-                okButton.setVisibility(Component.HIDE);
-                errorButton.setVisibility(Component.VISIBLE);
-
-                text.setText("Last step");
-            }
-            title.setTextColor(Color.GRAY);
-            title.setFont(Font.DEFAULT);
-            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_gray_shap);
-            backgroundimage.setBackground(background);
-        }
-        num.setVisibility(Component.VISIBLE);
-        pic.setVisibility(Component.HIDE);
-        if (clickposition == 0) {
-
-            if (position == 0 || position == 2) {
-                layout.setHeight(100);
-                if (position == 0) {
-                    num.setVisibility(Component.HIDE);
-                    pic.setVisibility(Component.VISIBLE);
-                }
-            } else {
-                layout.setHeight(dd.getHeight() + text.getHeight() + dd.getMarginBottom() + dd.getMarginTop() + text.getMarginTop());
-                layout.setHeight(680);
-            }
-            Log.i("xxx" + "clickposition===" + 0);
-
-
-            if (position == 0) {
-                title.setFont(Font.DEFAULT);
-                text.setText("Summarized if needed. Done");
-
-            } else if (position == 1) {
-                ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_blue_cir_background);
-                backgroundimage.setBackground(background);
-                title.setTextColor(Color.BLACK);
-                title.setFont(Font.DEFAULT_BOLD);
-            }
-            System.out.println("xxx" + "clickposition===" + 0);
-
-        } else if (clickposition == 1) {
-            if (position == 0 || position == 1) {
-                num.setVisibility(Component.HIDE);
-                pic.setVisibility(Component.VISIBLE);
-                layout.setHeight(100);
-                if (position == 0) {
-                    title.setFont(Font.DEFAULT);
-                    text.setText("Summarized if needed. Done");
-
-                } else if (position == 1) {
-                    title.setTextColor(Color.BLACK);
-                    title.setFont(Font.DEFAULT);
-                    layout.setHeight(20);
-
-                }
-            } else {
-                title.setTextColor(Color.BLACK);
-                title.setFont(Font.DEFAULT_BOLD);
-                text.setText("This is the last step,you can finish steps now!");
-
-                layout.setHeight(okButton.getHeight() + cancle.getHeight() + text.getHeight() + 300);
-            }
-            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_blue_cir_background);
-            backgroundimage.setBackground(background);
-            title.setTextColor(Color.BLACK);
-            title.setFont(Font.DEFAULT_BOLD);
-            System.out.println("xxx" + "clickposition===" + 1);
-            Log.i("xxx" + "clickposition===" + 1);
-
-        }
-        if (position == 0) {
-            if (isClickError) {
-
-                num.setVisibility(Component.HIDE);
-                pic.setVisibility(Component.HIDE);
-
-
-                title.setTextColor(Color.RED);
-                setAnimal(backgroundimage,warn,text);
-            title.setFont(Font.DEFAULT);
-            }else{
-//                num.setVisibility(Component.VISIBLE);
-//                pic.setVisibility(Component.VISIBLE);
-                backgroundimage.setVisibility(Component.VISIBLE);
-                backgroundimage.setAlpha(1f);
-                warn.setVisibility(Component.HIDE);                text.setTextColor(Color.GRAY);
-
-
-
-            }
-        }
-        setClickLisener(okButton, cancle, position);
-        errorButton.setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                isClickError = !isClickError;                    Utilty.toast(mContext, "Set!");
-
-
-                notifyDataChanged();
-            }
-        });
-        return cpt;
-    }
-    private void setAnimal(Image back,Image error,Text text){
-        AnimatorValue animation = new AnimatorValue();
-        animation.setDuration(150);
-        animation.setStateChangedListener(new Animator.StateChangedListener() {
-            @Override
-            public void onStart(Animator animator) {
-//                applyAlphaAnimation(expandText, animAlphaStart);
-            }
-
-            @Override
-            public void onStop(Animator animator) {
-
-            }
-
-            @Override
-            public void onCancel(Animator animator) {
-
-            }
-
-            @Override
-            public void onEnd(Animator animator) {
-                // notify the listener
-                error.setVisibility(Component.VISIBLE);
-                back.setVisibility(Component.HIDE);
-                text.setText("Test error");
-                text.setTextColor(Color.RED);
-                text.setAlpha(1);
-            }
-
-            @Override
-            public void onPause(Animator animator) {
-
-            }
-
-            @Override
-            public void onResume(Animator animator) {
-
-            }
-        });
-        animation.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
-
-            @Override
-            public void onUpdate(AnimatorValue animatorValue, float interpolatedTime) {
-                text.setAlpha(1-interpolatedTime);
-
-                back.setAlpha(1-interpolatedTime);
-                System.out.println("xxx---layout" + interpolatedTime);
-
-
-            }
-        });
-        animation.start();
-    }
-
-    private boolean isClickError = false;
-
-    private void setClickLisener(Button button, Button cancle, int position) {
-        button.setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                System.out.println("xxx" + "position===" + position);
-                if (position != 2) {
-                    clickposition = position;
-                    notifyDataChanged();
-                } else {
-                    Utilty.toast(mContext, "已完成");
-                }
-            }
-        });
-        cancle.setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-                if (position == 1) {
-                    clickposition = -1;
-                    notifyDataChanged();
-                } else {
-                    clickposition = 0;
-                    notifyDataChanged();
-                }
-            }
-        });
-    }
-
-    private int clickposition = -1;
-}
diff --git a/entry/src/main/java/moe/feng/common/steperview/MainAbility.java b/entry/src/main/java/moe/feng/common/stepperview/demo/MainAbility.java
similarity index 49%
rename from entry/src/main/java/moe/feng/common/steperview/MainAbility.java
rename to entry/src/main/java/moe/feng/common/stepperview/demo/MainAbility.java
index 36ee5beb050c014d3b8501dc04d111eb9c9401bd..b57a0fe8b1262580da31fcc7dd065e1d7c6a4d35 100644
--- a/entry/src/main/java/moe/feng/common/steperview/MainAbility.java
+++ b/entry/src/main/java/moe/feng/common/stepperview/demo/MainAbility.java
@@ -1,9 +1,8 @@
-package moe.feng.common.steperview;
+package moe.feng.common.stepperview.demo;
 
-import moe.feng.common.steperview.slice.MainAbilitySlice;
+import moe.feng.common.stepperview.demo.slice.MainAbilitySlice;
 import ohos.aafwk.ability.Ability;
 import ohos.aafwk.content.Intent;
-import ohos.agp.components.ComponentContainer;
 
 public class MainAbility extends Ability {
     @Override
@@ -12,8 +11,4 @@ public class MainAbility extends Ability {
         super.setMainRoute(MainAbilitySlice.class.getName());
     }
 
-    @Override
-    public void setUIContent(ComponentContainer componentContainer) {
-        super.setUIContent(componentContainer);
-    }
 }
diff --git a/entry/src/main/java/moe/feng/common/steperview/MyApplication.java b/entry/src/main/java/moe/feng/common/stepperview/demo/MyApplication.java
similarity index 81%
rename from entry/src/main/java/moe/feng/common/steperview/MyApplication.java
rename to entry/src/main/java/moe/feng/common/stepperview/demo/MyApplication.java
index 56a600b59d5e2a04ea28bbea22bf40f7ac599656..93e81171aa7543779423b21c7ea6e0b2c12bc289 100644
--- a/entry/src/main/java/moe/feng/common/steperview/MyApplication.java
+++ b/entry/src/main/java/moe/feng/common/stepperview/demo/MyApplication.java
@@ -1,4 +1,4 @@
-package moe.feng.common.steperview;
+package moe.feng.common.stepperview.demo;
 
 import ohos.aafwk.ability.AbilityPackage;
 
diff --git a/entry/src/main/java/moe/feng/common/steperview/slice/MainAbilitySlice.java b/entry/src/main/java/moe/feng/common/stepperview/demo/slice/MainAbilitySlice.java
similarity index 45%
rename from entry/src/main/java/moe/feng/common/steperview/slice/MainAbilitySlice.java
rename to entry/src/main/java/moe/feng/common/stepperview/demo/slice/MainAbilitySlice.java
index f63202a503c3c6e5cef8d106c22ab6f945f46d8f..6f46955f222fcb037f625725167f1df85464daa0 100644
--- a/entry/src/main/java/moe/feng/common/steperview/slice/MainAbilitySlice.java
+++ b/entry/src/main/java/moe/feng/common/stepperview/demo/slice/MainAbilitySlice.java
@@ -1,77 +1,51 @@
-/*
- * Copyright (C) 2021 Chinasoft International
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-package moe.feng.common.steperview.slice;
-
-
-import moe.feng.common.steperview.ResourceTable;
-import moe.feng.common.steperview.utils.ViewCreateHelper;
-import moe.feng.common.stepperview.util.SwipeLayout;
+package moe.feng.common.stepperview.demo.slice;
+
+import moe.feng.common.stepperview.IStepperAdapter;
+import moe.feng.common.stepperview.VerticalStepperItemView;
+import moe.feng.common.stepperview.VerticalStepperView;
+import moe.feng.common.stepperview.demo.ResourceTable;
 import ohos.aafwk.ability.AbilitySlice;
 import ohos.aafwk.content.Intent;
 import ohos.agp.animation.Animator;
 import ohos.agp.animation.AnimatorValue;
 import ohos.agp.colors.RgbColor;
 import ohos.agp.components.*;
+import ohos.agp.components.element.Element;
 import ohos.agp.components.element.ShapeElement;
 import ohos.agp.utils.Color;
-import ohos.agp.window.service.WindowManager;
-import ohos.eventhandler.EventHandler;
-import ohos.eventhandler.EventRunner;
-import ohos.hiviewdfx.HiLog;
-import ohos.hiviewdfx.HiLogLabel;
-import ohos.media.image.PixelMap;
-import ohos.multimodalinput.event.MmiPoint;
-import ohos.multimodalinput.event.TouchEvent;
-import ohos.utils.IntervalTimer;
-
-import static ohos.agp.components.Component.DRAG_HORIZONTAL;
-
-/**
- * author zhaoxudong
- * Version 1.0
- * ModifiedBy
- * date 2021-03-15 10:13
- * description 主界面
- */
-public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.updateBackground {
+import ohos.agp.utils.LayoutAlignment;
+import ohos.agp.utils.TextAlignment;
+import ohos.agp.window.dialog.ToastDialog;
+import ohos.app.Context;
+
+public class MainAbilitySlice extends AbilitySlice implements IStepperAdapter {
+    private VerticalStepperView mVerticalStepperView;
+    private DirectionalLayout itemlayout,adapterlayout;
+
     private DirectionalLayout rootLayout;
     private Image clickleft;
     private DirectionalLayout leftlayout, itemview, adpaterview;
     private DirectionalLayout background;
     private int click;
-    private ViewCreateHelper viewCreateHelper;
     private Text item, adapt;
+    private boolean isShowd = false;
 
     private Image grayItem,blueItem,grayAdapter,blueAdapter;
-    private DependentLayout slidebackground;
-    private SwipeLayout swipeLayout;
-
     @Override
     public void onStart(Intent intent) {
-        // 设置状态栏颜色
-        WindowManager.getInstance().getTopWindow().get().setStatusBarColor(getAbilityPackageContext().getColor(ResourceTable.Color_blue));
         super.onStart(intent);
         super.setUIContent(ResourceTable.Layout_ability_main);
-        initView();
-        initData();
+        initLeft();
+        initCommont();
+        mVerticalStepperView = (VerticalStepperView) findComponentById(ResourceTable.Id_vertical_stepper_view);
+        mVerticalStepperView.setStepperAdapter(this);
+        System.out.println("zzzzm-->"+mVerticalStepperView);
+
     }
 
-    private void initView() {
+    private void initLeft() {
+        itemlayout = (DirectionalLayout) findComponentById(ResourceTable.Id_item_layout);
+        adapterlayout = (DirectionalLayout) findComponentById(ResourceTable.Id_adapter_item);
 
         grayItem = (Image) findComponentById(ResourceTable.Id_gray_item);
         blueItem = (Image) findComponentById(ResourceTable.Id_blue_item);
@@ -83,46 +57,31 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
 
         rootLayout = (DirectionalLayout) findComponentById(ResourceTable.Id_root);
         clickleft = (Image) findComponentById(ResourceTable.Id_click_left);
-        slidebackground=(DependentLayout) findComponentById(ResourceTable.Id_slide_background);
         leftlayout = (DirectionalLayout) findComponentById(ResourceTable.Id_left_menu);
         background = (DirectionalLayout) findComponentById(ResourceTable.Id_background);
         itemview = (DirectionalLayout) findComponentById(ResourceTable.Id_itmview);
         adpaterview = (DirectionalLayout) findComponentById(ResourceTable.Id_adpaterview);
         item = (Text) findComponentById(ResourceTable.Id_item);
         adapt = (Text) findComponentById(ResourceTable.Id_adapt);
-         swipeLayout = (SwipeLayout) findComponentById(ResourceTable.Id_swipe);
-        DirectionalLayout right = (DirectionalLayout) findComponentById(ResourceTable.Id_left_menu_new);
-        swipeLayout.initializeSwipe(this);
-        swipeLayout.addDrag(SwipeLayout.DragEdge.Right, right);
         background.setVisibility(Component.HIDE);
         background.setAlpha(0.4f);
-        slidebackground.setHeight(1);
-        slidebackground.setAlpha(1f);
-
+     initleftmenu();
     }
 
-    /**
-     * 设置tabList
-     */
-    private void initData() {
-        slidebackground.setClickedListener(new Component.ClickedListener() {
-            @Override
-            public void onClick(Component component) {
-//                swipeLayout.close();
-            }
-        });
+    private void initleftmenu() {
         ShapeElement backgrounds = new ShapeElement();
         backgrounds.setRgbColor(new RgbColor(158, 158, 158));
         itemview.setBackground(backgrounds);
         item.setTextColor(Color.BLUE);
-        viewCreateHelper = new ViewCreateHelper(getContext());
-        rootLayout.removeAllComponents();
-        rootLayout.addComponent(viewCreateHelper.createView(0));
         clickleft.setClickedListener(new Component.ClickedListener() {
             @Override
             public void onClick(Component component) {
+                System.out.println("leftmain---"+1);
                 if (!isShowd) {
+                    System.out.println("leftmain---"+2);
+
                     if (click == 0) {
+                        System.out.println("leftmain---"+3);
                         ShapeElement backgrounds = new ShapeElement();
                         backgrounds.setRgbColor(new RgbColor(158, 158, 158));
                         itemview.setBackground(backgrounds);
@@ -173,13 +132,12 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
                 ShapeElement background = new ShapeElement();
                 background.setRgbColor(new RgbColor(255, 255, 255));
                 adpaterview.setBackground(background);
-                viewCreateHelper = new ViewCreateHelper(getContext());
-                rootLayout.removeAllComponents();
                 blueItem.setVisibility(Component.VISIBLE);
                 grayItem.setVisibility(Component.HIDE);
                 grayAdapter.setVisibility(Component.VISIBLE);
                 blueAdapter.setVisibility(Component.HIDE);
-                rootLayout.addComponent(viewCreateHelper.createView(0));
+               itemlayout.setVisibility(Component.VISIBLE);
+               adapterlayout.setVisibility(Component.HIDE);
                 item.setTextColor(Color.BLUE);
                 adapt.setTextColor(Color.BLACK);
                 if (isShowd) {
@@ -201,9 +159,8 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
                 ShapeElement background = new ShapeElement();
                 background.setRgbColor(new RgbColor(255, 255, 255));
                 itemview.setBackground(background);
-                viewCreateHelper = new ViewCreateHelper(getContext());
-                rootLayout.removeAllComponents();
-                rootLayout.addComponent(viewCreateHelper.createView(1));
+                itemlayout.setVisibility(Component.HIDE);
+                adapterlayout.setVisibility(Component.VISIBLE);
                 blueItem.setVisibility(Component.HIDE);
                 grayItem.setVisibility(Component.VISIBLE);
                 grayAdapter.setVisibility(Component.HIDE);
@@ -215,8 +172,146 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
         });
     }
 
-    private boolean isShowd = false;
 
+    @Override
+    protected void onInactive() {
+        super.onInactive();
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    private VerticalStepperItemView mSteppers[] = new VerticalStepperItemView[3];
+    private Button mNextBtn0, mNextBtn1, mPrevBtn1, mNextBtn2, mPrevBtn2;
+    private String mActivatedColorRes = "#2196F3";
+    private int mDoneIconRes = 0;
+
+    private void initCommont() {
+        mSteppers[0] = (VerticalStepperItemView) findComponentById(ResourceTable.Id_stepper_0);
+        mSteppers[1] = (VerticalStepperItemView) findComponentById(ResourceTable.Id_stepper_1);
+        mSteppers[2] = (VerticalStepperItemView) findComponentById(ResourceTable.Id_stepper_2);
+        Component inflateView0 = LayoutScatter.getInstance(this).parse(ResourceTable.Layout_step_0_layout, null, false);
+        Component inflateView1 = LayoutScatter.getInstance(this).parse(ResourceTable.Layout_step_1_layout, null, false);
+        Component inflateView2 = LayoutScatter.getInstance(this).parse(ResourceTable.Layout_step_2_layout, null, false);
+        mSteppers[0].addCustomViewComponet(inflateView0);
+        mSteppers[1].addCustomViewComponet(inflateView1);
+        mSteppers[2].addCustomViewComponet(inflateView2);
+
+        VerticalStepperItemView.bindSteppers(mSteppers);
+
+        mNextBtn0 = (Button) inflateView0.findComponentById(ResourceTable.Id_button_next_0);
+        mNextBtn0.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                System.out.println("xxxxx000nextstep");
+
+                mSteppers[0].nextStep();
+            }
+        });
+
+        Button mErrorButton = (Button) inflateView1.findComponentById(ResourceTable.Id_button_test_error);
+        mErrorButton.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                if (mSteppers[0].getErrorText() != null) {
+                    mSteppers[0].setErrorText(null);
+                } else {
+                    mSteppers[0].setErrorText("Test error!");
+                }
+            }
+        });
+
+        mPrevBtn1 = (Button) inflateView1.findComponentById(ResourceTable.Id_button_prev_1);
+        mPrevBtn1.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                mSteppers[1].prevStep();
+            }
+        });
+
+        mNextBtn1 = (Button) inflateView1.findComponentById(ResourceTable.Id_button_next_1);
+        mNextBtn1.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                mSteppers[1].nextStep();
+            }
+        });
+
+        mPrevBtn2 = (Button) inflateView2.findComponentById(ResourceTable.Id_button_prev_2);
+        mPrevBtn2.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                mSteppers[2].prevStep();
+            }
+        });
+
+        mNextBtn2 = (Button) inflateView2.findComponentById(ResourceTable.Id_button_next_2);
+        mNextBtn2.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+//                Snackbar.make(view, "Finish!", Snackbar.LENGTH_LONG).show();
+                toast(MainAbilitySlice.this, "Finish!");
+
+            }
+        });
+
+        findComponentById(ResourceTable.Id_btn_change_point_color).setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                int res=0;
+
+                if (mActivatedColorRes.equals("#2196F3")) {
+                    res=ResourceTable.Graphic_gray_shap;
+                    mActivatedColorRes = "#673AB7";
+                } else {
+                    mActivatedColorRes = "#2196F3";
+                    res=ResourceTable.Graphic_blue_background;
+
+                }
+                for (VerticalStepperItemView stepper : mSteppers) {
+                    stepper.setActivatedColor(new Color(Color.getIntColor(mActivatedColorRes)),res);
+                }
+            }
+        });
+        findComponentById(ResourceTable.Id_btn_change_done_icon).setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component view) {
+                if (mDoneIconRes == ResourceTable.Graphic_ic_done_white_16dp) {
+                    mDoneIconRes = ResourceTable.Graphic_ic_save_white_16dp;
+                } else {
+                    mDoneIconRes = ResourceTable.Graphic_ic_done_white_16dp;
+                }
+                for (VerticalStepperItemView stepper : mSteppers) {
+                    stepper.setDoneIconResource(mDoneIconRes);
+                }
+            }
+        });
+    }
     @Override
     public void onActive() {
         super.onActive();
@@ -227,6 +322,72 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
         super.onForeground(intent);
     }
 
+    @Override
+    public String getTitle(int index) {
+        return "Step " + index;
+    }
+
+    public String getSummary(int index) {
+        switch (index) {
+            case 0:
+                return "Summarized if needed"+(mVerticalStepperView.getCurrentStep() > index ? "; <b>isDone!</b>" : "");
+            case 2:
+                return "Last step"
+                        + (mVerticalStepperView.getCurrentStep() > index ? "; <b>isDone!</b>" : "");
+            default:
+                return null;
+        }
+    }
+
+    @Override
+    public int size() {
+        return 3;
+    }
+
+    @Override
+    public Component onCreateCustomView(final int index, Context context, VerticalStepperItemView parent) {
+        Component inflateView= LayoutScatter.getInstance(context).parse(ResourceTable.Layout_vertical_stepper_sample_item, null, false);
+        Text contentView = (Text) inflateView.findComponentById(ResourceTable.Id_item_content);
+        contentView.setText(
+                index == 0 ? ResourceTable.String_content_step_0 : (index == 1 ? ResourceTable.String_content_step_1  : ResourceTable.String_content_step_2 )
+        );
+        Button nextButton = (Button) inflateView.findComponentById(ResourceTable.Id_button_next);
+        nextButton.setText(index == size() - 1 ? "SET ERROR TEXT" : "OK");
+        nextButton.setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component component) {
+                if (!mVerticalStepperView.nextStep()) {
+                    mVerticalStepperView.setErrorText(0, mVerticalStepperView.getErrorText(0) == null ? "Test error" : null);
+//                    Snackbar.make(mVerticalStepperView, "Set!", Snackbar.LENGTH_LONG).show();
+                    toast(MainAbilitySlice.this, "Set!");
+                }
+            }
+        });
+        Button prevButton = (Button) inflateView.findComponentById(ResourceTable.Id_button_prev);
+        prevButton.setText(index == 0 ? "TOGGLE ADMIN" : "CANCLE");
+        inflateView.findComponentById(ResourceTable.Id_button_prev).setClickedListener(new Component.ClickedListener() {
+            @Override
+            public void onClick(Component component) {
+                if (index != 0) {
+                    mVerticalStepperView.prevStep();
+                } else {
+                    mVerticalStepperView.setAnimationEnabled(!mVerticalStepperView.isAnimationEnabled());
+                }
+            }
+        });
+        return inflateView;
+    }
+    @Override
+    public void onShow(int index) {
+
+    }
+
+    @Override
+    public void onHide(int index) {
+
+    }
+
+
     private void animal(boolean isShow) {
         // 动效
         AnimatorValue animation = new AnimatorValue();
@@ -274,29 +435,44 @@ public class MainAbilitySlice extends AbilitySlice implements SwipeLayout.update
             @Override
             public void onUpdate(AnimatorValue animatorValue, float interpolatedTime) {
 //                System.out.println("xxx---layout"+interpolatedTime);
+                System.out.println("leftmain---"+4);
 
                 int newHeight = 0;
                 if (!isShow) {
+                    System.out.println("leftmain---"+5);
                     newHeight = (int) (880 * interpolatedTime);
                     isShowd = true;
                 } else {
+                    System.out.println("leftmain---"+6);
+
                     newHeight = (int) (880 * (1 - interpolatedTime));
                     isShowd = false;
                 }
+                System.out.println("leftmain---"+7+"---"+newHeight);
+
                 leftlayout.setWidth(newHeight);
             }
         });
         animation.start();
     }
-
-
-    @Override
-    public void updateBackground(int p) {
-        if(p==0){
-            slidebackground.setHeight(1);
-            slidebackground.setAlpha(1f);
-        }else{
-            slidebackground.setHeight(2500);
-            slidebackground.setAlpha(0.4f);        }
+    private static final int MAX_LINE = 2;
+    private static final int DURATION = 5000;
+    private static final int OFFSET_Y = 60;
+    private void toast(Context context,String string){
+        DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(context)
+                .parse(ResourceTable.Layout_layout_toast, null, false);
+        Text text = (Text) toastLayout.findComponentById(ResourceTable.Id_msg_toast);
+        text.setText(string);
+        text.setTextAlignment(TextAlignment.LEFT);
+        text.setMultipleLine(true);
+        text.setMaxTextLines(MAX_LINE);
+        text.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_END);
+        new ToastDialog(context)
+                .setComponent(toastLayout)
+                .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
+                .setAlignment(LayoutAlignment.BOTTOM | LayoutAlignment.HORIZONTAL_CENTER)
+                .setOffset(0, OFFSET_Y)
+                .show();
     }
+
 }
diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json
deleted file mode 100644
index c077a3ce8ec268d2f6bb1b5bef2eb92236330f0f..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/element/float.json
+++ /dev/null
@@ -1,84 +0,0 @@
-{
-  "float": [
-    {
-      "name": "advertise_bottom_margin",
-      "value": "10vp"
-    },
-    {
-      "name": "advertise_left_margin",
-      "value": "10vp"
-    },
-    {
-      "name": "advertise_width",
-      "value": "40vp"
-    },
-    {
-      "name": "advertise_height",
-      "value": "17vp"
-    },
-    {
-      "name": "advertise_text_size",
-      "value": "8fp"
-    },
-    {
-      "name": "skip_height",
-      "value": "29vp"
-    },
-    {
-      "name": "skip_width",
-      "value": "56vp"
-    },
-    {
-      "name": "skip_button_right_margin",
-      "value": "20vp"
-    },
-    {
-      "name": "skip_button_top_margin",
-      "value": "20vp"
-    },
-    {
-      "name": "skip_left_margin",
-      "value": "9vp"
-    },
-    {
-      "name": "skip_right_margin",
-      "value": "10vp"
-    },
-    {
-      "name": "skip_text_size",
-      "value": "12fp"
-    },
-    {
-      "name": "copyright_text_size",
-      "value": "8fp"
-    },
-    {
-      "name": "copyright_top_margin",
-      "value": "12vp"
-    },
-    {
-      "name": "app_title_text_size",
-      "value": "21fp"
-    },
-    {
-      "name": "app_icon_height",
-      "value": "36vp"
-    },
-    {
-      "name": "app_icon_width",
-      "value": "36vp"
-    },
-    {
-      "name": "app_icon_right_margin",
-      "value": "12vp"
-    },
-    {
-      "name": "bottom_bar_height",
-      "value": "92vp"
-    },
-    {
-      "name": "app_title_top_margin",
-      "value": "12vp"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/integer.json b/entry/src/main/resources/base/element/integer.json
deleted file mode 100644
index 11a0b6feadec7803b1d0c7c6d2e53074f68bc6ff..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/element/integer.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "integer": [
-    {
-      "name": "ImageButton",
-      "value": 0
-    },
-    {
-      "name": "TextView",
-      "value": 1
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/strarray.json b/entry/src/main/resources/base/element/strarray.json
deleted file mode 100644
index 71752b0d7fdf931b31377679148575c069d07a5c..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/element/strarray.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "strarray": [
-    {
-      "name": "tab_title",
-      "value": [
-        {
-          "value": "IN SCROLLVIEW"
-        },
-        {
-          "value": "IN LISTVIEW"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 6f8a4f33f92079846412988f127a28528be6e92c..17c062425cec9ac4b92e5c32c239ddc3e781233c 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -2,44 +2,17 @@
   "string": [
     {
       "name": "app_name",
-      "value": "ExpandableTextView Demo"
+      "value": "MaterialStepperView"
     },
     {
       "name": "mainability_description",
       "value": "Java_Phone_Empty Feature Ability"
-    },{
-      "name": "content_step_0",
-      "value": "This is the first step. Click OK button to next step.\n\nTest Message."
-    },
-    {
-      "name": "textId",
-      "value": "expandable_text"
-    },
-    {
-      "name": "imageId",
-      "value": "expand_collapse"
-    },
-    {
-      "name": "expand_less",
-      "value": "收缩"
-    },
-    {
-      "name": "expand_more",
-      "value": "展开"
-    },
-    {
-      "name": "ExpandCollapseToggleId",
-      "value": "expand_collapse"
-    },
-
-    {
-      "name": "ExpandableTextId",
-      "value": "expandable_text"
     },
     {
-      "name": "set",
-      "value": "SET \n STEP 1 \n ERROR \n TEXT"
-    },
+      "name": "HelloWorld",
+      "value": "Hello World"
+    }
+  ,
     {
       "name": "content_step_1",
       "value": "This is the second step. Click OK button to next step or Cancel button to previous step.\n\nThe summary text of each step is optional. If you haven\\'t set, summary view won\\'t be displayed."
@@ -47,6 +20,9 @@
     {
       "name": "content_step_2",
       "value": "This is the last step. You can finish steps now."
+    },{
+      "name": "content_step_0",
+      "value": "This is the first step. Click OK button to next step.\n\nTest Message."
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/base/graphic/background_ability_main.xml b/entry/src/main/resources/base/graphic/background_ability_main.xml
index 05e7b6be04e01877279b69ad26866e30c7ecfc4e..c0c0a3df480fa387a452b9c40ca191cc918a3fc0 100644
--- a/entry/src/main/resources/base/graphic/background_ability_main.xml
+++ b/entry/src/main/resources/base/graphic/background_ability_main.xml
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<shape
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:shape="rectangle">
-
+<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
+       ohos:shape="rectangle">
     <solid
-        ohos:color="#000000"/>
+        ohos:color="#FFFFFF"/>
 </shape>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/graphic/ic_warning_black_24dp.xml b/entry/src/main/resources/base/graphic/ic_warning_black_24dp.xml
deleted file mode 100644
index 8787116726c34d4381ca1316c8e6824804e5a403..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/graphic/ic_warning_black_24dp.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<vector xmlns:ohos="http://schemas.huawei.com/res/ohos"
-        ohos:height="24vp"
-        ohos:width="24vp"
-        ohos:viewportHeight="24"
-        ohos:viewportWidth="24">
-    <path
-
-        ohos:fillColor="#FF000000"
-        ohos:pathData="M1,21h22L12,2 1,21zM13,18h-2v-2h2v2zM13,14h-2v-4h2v4z"/>
-</vector>
-
diff --git a/entry/src/main/resources/base/graphic/icon_app.xml b/entry/src/main/resources/base/graphic/icon_app.xml
deleted file mode 100644
index f37c0fddbda88b3a9ecec0c9835e85c2a28ff618..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/graphic/icon_app.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<shape
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:shape="rectangle">
-
-    <corners
-        ohos:radius="8vp"/>
-
-    <stroke
-        ohos:width="1vp"
-        ohos:color="#80000000"/>
-
-    <solid
-        ohos:color="#31000000"/>
-</shape>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/graphic/title_bg.xml b/entry/src/main/resources/base/graphic/title_bg.xml
deleted file mode 100644
index 6c1be6294c1b65b7e3d67f864a03f568b294f2f2..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/graphic/title_bg.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<shape
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:shape="rectangle">
-
-    <solid
-        ohos:color="#ffffff"/>
-</shape>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/ability_main.xml b/entry/src/main/resources/base/layout/ability_main.xml
index 1c4e8a281f8656ef58c6e2399233084d1ad0f7c4..d927bc213b8eecdd6c93727d23806a21e1264a29 100644
--- a/entry/src/main/resources/base/layout/ability_main.xml
+++ b/entry/src/main/resources/base/layout/ability_main.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <DependentLayout
     xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    xmlns:app="http://schemas.huawei.com/apk/res/ohos"
     ohos:height="match_parent"
-    ohos:id="$+id:root_parent"
-    ohos:width="match_parent">
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
 
     <DirectionalLayout
         ohos:height="match_parent"
@@ -40,7 +41,90 @@
             ohos:height="match_parent"
             ohos:width="match_parent"
             ohos:orientation="vertical">
+            <DirectionalLayout
+                ohos:id="$+id:item_layout"
+                ohos:height="match_parent"
+                ohos:width="match_parent"
+                ohos:orientation="vertical">
+
+                <DirectionalLayout
+                    ohos:height="match_parent"
+                    ohos:width="match_parent"
+                    ohos:orientation="vertical">
+                    <moe.feng.common.stepperview.VerticalStepperItemView
+                        ohos:id="$+id:stepper_0"
+                        ohos:height="match_content"
+                        ohos:top_margin="24vp"
+                        ohos:width="match_parent"
+                        app:step_index="1"
+                        app:step_state="1"
+                        app:step_summary="Summarized if needed"
+                        app:step_summary_done="Summarized if needed. Done"
+                        app:step_title="Step 1">
+
+                    </moe.feng.common.stepperview.VerticalStepperItemView>
+
+                    <moe.feng.common.stepperview.VerticalStepperItemView
+                        ohos:id="$+id:stepper_1"
+                        ohos:height="match_content"
+                        ohos:top_margin="8vp"
+                        ohos:width="match_parent"
+                        app:step_index="2"
+                        app:step_summary=""
+                        app:step_title="Step 2">
+
+
+                    </moe.feng.common.stepperview.VerticalStepperItemView>
+
+                    <moe.feng.common.stepperview.VerticalStepperItemView
+                        ohos:id="$+id:stepper_2"
+                        ohos:height="match_content"
+                        ohos:top_margin="8vp"
+                        ohos:width="match_parent"
+                        app:step_index="3"
+                        app:step_is_last="true"
+                        app:step_summary="Last step"
+                        app:step_summary_done="Last step. Done"
+                        app:step_title="Step 3">
+
+
+
+                    </moe.feng.common.stepperview.VerticalStepperItemView>
+
+                    <Button
+                        ohos:id="$+id:btn_change_point_color"
+                        ohos:height="30vp"
+                        ohos:width="120vp"
+                        ohos:margin="24vp"
+                        ohos:background_element="$graphic:gray_background"
+                        ohos:text="Change point activated color"/>
+
+                    <Button
+                        ohos:id="$+id:btn_change_done_icon"
+                        ohos:height="30vp"
+                        ohos:width="120vp"
+                        ohos:left_margin="24vp"
+                        ohos:background_element="$graphic:gray_background"
+                        ohos:text="Change point done icon"/>
+
+                </DirectionalLayout>
+
+            </DirectionalLayout>
+            <DirectionalLayout
+                ohos:id="$+id:adapter_item"
+                ohos:height="match_parent"
+                ohos:visibility="hide"
+                ohos:width="match_parent"
+                ohos:orientation="vertical">
+
+                <moe.feng.common.stepperview.VerticalStepperView
+                    ohos:id="$+id:vertical_stepper_view"
+                    ohos:height="match_parent"
+                    ohos:width="match_parent"
+                    app:step_animation_duration="300"
+                    app:step_done_icon="$graphic:ic_done_white_16dp"/>
 
+            </DirectionalLayout>
         </DirectionalLayout>
     </DirectionalLayout>
 
@@ -185,130 +269,5 @@
         </DirectionalLayout>
 
     </DirectionalLayout>
- <moe.feng.common.stepperview.util.SwipeLayout
-     ohos:height="match_parent"
-     ohos:width="match_parent"
-     ohos:id="$+id:swipe"
-     ><DependentLayout
-     ohos:height="match_parent"
-     ohos:width="match_parent"
-     ohos:background_element="#000"
-     ohos:id="$+id:slide_background"/>
-     <DirectionalLayout
-         ohos:id="$+id:left_menu_new"
-         ohos:height="match_parent"
-         ohos:width="280vp"
-         ohos:background_element="#fff"
-         ohos:orientation="vertical">
-
-         <DirectionalLayout
-             ohos:height="60vp"
-             ohos:width="match_parent"
-             ohos:id="$+id:itmviewnew"
-             ohos:top_margin="10vp"
-             ohos:orientation="horizontal"
-             >
-
-             <Image
-                 ohos:height="25vp"
-                 ohos:width="25vp"
-                 ohos:image_src="$graphic:ic_format_list_bulleted_black_24dp"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="15vp"/>
-
-             <Text
-                 ohos:height="match_content"
-                 ohos:width="match_content"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="30vp"
-                 ohos:id="$+id:itemnew"
-                 ohos:text="Vertical Stepper (Item View)"
-                 ohos:text_size="15vp"/>
-         </DirectionalLayout>
-
-         <DirectionalLayout
-             ohos:height="60vp"
-             ohos:width="match_parent"
-             ohos:id="$+id:adpaterviewnew"
-             ohos:orientation="horizontal"
-             >
-
-             <Image
-                 ohos:height="25vp"
-                 ohos:width="25vp"
-                 ohos:image_src="$graphic:ic_format_list_bulleted_black_24dp"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="15vp"/>
-
-             <Text
-                 ohos:height="match_content"
-                 ohos:width="match_content"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="30vp"
-                 ohos:id="$+id:adaptnew"
-
-                 ohos:text="Vertical Stepper (Adapter)"
-                 ohos:text_size="15vp"/>
-         </DirectionalLayout>
-
-         <Component
-             ohos:height="2vp"
-             ohos:width="match_parent"
-             ohos:background_element="#ECECEC"
-             ohos:bottom_margin="10vp"
-             ohos:top_margin="10vp"/>
-
-         <Text
-             ohos:height="match_content"
-             ohos:width="match_content"
-             ohos:left_margin="15vp"
-             ohos:text="About"
-             ohos:text_size="15vp"/>
-
-         <DirectionalLayout
-             ohos:height="60vp"
-             ohos:width="match_parent"
-             ohos:orientation="horizontal"
-             >
-
-             <Image
-                 ohos:height="25vp"
-                 ohos:width="25vp"
-                 ohos:image_src="$graphic:ic_thumb_up_black_24dp"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="15vp"/>
-
-             <Text
-                 ohos:height="match_content"
-                 ohos:width="match_content"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="30vp"
-                 ohos:text="Donate me"
-                 ohos:text_size="15vp"/>
-         </DirectionalLayout>
-
-         <DirectionalLayout
-             ohos:height="60vp"
-             ohos:width="match_parent"
-             ohos:orientation="horizontal"
-             >
-
-             <Image
-                 ohos:height="25vp"
-                 ohos:width="25vp"
-                 ohos:image_src="$graphic:ic_open_in_new_black_24dp"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="15vp"/>
-
-             <Text
-                 ohos:height="match_content"
-                 ohos:width="match_content"
-                 ohos:layout_alignment="vertical_center"
-                 ohos:left_margin="30vp"
-                 ohos:text="Fork on Github"
-                 ohos:text_size="15vp"/>
-         </DirectionalLayout>
-
-     </DirectionalLayout>
- </moe.feng.common.stepperview.util.SwipeLayout>
+
 </DependentLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/fragment_vertical_stepper.xml b/entry/src/main/resources/base/layout/fragment_vertical_stepper.xml
new file mode 100644
index 0000000000000000000000000000000000000000..61ebe96f2475b913308990722e55e4dc3ca471bb
--- /dev/null
+++ b/entry/src/main/resources/base/layout/fragment_vertical_stepper.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    xmlns:app="http://schemas.huawei.com/apk/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <DirectionalLayout
+        ohos:height="match_parent"
+        ohos:width="match_parent"
+        ohos:orientation="vertical">
+        <moe.feng.common.stepperview.VerticalStepperItemView
+            ohos:id="$+id:stepper_0"
+           ohos:height="match_content"
+            ohos:top_margin="24vp"
+            ohos:width="match_parent"
+            app:step_index="1"
+            app:step_state="1"
+            app:step_summary="Summarized if needed"
+            app:step_summary_done="Summarized if needed. Done"
+            app:step_title="Step 1">
+
+        </moe.feng.common.stepperview.VerticalStepperItemView>
+
+        <moe.feng.common.stepperview.VerticalStepperItemView
+            ohos:id="$+id:stepper_1"
+            ohos:height="match_content"
+            ohos:top_margin="8vp"
+            ohos:width="match_parent"
+            app:step_index="2"
+            app:step_summary=""
+            app:step_title="Step 2">
+
+
+        </moe.feng.common.stepperview.VerticalStepperItemView>
+
+        <moe.feng.common.stepperview.VerticalStepperItemView
+            ohos:id="$+id:stepper_2"
+            ohos:height="match_content"
+            ohos:top_margin="8vp"
+            ohos:width="match_parent"
+            app:step_index="3"
+            app:step_is_last="true"
+            app:step_summary="Last step"
+            app:step_summary_done="Last step. Done"
+            app:step_title="Step 3">
+
+
+
+        </moe.feng.common.stepperview.VerticalStepperItemView>
+
+        <Button
+            ohos:id="$+id:btn_change_point_color"
+            ohos:height="30vp"
+            ohos:width="120vp"
+            ohos:margin="24vp"
+            ohos:background_element="$graphic:gray_background"
+            ohos:text="Change point activated color"/>
+
+        <Button
+            ohos:id="$+id:btn_change_done_icon"
+            ohos:height="30vp"
+            ohos:width="120vp"
+            ohos:left_margin="24vp"
+            ohos:background_element="$graphic:gray_background"
+            ohos:text="Change point done icon"/>
+
+    </DirectionalLayout>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/fragment_vertical_stepper_adapter.xml b/entry/src/main/resources/base/layout/fragment_vertical_stepper_adapter.xml
new file mode 100644
index 0000000000000000000000000000000000000000..138e858de95373d2db3a40fe6355cf03e546360f
--- /dev/null
+++ b/entry/src/main/resources/base/layout/fragment_vertical_stepper_adapter.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    xmlns:app="http://schemas.huawei.com/apk/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <moe.feng.common.stepperview.VerticalStepperView
+        ohos:id="$+id:vertical_stepper_view"
+        ohos:height="match_parent"
+        ohos:width="match_parent"
+        app:step_animation_duration="300"
+        app:step_done_icon="$graphic:ic_done_white_16dp"/>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/left_main.xml b/entry/src/main/resources/base/layout/left_main.xml
deleted file mode 100644
index 3de80097dcf5c2fcd520a497dd4b76a6deddbbc0..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/layout/left_main.xml
+++ /dev/null
@@ -1,123 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<DirectionalLayout
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:height="match_parent"
-    ohos:width="match_content"
-    ohos:orientation="vertical">
-    <DirectionalLayout
-        ohos:id="$+id:left_menu"
-        ohos:height="match_parent"
-        ohos:width="0vp"
-        ohos:background_element="#fff"
-        ohos:orientation="vertical">
-
-        <DirectionalLayout
-            ohos:height="60vp"
-            ohos:width="match_parent"
-            ohos:id="$+id:itmview"
-            ohos:top_margin="10vp"
-            ohos:orientation="horizontal"
-            >
-
-            <Image
-                ohos:height="25vp"
-                ohos:width="25vp"
-                ohos:image_src="$graphic:ic_format_list_bulleted_black_24dp"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="15vp"/>
-
-            <Text
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="30vp"
-                ohos:id="$+id:item"
-                ohos:text="Vertical Stepper (Item View)"
-                ohos:text_size="15vp"/>
-        </DirectionalLayout>
-
-        <DirectionalLayout
-            ohos:height="60vp"
-            ohos:width="match_parent"
-            ohos:id="$+id:adpaterview"
-            ohos:orientation="horizontal"
-            >
-
-            <Image
-                ohos:height="25vp"
-                ohos:width="25vp"
-                ohos:image_src="$graphic:ic_format_list_bulleted_black_24dp"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="15vp"/>
-
-            <Text
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="30vp"
-                ohos:id="$+id:adapt"
-
-                ohos:text="Vertical Stepper (Adapter)"
-                ohos:text_size="15vp"/>
-        </DirectionalLayout>
-
-        <Component
-            ohos:height="2vp"
-            ohos:width="match_parent"
-            ohos:background_element="#ECECEC"
-            ohos:bottom_margin="10vp"
-            ohos:top_margin="10vp"/>
-
-        <Text
-            ohos:height="match_content"
-            ohos:width="match_content"
-            ohos:left_margin="15vp"
-            ohos:text="About"
-            ohos:text_size="15vp"/>
-
-        <DirectionalLayout
-            ohos:height="60vp"
-            ohos:width="match_parent"
-            ohos:orientation="horizontal"
-            >
-
-            <Image
-                ohos:height="25vp"
-                ohos:width="25vp"
-                ohos:image_src="$graphic:ic_thumb_up_black_24dp"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="15vp"/>
-
-            <Text
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="30vp"
-                ohos:text="Donate me"
-                ohos:text_size="15vp"/>
-        </DirectionalLayout>
-
-        <DirectionalLayout
-            ohos:height="60vp"
-            ohos:width="match_parent"
-            ohos:orientation="horizontal"
-            >
-
-            <Image
-                ohos:height="25vp"
-                ohos:width="25vp"
-                ohos:image_src="$graphic:ic_open_in_new_black_24dp"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="15vp"/>
-
-            <Text
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="30vp"
-                ohos:text="Fork on Github"
-                ohos:text_size="15vp"/>
-        </DirectionalLayout>
-
-    </DirectionalLayout>
-</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/pager_srcoll_item.xml b/entry/src/main/resources/base/layout/pager_srcoll_item.xml
deleted file mode 100644
index dab0e81f75e5e7d3f80b9622236f96f96a4c678e..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/layout/pager_srcoll_item.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<DependentLayout
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:id="$+id:scroll"
-    ohos:height="match_parent"
-    ohos:width="match_parent">
-
-    <include
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:layout="$layout:step_layout"/>
-</DependentLayout>
diff --git a/entry/src/main/resources/base/layout/step_0_layout.xml b/entry/src/main/resources/base/layout/step_0_layout.xml
new file mode 100644
index 0000000000000000000000000000000000000000..39cd1737d52fd10d2d8ff722d784185eb8b3fbeb
--- /dev/null
+++ b/entry/src/main/resources/base/layout/step_0_layout.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+    <DirectionalLayout
+        ohos:width="match_content"
+        ohos:height="match_parent"
+        ohos:id="$+id:step_0"
+        ohos:orientation="vertical">
+
+        <Text
+            ohos:height="match_content"
+            ohos:top_margin="12vp"
+            ohos:width="match_content"
+            ohos:multiple_lines="true"
+            ohos:text="$string:content_step_0"/>
+
+        <DirectionalLayout
+            ohos:height="match_content"
+            ohos:top_margin="16vp"
+            ohos:width="match_content"
+            ohos:orientation="horizontal">
+
+            <Button
+                ohos:id="$+id:button_next_0"
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:blue_background"
+                ohos:text="OK"
+                ohos:text_color="#fff"/>
+
+            <Button
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:gray_background"
+                ohos:start_margin="8vp"
+                ohos:text="CANCLE"/>
+
+        </DirectionalLayout>
+
+    </DirectionalLayout>
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/step_1_layout.xml b/entry/src/main/resources/base/layout/step_1_layout.xml
new file mode 100644
index 0000000000000000000000000000000000000000..66c62abae7bfc35751cadd1ac015a21e5687f632
--- /dev/null
+++ b/entry/src/main/resources/base/layout/step_1_layout.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:id="$+id:step_1"
+        ohos:orientation="vertical">
+
+        <Text
+            ohos:height="match_content"
+            ohos:top_margin="12vp"
+            ohos:width="match_content"
+            ohos:multiple_lines="true"
+            ohos:text="$string:content_step_1"/>
+
+        <DirectionalLayout
+            ohos:height="match_content"
+            ohos:top_margin="16vp"
+            ohos:width="match_content"
+            ohos:orientation="horizontal">
+
+            <Button
+                ohos:id="$+id:button_next_1"
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:blue_background"
+                ohos:text="OK"
+                ohos:text_color="#fff"/>
+
+            <Button
+                ohos:id="$+id:button_prev_1"
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:gray_background"
+                ohos:start_margin="8vp"
+                ohos:text="CANCLE"/>
+
+            <Button
+                ohos:id="$+id:button_test_error"
+                ohos:height="30vp"
+                ohos:width="120vp"
+                ohos:background_element="$graphic:red_background"
+                ohos:start_margin="8vp"
+                ohos:text="Set Step 1 Error Text"
+                ohos:text_color="#fff"/>
+
+        </DirectionalLayout>
+
+    </DirectionalLayout>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/step_2_layout.xml b/entry/src/main/resources/base/layout/step_2_layout.xml
new file mode 100644
index 0000000000000000000000000000000000000000..54b0c6e9e9af6cb8ab2d3ba72fc55d91cc51ee32
--- /dev/null
+++ b/entry/src/main/resources/base/layout/step_2_layout.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:id="$+id:step_2"
+        ohos:orientation="vertical">
+
+        <Text
+            ohos:height="match_content"
+            ohos:top_margin="12vp"
+            ohos:width="match_content"
+            ohos:multiple_lines="true"
+            ohos:text="$string:content_step_2"/>
+
+        <DirectionalLayout
+            ohos:height="match_content"
+            ohos:width="match_content"
+            ohos:orientation="horizontal"
+            ohos:top_margin="16vp">
+
+            <Button
+                ohos:id="$+id:button_next_2"
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:blue_background"
+                ohos:text="OK"
+                ohos:text_color="#fff"/>
+
+            <Button
+                ohos:id="$+id:button_prev_2"
+                ohos:height="30vp"
+                ohos:width="80vp"
+                ohos:background_element="$graphic:gray_background"
+                ohos:start_margin="8vp"
+                ohos:text="CANCLE"/>
+
+        </DirectionalLayout>
+
+    </DirectionalLayout>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/step_item_layout.xml b/entry/src/main/resources/base/layout/step_item_layout.xml
deleted file mode 100644
index 1bf55bba5dc4c6c4661c0ce447c16c9b33e6e37d..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/layout/step_item_layout.xml
+++ /dev/null
@@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<DirectionalLayout
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    xmlns:app="http://schemas.huawei.com/apk/res/ohos"
-    ohos:height="match_content"
-    ohos:width="match_parent">
-
-    <DirectionalLayout
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:orientation="horizontal">
-
-        <DependentLayout
-            ohos:height="24vp"
-            ohos:width="24vp">
-
-            <Image
-                ohos:id="$+id:background"
-                ohos:height="match_parent"
-                ohos:width="match_parent"
-                ohos:background_element="$graphic:gray_shap"/>
-
-            <Text
-                ohos:id="$+id:num"
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:layout_alignment="center"
-                ohos:text="1"
-                ohos:center_in_parent="true"
-                ohos:text_alignment="center"
-                ohos:text_color="#fff"
-                ohos:text_size="12vp"/>
-
-            <Image
-                ohos:id="$+id:pic"
-                ohos:height="20vp"
-                ohos:width="20vp"
-                ohos:clip_alignment="center"
-                ohos:center_in_parent="true"
-                ohos:image_src="$graphic:ic_done_white_16dp"
-                ohos:visibility="hide"/>
-            <Image
-                ohos:id="$+id:picsave"
-                ohos:height="20vp"
-                ohos:width="20vp"
-                ohos:clip_alignment="center"
-                ohos:center_in_parent="true"
-                ohos:image_src="$graphic:ic_save_white_16dp"
-                ohos:visibility="hide"/>
-            <Image
-                ohos:id="$+id:warn"
-                ohos:height="24vp"
-                ohos:width="24vp"
-                ohos:background_element="$media:warn"
-                ohos:visibility="hide"/>
-        </DependentLayout>
-
-        <Text
-            ohos:id="$+id:title"
-            ohos:height="match_content"
-            ohos:width="match_content"
-            ohos:layout_alignment="vertical_center"
-            ohos:left_margin="15vp"
-            ohos:text_color="$color:gray"
-            ohos:text_font="sans-serif-medium"
-            ohos:text_size="14fp"/>
-    </DirectionalLayout>
-
-    <DirectionalLayout
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:orientation="horizontal">
-
-        <Component
-            ohos:height="match_parent"
-            ohos:width="1vp"
-            ohos:id="$+id:lines"
-            ohos:background_element="#BDBDBD"
-            ohos:left_margin="12vp"
-            ohos:top_margin="8vp"
-            ohos:bottom_margin="8vp"/>
-
-        <DirectionalLayout
-            ohos:height="match_content"
-            ohos:width="match_parent"
-            ohos:orientation="vertical">
-
-            <moe.feng.common.stepperview.CustomeDirectionalLayout
-                ohos:id="$+id:expandable"
-                ohos:height="match_content"
-                ohos:width="match_parent"
-                ohos:orientation="vertical"
-                app:layouttype="true">
-
-                <Text
-                    ohos:id="$+id:expandable_text"
-                    ohos:height="match_content"
-                    ohos:width="match_parent"
-                    ohos:component_description="$string:ExpandableTextId"
-                    ohos:layout_alignment="horizontal_center"
-                    ohos:left_margin="20vp"
-                    ohos:multiple_lines="true"
-                    ohos:right_margin="10vp"
-                    ohos:text="$string:content_step_1"
-                    ohos:text_alignment="left"
-                    ohos:text_color="#666666"
-                    ohos:text_font="sans-serif-light"
-                    ohos:text_size="16vp"
-                    ohos:top_margin="8vp"/>
-
-                <DirectionalLayout
-                    ohos:height="match_content"
-                    ohos:width="match_parent"
-                    ohos:left_margin="20vp"
-                    ohos:component_description="operan_task_button"
-                    ohos:orientation="horizontal"
-                    ohos:top_margin="16vp">
-
-                    <Button
-                        ohos:id="$+id:button_next_1"
-                        ohos:height="45vp"
-                        ohos:width="80vp"
-                        ohos:background_element="$graphic:blue_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="OK"
-                        ohos:text_color="#fff"
-                        ohos:text_size="14vp"/>
-
-                    <Button
-                        ohos:id="$+id:button_prev_1"
-                        ohos:height="45vp"
-                        ohos:width="80vp"
-                        ohos:background_element="$graphic:gray_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="CANCLE"
-                        ohos:text_size="14vp"/>
-
-                    <Button
-                        ohos:id="$+id:button_test_error"
-                        ohos:height="98vp"
-                        ohos:width="80vp"
-                        ohos:background_element="$graphic:red_background"
-                        ohos:multiple_lines="true"
-                        ohos:start_margin="8vp"
-                        ohos:text="$string:set"
-                        ohos:text_color="#fff"
-                        ohos:text_size="14vp"
-                        ohos:visibility="hide"/>
-                </DirectionalLayout>
-
-            </moe.feng.common.stepperview.CustomeDirectionalLayout>
-            <Text
-                ohos:id="$+id:hint"
-                ohos:height="30vp"
-                ohos:width="match_content"
-                ohos:layout_alignment="vertical_center"
-                ohos:left_margin="20vp"
-                ohos:text="Summarized if needed. Done"
-                ohos:text_alignment="vertical_center"
-                ohos:text_color="#666666"
-                ohos:text_font="sans-serif-light"
-                ohos:text_size="16vp"/>
-            <Component
-                ohos:height="40vp"
-                ohos:visibility="visible"
-                ohos:width="match_parent"/>
-        </DirectionalLayout>
-    </DirectionalLayout>
-
-</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/step_layout.xml b/entry/src/main/resources/base/layout/step_layout.xml
deleted file mode 100644
index a155b758b9019f99a894c9c30233ce3f1b403ba0..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/layout/step_layout.xml
+++ /dev/null
@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<DirectionalLayout
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:id="$+id:root"
-    ohos:height="match_parent"
-    ohos:width="match_parent"
-    ohos:orientation="vertical"
-    ohos:padding="24vp">
-
-    <ListContainer
-        ohos:id="$+id:step_list"
-        ohos:height="match_parent"
-        ohos:width="match_content"/>
-
-    <include
-        ohos:id="$+id:setp_one"
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:layout="$layout:step_item_layout"/>
-
-    <include
-        ohos:id="$+id:setp_two"
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:layout="$layout:step_item_layout"/>
-
-    <include
-        ohos:id="$+id:setp_three"
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:layout="$layout:step_item_layout"/>
-
-    <Button
-        ohos:id="$+id:btn_change_point_color"
-        ohos:height="45vp"
-        ohos:width="match_content"
-        ohos:background_element="$graphic:gray_background"
-        ohos:left_padding="10vp"
-        ohos:margin="24vp"
-        ohos:right_padding="10vp"
-        ohos:text="Change point activated color"
-        ohos:text_size="14vp"/>
-
-    <Button
-        ohos:id="$+id:btn_change_done_icon"
-        ohos:height="45vp"
-        ohos:width="match_content"
-        ohos:background_element="$graphic:gray_background"
-        ohos:left_margin="24vp"
-        ohos:left_padding="10vp"
-        ohos:right_padding="10vp"
-        ohos:text="Change point done icon"
-        ohos:text_size="14vp"/>
-</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/step_list_item_layout.xml b/entry/src/main/resources/base/layout/step_list_item_layout.xml
deleted file mode 100644
index a45ad67af501666a85c28f1c61543f3d4c51a63a..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/layout/step_list_item_layout.xml
+++ /dev/null
@@ -1,157 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<DirectionalLayout
-    xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    xmlns:app="http://schemas.huawei.com/apk/res/ohos"
-    ohos:height="match_content"
-    ohos:width="match_parent">
-
-    <DirectionalLayout
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:orientation="horizontal">
-
-        <DependentLayout
-            ohos:height="24vp"
-            ohos:width="24vp">
-
-            <Image
-                ohos:id="$+id:background"
-                ohos:height="match_parent"
-                ohos:width="match_parent"
-                ohos:background_element="$graphic:gray_shap"/>
-
-            <Text
-                ohos:id="$+id:num"
-                ohos:height="match_content"
-                ohos:width="match_content"
-                ohos:text="1"
-                ohos:center_in_parent="true"
-                ohos:text_alignment="center"
-                ohos:text_color="#fff"
-                ohos:text_size="14vp"/>
-
-            <Image
-                ohos:id="$+id:pic"
-                ohos:height="20vp"
-                ohos:width="20vp"
-                ohos:clip_alignment="center"
-                ohos:center_in_parent="true"
-                ohos:image_src="$graphic:ic_done_white_16dp"
-                ohos:visibility="hide"/>
-            <Image
-                ohos:id="$+id:warn"
-                ohos:height="24vp"
-                ohos:width="24vp"
-                ohos:background_element="$media:warn"
-                ohos:visibility="hide"/>
-        </DependentLayout>
-
-        <Text
-            ohos:id="$+id:title"
-            ohos:height="match_content"
-            ohos:width="match_content"
-            ohos:layout_alignment="vertical_center"
-            ohos:left_margin="15vp"
-            ohos:text_color="#333333"
-            ohos:text_font="sans-serif-medium"
-            ohos:text_size="14fp"/>
-    </DirectionalLayout>
-
-    <DirectionalLayout
-        ohos:height="match_content"
-        ohos:width="match_parent"
-        ohos:orientation="horizontal">
-
-        <Component
-            ohos:height="match_parent"
-            ohos:width="1vp"
-            ohos:background_element="#BDBDBD"
-            ohos:left_margin="12vp"
-            ohos:id="$+id:lines"
-            ohos:top_margin="8vp"
-            ohos:bottom_margin="8vp"/>
-
-        <DirectionalLayout
-            ohos:height="match_content"
-            ohos:width="match_parent"
-            ohos:orientation="vertical">
-
-            <moe.feng.common.stepperview.CustomeDirectionalLayout
-                ohos:id="$+id:expandable"
-                ohos:height="match_content"
-                ohos:width="match_parent"
-                ohos:orientation="vertical">
-
-                <Text
-                    ohos:id="$+id:expandable_text"
-                    ohos:height="match_content"
-                    ohos:width="match_parent"
-                    ohos:component_description="$string:ExpandableTextId"
-                    ohos:layout_alignment="horizontal_center"
-                    ohos:left_margin="20vp"
-                    ohos:multiple_lines="true"
-                    ohos:right_margin="10vp"
-                    ohos:text="$string:content_step_0"
-                    ohos:text_alignment="left"
-                    ohos:text_color="#666666"
-                    ohos:text_font="sans-serif-light"
-                    ohos:text_size="16vp"
-                    ohos:top_margin="8vp"/>
-
-                <DirectionalLayout
-                    ohos:height="match_content"
-                    ohos:width="match_parent"
-                    ohos:left_margin="20vp"
-                    ohos:id="$+id:direct"
-                    ohos:component_description="operan_task_button"
-                    ohos:orientation="horizontal"
-                    ohos:top_margin="16vp">
-
-                    <Button
-                        ohos:id="$+id:button_next_1"
-                        ohos:height="45vp"
-                        ohos:width="80vp"
-                        ohos:background_element="$graphic:blue_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="OK"
-                        ohos:text_color="#fff"
-                        ohos:text_size="14vp"/>
-                    <Button
-                        ohos:id="$+id:button_next_error"
-                        ohos:height="45vp"
-                        ohos:width="120vp"
-                        ohos:background_element="$graphic:blue_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="SET ERROR TEXT"
-                        ohos:text_color="#fff"
-                        ohos:visibility="hide"
-                        ohos:text_size="14vp"/>
-                    <Button
-                        ohos:id="$+id:button_prev_0"
-                        ohos:height="45vp"
-                        ohos:width="120vp"
-                        ohos:background_element="$graphic:gray_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="TOGGLE ADMIN"
-                        ohos:visibility="hide"
-                        ohos:text_size="14vp"/>
-                    <Button
-                        ohos:id="$+id:button_prev_1"
-                        ohos:height="45vp"
-                        ohos:width="80vp"
-                        ohos:background_element="$graphic:gray_background"
-                        ohos:start_margin="8vp"
-                        ohos:text="CANCLE"
-                        ohos:text_size="14vp"/>
-
-                </DirectionalLayout>
-
-            </moe.feng.common.stepperview.CustomeDirectionalLayout>
-
-            <Component
-                ohos:height="40vp"
-                ohos:width="match_parent"/>
-        </DirectionalLayout>
-    </DirectionalLayout>
-
-</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/layout/vertical_stepper_sample_item.xml b/entry/src/main/resources/base/layout/vertical_stepper_sample_item.xml
new file mode 100644
index 0000000000000000000000000000000000000000..98c23bded74b234a1c99804499744ba54b838d2d
--- /dev/null
+++ b/entry/src/main/resources/base/layout/vertical_stepper_sample_item.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_content"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <Text
+        ohos:id="$+id:item_content"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:multiple_lines="true"
+        ohos:top_margin="12vp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:orientation="horizontal"
+        ohos:top_margin="16vp">
+
+        <Button
+            ohos:id="$+id:button_next"
+            ohos:height="45vp"
+            ohos:width="80vp"
+            ohos:background_element="$graphic:blue_background"
+            ohos:text="OK"
+            ohos:text_color="#fff"/>
+
+        <Button
+            ohos:id="$+id:button_prev"
+            ohos:height="45vp"
+            ohos:width="80vp"
+            ohos:background_element="$graphic:gray_background"
+            ohos:start_margin="8vp"
+            ohos:text="CANCLE"/>
+
+    </DirectionalLayout>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/ic_expand_less_black_12dp.png b/entry/src/main/resources/base/media/ic_expand_less_black_12dp.png
deleted file mode 100644
index 4893bfcbf68efbe8932ea8d9435ef0270818be20..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_expand_less_black_12dp.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/ic_expand_less_black_16dp.png b/entry/src/main/resources/base/media/ic_expand_less_black_16dp.png
deleted file mode 100644
index 0aa7c572413c0cf0a60d60e86f7c3104931cbab3..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_expand_less_black_16dp.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/ic_expand_more_black_12dp.png b/entry/src/main/resources/base/media/ic_expand_more_black_12dp.png
deleted file mode 100644
index 4f6d8ff27567d0d94b4a631d948754108c2a43be..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_expand_more_black_12dp.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/ic_expand_more_black_16dp.png b/entry/src/main/resources/base/media/ic_expand_more_black_16dp.png
deleted file mode 100644
index cb5fbc1185838e8f156eeef5ebc2bdab2ce52e4a..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_expand_more_black_16dp.png and /dev/null differ
diff --git a/entry/src/ohosTest/config.json b/entry/src/ohosTest/config.json
index bfe8a78c29109c53bead86e7b645da6098bc808c..ad2444ed299c73f6d443a08b44ba5378284aed04 100644
--- a/entry/src/ohosTest/config.json
+++ b/entry/src/ohosTest/config.json
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "moe.feng.common.steperview",
+    "bundleName": "moe.feng.common.stepperview.demo",
     "vendor": "feng",
     "version": {
       "code": 1,
@@ -14,7 +14,7 @@
   },
   "deviceConfig": {},
   "module": {
-    "package": "moe.feng.common.steperview",
+    "package": "moe.feng.common.stepperview.demo",
     "name": "testModule",
     "deviceType": [
       "phone"
diff --git a/entry/src/ohosTest/java/moe/feng/common/steperview/ExampleOhosTest.java b/entry/src/ohosTest/java/moe/feng/common/stepperview/demo/ExampleOhosTest.java
similarity index 72%
rename from entry/src/ohosTest/java/moe/feng/common/steperview/ExampleOhosTest.java
rename to entry/src/ohosTest/java/moe/feng/common/stepperview/demo/ExampleOhosTest.java
index 7e50c2f1ffa313d81a8f507708b919d54e826f3c..ef6e7ee6fa13cd23c8c3066c99b3c90b39137f5f 100644
--- a/entry/src/ohosTest/java/moe/feng/common/steperview/ExampleOhosTest.java
+++ b/entry/src/ohosTest/java/moe/feng/common/stepperview/demo/ExampleOhosTest.java
@@ -1,4 +1,4 @@
-package moe.feng.common.steperview;
+package moe.feng.common.stepperview.demo;
 
 import ohos.aafwk.ability.delegation.AbilityDelegatorRegistry;
 import org.junit.Test;
@@ -9,6 +9,6 @@ public class ExampleOhosTest {
     @Test
     public void testBundleName() {
         final String actualBundleName = AbilityDelegatorRegistry.getArguments().getTestBundleName();
-        assertEquals("moe.feng.common.steperview", actualBundleName);
+        assertEquals("moe.feng.common.stepperview.demo", actualBundleName);
     }
 }
\ No newline at end of file
diff --git a/entry/src/test/java/moe/feng/common/stepperview/demo/ExampleTest.java b/entry/src/test/java/moe/feng/common/stepperview/demo/ExampleTest.java
new file mode 100644
index 0000000000000000000000000000000000000000..13a731b19026a4b0e45f653439f956ec465f1c6f
--- /dev/null
+++ b/entry/src/test/java/moe/feng/common/stepperview/demo/ExampleTest.java
@@ -0,0 +1,9 @@
+package moe.feng.common.stepperview.demo;
+
+import org.junit.Test;
+
+public class ExampleTest {
+    @Test
+    public void onStart() {
+    }
+}
diff --git a/library/.gitignore b/library/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..796b96d1c402326528b4ba3c12ee9d92d0e212e9
--- /dev/null
+++ b/library/.gitignore
@@ -0,0 +1 @@
+/build
diff --git a/library/build.gradle b/library/build.gradle
index 312bc1c336a2b750048a182991e5872344e45dbf..25ddf0cf1daa8f1533639ebc05ce352f4019b8ff 100644
--- a/library/build.gradle
+++ b/library/build.gradle
@@ -4,10 +4,18 @@ ohos {
     defaultConfig {
         compatibleSdkVersion 5
     }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
     
 }
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    testCompile 'junit:junit:4.12'
+    testImplementation 'junit:junit:4.13'
 }
diff --git a/library/libs/okhttp.jar b/library/libs/okhttp.jar
deleted file mode 100644
index d861f87e5ed2faeb144d9f7fcbc0e32564bcc518..0000000000000000000000000000000000000000
Binary files a/library/libs/okhttp.jar and /dev/null differ
diff --git a/library/proguard-rules.pro b/library/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/library/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/library/src/main/config.json b/library/src/main/config.json
index 8f7f66096238b16d900e6f9be8e2c5fde054c517..7a9d01e8804780d6705790293248eb818f452929 100644
--- a/library/src/main/config.json
+++ b/library/src/main/config.json
@@ -7,9 +7,9 @@
       "name": "1.0"
     },
     "apiVersion": {
-      "compatible": 5,
+      "compatible": 4,
       "target": 5,
-      "releaseType": "Beta2"
+      "releaseType": "Beta1"
     }
   },
   "deviceConfig": {},
diff --git a/library/src/main/java/moe/feng/common/stepperview/CustomeDirectionalLayout.java b/library/src/main/java/moe/feng/common/stepperview/CustomeDirectionalLayout.java
deleted file mode 100644
index cefe5b95a1e5a8369933baa96c4c4727e316c26a..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/CustomeDirectionalLayout.java
+++ /dev/null
@@ -1,192 +0,0 @@
-package moe.feng.common.stepperview;
-
-import moe.feng.common.stepperview.util.Log;
-import moe.feng.common.stepperview.util.TypedAttrUtils;
-import ohos.agp.animation.Animator;
-import ohos.agp.animation.AnimatorValue;
-import ohos.agp.components.*;
-import ohos.agp.render.Canvas;
-import ohos.app.Context;
-import ohos.hiviewdfx.HiLog;
-import ohos.hiviewdfx.HiLogLabel;
-
-import java.util.List;
-
-public class CustomeDirectionalLayout extends DirectionalLayout {
-    private static final HiLogLabel logLabel = new HiLogLabel(HiLog.LOG_APP, 0x00101, "CustomeDirectionalLayout");
-    private int totalChildHeigh;
-    public static boolean isFirst = false;
-    public static int hasset=0;
-    private boolean layouttype = false;
-    private PositionText positionText;
-    public void setPositionText(PositionText positionText){
-        this.positionText=positionText;
-    }
-
-    public CustomeDirectionalLayout(Context context) {
-        this(context, null);
-        HiLog.debug(logLabel, "onEstimateSize1");
-
-    }
-
-    public CustomeDirectionalLayout(Context context, AttrSet attrSet) {
-        super(context, attrSet);
-        HiLog.debug(logLabel, "onEstimateSize2");
-
-        init(attrSet);
-    }
-
-    public CustomeDirectionalLayout(Context context, AttrSet attrSet, String styleName) {
-        super(context, attrSet, styleName);
-        HiLog.debug(logLabel, "onEstimateSize3");
-
-        init(attrSet);
-
-    }
-
-    private void init(AttrSet attrs) {
-        initAttrs(attrs);
-        // enforces vertical orientation
-        HiLog.debug(logLabel, "onEstimateSizeinit");
-
-        setOrientation(Component.VERTICAL);
-        //add绘制的回调
-        addDrawTask(mDrawTask);
-    }
-
-    private void initAttrs(AttrSet attrs) {
-        layouttype = TypedAttrUtils.getBoolean(attrs, "layouttype", false);
-
-    }
-
-    //绘制的回调
-    private DrawTask mDrawTask = new DrawTask() {
-        @Override
-        public void onDraw(Component component, Canvas canvas) {
-            HiLog.debug(logLabel, "onEstimateSizeonDraw");
-
-            //add测量的回调
-//            setEstimateSizeListener(CustomeDirectionalLayout.this);
-            //add布局的回调
-//            setArrangeListener(CustomeDirectionalLayout.this);
-            findViews();
-
-        }
-    };
-    private Text expandText;
-    private DirectionalLayout expandCollapse;
-
-    private void findViews() {
-        int count = getChildCount();
-        if (count < 1) {
-            return;
-        }
-        for (int i = 0; i < count; i++) {
-            Component component = getComponentAt(i);
-            if (component.getComponentDescription().toString().equals("expandable_text")) {
-                expandText = (Text) component;
-            } else if (component.getComponentDescription().toString().equals("operan_task_button")) {
-                expandCollapse = (DirectionalLayout) component;
-            }
-        }
-        HiLog.debug(logLabel, "onEstimatefindViews--->" + expandText.getHeight() + "-->" + expandCollapse.getHeight());
-        totalChildHeigh = expandText.getHeight() + expandCollapse.getHeight()+expandText.getMarginTop()+expandCollapse.getMarginBottom()+expandCollapse.getMarginTop()+50;
-        if (layouttype&&hasset!=2) {
-            if (!isFirst) {
-                isFirst = true;
-                setDefaultHeigh(true);
-            } else {
-                hasset=hasset+1;
-                System.out.println("isisissss");
-                setDefaultHeigh(false);
-
-            }
-        }
-
-    }
-
-    public void setDefaultHeigh(boolean is) {
-        if (is) {
-            System.out.println("xxx--->" + totalChildHeigh);
-            CustomeDirectionalLayout.this.setHeight(totalChildHeigh);
-        } else {
-            CustomeDirectionalLayout.this.setHeight(30);
-
-        }
-    }
-
-    public void setDefault(int p,boolean show) {
-
-        AnimatorValue animation = new AnimatorValue();
-        animation.setDuration(300);
-        animation.setStateChangedListener(new Animator.StateChangedListener() {
-            @Override
-            public void onStart(Animator animator) {
-//                applyAlphaAnimation(expandText, animAlphaStart);
-            }
-
-            @Override
-            public void onStop(Animator animator) {
-
-            }
-
-            @Override
-            public void onCancel(Animator animator) {
-
-            }
-
-            @Override
-            public void onEnd(Animator animator) {
-                // notify the listener
-                positionText.setPositionColor(p);
-            }
-
-            @Override
-            public void onPause(Animator animator) {
-
-            }
-
-            @Override
-            public void onResume(Animator animator) {
-
-            }
-        });
-        animation.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
-
-            @Override
-            public void onUpdate(AnimatorValue animatorValue, float interpolatedTime) {
-
-
-                System.out.println("xxx---layout" + interpolatedTime);
-
-                if (show) {
-                    CustomeDirectionalLayout.this.setHeight((int) (totalChildHeigh * interpolatedTime));
-                } else {
-                    System.out.println("xxx---lay111out" + interpolatedTime);
-
-                    CustomeDirectionalLayout.this.setHeight((int) (totalChildHeigh * (1 - interpolatedTime)));
-
-                }
-//                if (Float.compare(animAlphaStart, 1.0f) != 0) {
-//                    applyAlphaAnimation(expandText, animAlphaStart + interpolatedTime * (1.0f - animAlphaStart));
-//                }
-            }
-        });
-        animation.start();
-    }
-
-//    @Override
-//    public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
-//        HiLog.debug(logLabel, "onEstimateSizeonDrawonEstimateSize" + CustomeDirectionalLayout.this.getHeight());
-//        return false;
-//    }
-//
-//    @Override
-//    public boolean onArrange(int i, int i1, int i2, int i3) {
-//        return false;
-//    }
-
-    public interface PositionText{
-        void setPositionColor(int p);
-    }
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/IStepperAdapter.java b/library/src/main/java/moe/feng/common/stepperview/IStepperAdapter.java
new file mode 100644
index 0000000000000000000000000000000000000000..836f11456cc486e8ba1be96b47965b28889a2458
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/IStepperAdapter.java
@@ -0,0 +1,69 @@
+package moe.feng.common.stepperview;
+
+
+import ohos.agp.components.Component;
+import ohos.app.Context;
+
+/**
+ * Base interface providing the adapter to populate steps inside of
+ * a {@link IStepperAdapter}. You have to implement this and create your
+ * own adapter to configure steps.
+ *
+ * Or you can use a more specific implementation of this, such as
+ * {@link ViewBasedStepperAdapter}.
+ */
+public interface IStepperAdapter {
+
+	/**
+	 * This method will be called by the VerticalStepperView to obtain a title string
+	 * to describe the title of specified step. The string cannot be null.
+	 *
+	 * @param index The index of the title requested
+	 * @return A title for the requested step
+	 */
+	String getTitle(int index);
+
+	/**
+	 * This method may be called by the VerticalStepperView to obtain a title string
+	 * to describe the summary of specified step. It may return null indicating
+	 * no summary for this step.
+	 *
+	 * @param index The index of the summary requested
+	 * @return A summary for the requested step
+	 */
+	String getSummary(int index);
+
+	/**
+	 * Get the count of steppers
+	 *
+	 * @return The size of adapter
+	 */
+	int size();
+
+	/**
+	 * When the specified step need a custom view, this method will be called
+	 * for creating custom view. If you want to add it to ItemView by yourself,
+	 * it can return null. The returned view will be added to ItemView.
+	 *
+	 * @param index Index
+	 * @param context Context
+	 * @param parent Vertical Stepper Item View
+	 * @return The custom view created
+	 */
+	Component onCreateCustomView(int index, Context context, VerticalStepperItemView parent);
+
+	/**
+	 * This method will be called when a stepper is showed.
+	 *
+	 * @param index The index of stepper showed
+	 */
+	void onShow(int index);
+
+	/**
+	 * This method will be called when a stepper is hidden.
+	 *
+	 * @param index The index of stepper hidden
+	 */
+	void onHide(int index);
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/IStepperView.java b/library/src/main/java/moe/feng/common/stepperview/IStepperView.java
new file mode 100644
index 0000000000000000000000000000000000000000..d593a2ea3f459d1fc5a7ebc77c0f2b609d0f65b0
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/IStepperView.java
@@ -0,0 +1,80 @@
+package moe.feng.common.stepperview;
+
+
+import ohos.agp.components.element.Element;
+import ohos.agp.utils.Color;
+import ohos.media.image.PixelMap;
+
+/**
+ * Base interface providing a view base of stepper component.
+ * You have to implement this and create your own stepper view.
+ *
+ * We have made some stepper view:
+ * - {@link VerticalStepperView}
+ */
+interface IStepperView {
+
+	/**
+	 * Get stepper adapter
+	 *
+	 * @return Stepper Adapter
+	 */
+	IStepperAdapter getStepperAdapter();
+
+	/**
+	 * Return the index of current step
+	 *
+	 * @return Index
+	 */
+	int getCurrentStep();
+
+	/**
+	 * Get normal point color
+	 *
+	 * @return Normal Point Color
+	 */
+	Color getNormalColor();
+
+	/**
+	 * Get activated point color
+	 *
+	 * @return Activated Point Color
+	 */
+	Color getActivatedColor();
+
+	/**
+	 * Get line color
+	 *
+	 * @return Line Color
+	 */
+	Color getLineColor();
+
+	/**
+	 * Get error highlight color
+	 *
+	 * @return Error Highlight Color
+	 */
+	Color getErrorColor();
+
+	/**
+	 * Get animation duration
+	 *
+	 * @return Animation Duration
+	 */
+	int getAnimationDuration();
+
+	/**
+	 * Get done icon drawable
+	 *
+	 * @return Done icon drawable
+	 */
+	Element getDoneIcon();
+
+    /**
+     * Should show summary always
+     *
+     * @return If should show summary always
+     */
+    boolean isAlwaysShowSummary();
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/util/TypedAttrUtils.java b/library/src/main/java/moe/feng/common/stepperview/TypedAttrUtils.java
similarity index 88%
rename from library/src/main/java/moe/feng/common/stepperview/util/TypedAttrUtils.java
rename to library/src/main/java/moe/feng/common/stepperview/TypedAttrUtils.java
index 699840d25994c4f57f6c19cfbce9d2dda07b45dc..0062ed2a9435b5523ea3fcc3960b5445716ae0f3 100644
--- a/library/src/main/java/moe/feng/common/stepperview/util/TypedAttrUtils.java
+++ b/library/src/main/java/moe/feng/common/stepperview/TypedAttrUtils.java
@@ -15,15 +15,13 @@
  *
  */
 
-package moe.feng.common.stepperview.util;
+package moe.feng.common.stepperview;
 
 
 import ohos.agp.components.Attr;
 import ohos.agp.components.AttrSet;
 import ohos.agp.components.element.Element;
-import ohos.agp.components.element.ShapeElement;
 import ohos.agp.utils.Color;
-import ohos.app.Context;
 import ohos.hiviewdfx.HiLog;
 import ohos.hiviewdfx.HiLogLabel;
 
@@ -58,6 +56,14 @@ public class TypedAttrUtils {
             return attr.getBoolValue();
         }
     }
+    public static Element getElement(AttrSet attrs, String attrName, Element defValue) {
+        if (attrs.getAttr(attrName) != null && attrs.getAttr(attrName).isPresent()) {
+            HiLog.info(label, "attr.getElement() = " + attrs.getAttr(attrName).get().getElement());
+            return attrs.getAttr(attrName).get().getElement();
+        } else {
+            return defValue;
+        }
+    }
 
 
     public static int getInteger(AttrSet attrs, String attrName, int defValue) {
diff --git a/library/src/main/java/moe/feng/common/stepperview/VerticalStepperItemView.java b/library/src/main/java/moe/feng/common/stepperview/VerticalStepperItemView.java
new file mode 100644
index 0000000000000000000000000000000000000000..14e15de7f9560966639f86577145de86cacb54ee
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/VerticalStepperItemView.java
@@ -0,0 +1,960 @@
+package moe.feng.common.stepperview;
+
+
+import moe.feng.common.stepperview.internal.ClipOvalFrameLayout;
+import ohos.agp.animation.Animator;
+import ohos.agp.animation.AnimatorProperty;
+import ohos.agp.animation.AnimatorValue;
+import ohos.agp.components.*;
+import ohos.agp.components.element.Element;
+import ohos.agp.components.element.ShapeElement;
+import ohos.agp.utils.Color;
+import ohos.app.Context;
+
+
+public class VerticalStepperItemView extends StackLayout {
+
+    /**
+     * Internal Views
+     */
+    private Component mPointBackground, mLineView;
+    private Text mPointNumber;
+    private Text mTitleText, mSummaryText;
+    private StackLayout mCustomView, mPointFrame;
+    private DirectionalLayout mRightContainer;
+    private Image mDoneIconView, mErrorIconView;
+    private Component mMarginBottomView;
+
+    private AnimatorValue mTitleColorAnimator, mSummaryColorAnimator, mPointColorAnimator;
+    private AnimatorProperty mPointAnimator, mErrorIconAnimator;
+
+    /**
+     * Step state
+     */
+    private String mTitle;
+    private String mSummary = "";
+    private String mSummaryFinished = "";
+    private int mIndex = 1;
+    private boolean isLastStep = false;
+    private int mState = STATE_NORMAL;
+    private String mErrorText = null; // If null means no error
+
+    /**
+     * View attributes
+     */
+    private int mAnimationDuration;
+    private Color mNormalColor, mActivatedColor, mLineColor, mErrorColor;
+    private Element mDoneIcon;
+    private boolean mAnimationEnabled = true;
+    private boolean mAlwaysShowSummary = false;
+
+    /**
+     * The bind views
+     */
+    private VerticalStepperItemView mPrevItemView, mNextItemView;
+
+    public static final int STATE_NORMAL = 0, STATE_SELECTED = 1, STATE_DONE = 2;
+
+    private final int DP;
+
+    public VerticalStepperItemView(Context context) {
+        this(context, null);
+    }
+
+    public VerticalStepperItemView(Context context, AttrSet attrs) {
+        this(context, attrs, "");
+    }
+
+    public VerticalStepperItemView(Context context, AttrSet attrs, String defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+
+        prepareViews(context);
+        initColor();
+
+        DP = 1;
+
+        if (attrs != null) {
+
+            mTitle = TypedAttrUtils.getString(attrs, "step_title", "");
+            mSummary = TypedAttrUtils.getString(attrs, "step_summary", "");
+            mSummaryFinished = TypedAttrUtils.getString(attrs, "step_summary_done", "");
+            mIndex = TypedAttrUtils.getInteger(attrs, "step_index", 1);
+            mState = TypedAttrUtils.getInteger(attrs, "step_state", STATE_NORMAL);
+            isLastStep = TypedAttrUtils.getBoolean(attrs, "step_is_last", false);
+            mNormalColor = TypedAttrUtils.getColor(attrs, "step_normal_color", mNormalColor);
+            mActivatedColor = TypedAttrUtils.getColor(attrs, "step_activated_color", mActivatedColor);
+            mAnimationDuration = TypedAttrUtils.getInteger(attrs, "step_animation_duration", mAnimationDuration);
+            mAnimationEnabled = TypedAttrUtils.getBoolean(attrs, "step_enable_animation", true);
+            mLineColor = TypedAttrUtils.getColor(attrs, "step_line_color", mLineColor);
+            mErrorColor = TypedAttrUtils.getColor(attrs, "step_error_highlight_color", mErrorColor);
+            mAlwaysShowSummary = TypedAttrUtils.getBoolean(attrs, "step_show_summary_always", mAlwaysShowSummary);
+            System.out.println("zzzzm-->attrs != null"+"arr---"+mSummary);
+
+
+            if (null != TypedAttrUtils.getElement(attrs, "step_done_icon", null)) {
+                mDoneIcon = TypedAttrUtils.getElement(attrs, "step_done_icon", null);
+            }
+
+        }else{
+            System.out.println("zzzzm-->attrs ==== null"+"arr---"+mSummary);
+
+        }
+
+        setTitle(mTitle);
+        updateSummaryView();
+        setIndex(mIndex);
+        setState(mState);
+        setIsLastStep(isLastStep);
+        setDoneIcon(mDoneIcon);
+        setAnimationEnabled(mAnimationEnabled);
+        setLineColor(mLineColor);
+        setErrorColor(mErrorColor);
+        System.out.println("xxxxx-zm" + "初始化");
+
+    }
+
+    private void initColor() {
+        mNormalColor = new Color(Color.getIntColor("#9E9E9E"));
+        mActivatedColor = new Color(Color.getIntColor("#007DFF"));
+        mLineColor = new Color(Color.getIntColor("#9E9E9E"));
+        mErrorColor = new Color(Color.getIntColor("#F44336"));
+    }
+
+    @Override
+    public void addComponent(Component childComponent, int index, ComponentContainer.LayoutConfig layoutConfig) {
+        System.out.println("xxxxx-zm----" + "idddd--->addComponent");
+
+        if (childComponent.getId() == ResourceTable.Id_vertical_stepper_item_view_layout) {
+            System.out.println("xxxxx-zm----" + "idddd--->" + childComponent.getId());
+
+            super.addComponent(childComponent, index, layoutConfig);
+        } else {
+            System.out.println("xxxxx-zm----" + "else--->" + childComponent.getId());
+
+            mCustomView.addComponent(childComponent, index, layoutConfig);
+        }
+    }
+
+    public void addCustomViewComponet(Component component) {
+        mCustomView.addComponent(component);
+    }
+
+    StackLayout getCustomView() {
+        return mCustomView;
+    }
+
+    /**
+     * Remove custom view manually
+     */
+    public void removeCustomView() {
+        mCustomView.removeAllComponents();
+    }
+
+    private void prepareViews(Context context) {
+        // Inflate and find views
+        Component inflateView = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_vertical_stepper_item_view_layout, null, false);
+
+        mPointBackground = inflateView.findComponentById(ResourceTable.Id_stepper_point_background);
+        mLineView = inflateView.findComponentById(ResourceTable.Id_stepper_line);
+        mPointNumber = (Text) inflateView.findComponentById(ResourceTable.Id_stepper_number);
+        mTitleText = (Text) inflateView.findComponentById(ResourceTable.Id_stepper_title);
+
+        mSummaryText = (Text) inflateView.findComponentById(ResourceTable.Id_stepper_summary);
+        mCustomView = (StackLayout) inflateView.findComponentById(ResourceTable.Id_stepper_custom_view);
+        mPointFrame = (ClipOvalFrameLayout) inflateView.findComponentById(ResourceTable.Id_stepper_point_frame);
+        System.out.println("xxxxx---" + "prepareViewees" + mPointFrame + "--" + mTitleText + "---" + mCustomView);
+
+        mRightContainer = (DirectionalLayout) inflateView.findComponentById(ResourceTable.Id_stepper_right_layout);
+        mDoneIconView = (Image) inflateView.findComponentById(ResourceTable.Id_stepper_done_icon);
+        mMarginBottomView = inflateView.findComponentById(ResourceTable.Id_stepper_margin_bottom);
+        mErrorIconView = (Image) inflateView.findComponentById(ResourceTable.Id_stepper_error_icon);
+
+        // Add view
+        ComponentContainer.LayoutConfig lp = new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
+        addComponent(inflateView, lp);
+
+        // Set title top margin
+        mTitleText.getComponentTreeObserver().addGlobalFocusUpdatedListener(new ComponentTreeObserver.GlobalFocusUpdatedListener() {
+            @Override
+            public void onGlobalFocusUpdated(Component component, Component component1) {
+                int singleLineHeight = mTitleText.getHeight();
+                int topMargin = (mPointFrame.getHeight() - singleLineHeight) / 2;
+                // Only update top margin when it is positive, preventing titles being truncated.
+                if (topMargin > 0) {
+                    ComponentContainer.LayoutConfig mlp = mTitleText.getLayoutConfig();
+                    mlp.setMarginTop(topMargin);
+                }
+            }
+        });
+
+    }
+
+    private void updateMarginBottom() {
+        System.out.println("zzzzm-->"+"getComponent34");
+
+        mMarginBottomView.getLayoutConfig().height = (!isLastStep ? (mState != STATE_SELECTED ? 28 : 36) : 12) * DP;
+    }
+
+    /**
+     * Set up the state of this stepper item
+     *
+     * @param state The state of this stepper item
+     */
+    public synchronized void setState(int state) {
+        System.out.println("zzzzm-->"+"getComponent22");
+
+        // Change point background
+        if (mPointColorAnimator != null) mPointColorAnimator.cancel();
+        System.out.println("zzzzm-->"+"getComponent23");
+
+        if (state != STATE_NORMAL && mState == STATE_NORMAL) {
+            System.out.println("zzzzm-->"+"getComponent24");
+
+//            mPointColorAnimator = ViewUtils.createArgbAnimator(
+//                    mPointBackground, "backgroundColor", mNormalColor, mActivatedColor);
+//            mPointColorAnimator.setDuration(mAnimationDuration);
+//            mPointColorAnimator.start();
+            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_blue_cir_background);
+            mPointBackground.setBackground(background);
+        } else if (state == STATE_NORMAL && mState != STATE_NORMAL) {
+            System.out.println("zzzzm-->"+"getComponent25");
+
+//            mPointColorAnimator = ViewUtils.createArgbAnimator(
+//                    mPointBackground, "backgroundColor", mActivatedColor, mNormalColor);
+//            mPointColorAnimator.setDuration(mAnimationDuration);
+//            mPointColorAnimator.start();
+            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_gray_shap);
+            mPointBackground.setBackground(background);
+        } else {
+            System.out.println("zzzzm-->"+"getComponent26");
+
+//            ShapeElement shapeElement = new ShapeElement();
+//            shapeElement.setRgbColor(ViewUtils.getRgbColor(state == STATE_NORMAL ? mNormalColor : mActivatedColor));
+//            mPointBackground.setBackground(shapeElement);
+            ShapeElement background = new ShapeElement(mContext, state == STATE_NORMAL ?ResourceTable.Graphic_gray_shap:ResourceTable.Graphic_blue_cir_background);
+            mPointBackground.setBackground(background);
+        }
+
+        // Change point state
+        if (state == STATE_DONE && mState != STATE_DONE) {
+            System.out.println("zzzzm-->"+"getComponent27");
+
+            AnimatorProperty animator = mDoneIconView.createAnimatorProperty();
+            animator.alpha(1f).setDuration(mAnimationDuration);
+            animator.start();
+            AnimatorProperty animator1 = mPointNumber.createAnimatorProperty();
+            animator1.alpha(0f).setDuration(mAnimationDuration);
+            animator1.start();
+        } else if (state != STATE_DONE && mState == STATE_DONE) {
+            System.out.println("zzzzm-->"+"getComponent28");
+
+            AnimatorProperty animator = mDoneIconView.createAnimatorProperty();
+            animator.alpha(0f).setDuration(mAnimationDuration);
+            animator.start();
+            AnimatorProperty animator1 = mPointNumber.createAnimatorProperty();
+            animator1.alpha(1f).setDuration(mAnimationDuration);
+            animator1.start();
+        } else {
+            System.out.println("zzzzm-->"+"getComponent29");
+
+            mDoneIconView.setAlpha(state == STATE_DONE ? 1f : 0f);
+            mPointNumber.setAlpha(state == STATE_DONE ? 0f : 1f);
+        }
+
+        // Set title style
+        Color lastTitleTextColor = mTitleText.getTextColor();
+        if (mTitleColorAnimator != null) mTitleColorAnimator.cancel();
+//		mTitleText.setTextAppearance(getContext(), state == STATE_DONE ?
+//				R.style.TextAppearance_Widget_Stepper_Done : (
+//						state == STATE_NORMAL ?
+//								R.style.TextAppearance_Widget_Stepper_Normal :
+//								R.style.TextAppearance_Widget_Stepper_Selected
+//				));
+        System.out.println("zzzzwwm-->"+"getComponent13"+"---"+222+mErrorText);
+
+        // Update error state
+        if (mErrorText != null) {
+            System.out.println("zzzzm-->"+"getComponent30");
+
+            mTitleColorAnimator = ViewUtils.createArgbAnimator(
+                    mTitleText, "textColor", lastTitleTextColor, mErrorColor);
+            mTitleColorAnimator.setDuration(mAnimationDuration);
+            mTitleColorAnimator.start();
+            if (mSummaryColorAnimator != null) mSummaryColorAnimator.cancel();
+            mSummaryColorAnimator = ViewUtils.createArgbAnimator(
+                    mSummaryText, "textColor", mSummaryText.getTextColor(), mErrorColor);
+            mSummaryColorAnimator.setDuration(mAnimationDuration);
+            mSummaryColorAnimator.start();
+
+            if (mErrorIconView.getAlpha() < 1F) {
+                System.out.println("zzzzm-->"+"getComponent41");
+
+                if (mPointAnimator != null) mPointAnimator.cancel();
+                mPointAnimator = mPointFrame.createAnimatorProperty();
+                mPointAnimator.alpha(0f).setDuration(mAnimationDuration);
+                mPointAnimator.start();
+                mErrorIconView.setScaleX(0.6F);
+                mErrorIconView.setScaleY(0.6F);
+                if (mErrorIconAnimator != null) mErrorIconAnimator.cancel();
+                mErrorIconAnimator = mErrorIconView.createAnimatorProperty();
+                mErrorIconAnimator.scaleX(1F).scaleY(1F)
+                        .alpha(1F).setDuration(mAnimationDuration).setCurveType(Animator.CurveType.ANTICIPATE);
+                mErrorIconAnimator.start();
+            }
+        } else {
+            System.out.println("zzzzm-->"+"getComponent31");
+
+            if (mSummaryColorAnimator != null) mSummaryColorAnimator.cancel();
+            mSummaryColorAnimator = ViewUtils.createArgbAnimator(
+                    mSummaryText, "textColor", mSummaryText.getTextColor(), mLineColor);
+            mSummaryColorAnimator.setDuration(mAnimationDuration);
+            mSummaryColorAnimator.start();
+            System.out.println("zzzzm-->"+"getComponent32");
+           if(null==mPointFrame){
+               System.out.println("zzzzm-->"+"getComponent32222");
+
+           }else{
+               System.out.println("zzzzm-->"+"getComponent223333332");
+
+           }
+            if (mPointFrame.getAlpha() < 1F) {
+                System.out.println("zzzzm-->"+"getComponent33");
+
+                mPointFrame.setScaleX(0.6F);
+                mPointFrame.setScaleY(0.6F);
+                if (mPointAnimator != null) mPointAnimator.cancel();
+                mPointAnimator = mPointFrame.createAnimatorProperty();
+                mPointAnimator.scaleX(1F).scaleY(1F).alpha(1F).setDuration(mAnimationDuration);
+                mPointAnimator.start();
+                if (mErrorIconAnimator != null) mErrorIconAnimator.cancel();
+                mErrorIconAnimator = mErrorIconView.createAnimatorProperty();
+                mErrorIconAnimator.alpha(0F).setDuration(mAnimationDuration).setCurveType(Animator.CurveType.ANTICIPATE);
+                mErrorIconAnimator.start();
+            }
+        }
+
+        // Set the visibility of views
+        if (mSummary != null) {
+            System.out.println("xxxxx-nummmm");
+        }
+
+        mSummaryText.setVisibility(state != STATE_SELECTED &&null!=mSummary&&!mSummary.equals("") ? Component.VISIBLE : Component.HIDE);
+        System.out.println("xxxxx-zm--->" + state + "====" + STATE_SELECTED);
+
+        mCustomView.setVisibility(state == STATE_SELECTED ? Component.VISIBLE : Component.HIDE);
+
+        mState = state;
+
+        updateMarginBottom();
+        updateSummaryView();
+    }
+
+    /**
+     * Get the state of this stepper item
+     *
+     * @return The state of this stepper item
+     */
+    public int getState() {
+        return mState;
+    }
+
+    /**
+     * Set title for this step
+     *
+     * @param title The title should be set
+     */
+    public void setTitle(String title) {
+        mTitle = title;
+        mTitleText.setText(title);
+    }
+
+
+    /**
+     * Get the title of this step
+     *
+     * @return The title of this step
+     */
+    public String getTitle() {
+        return mTitle;
+    }
+
+    /**
+     * Set should show summary always.
+     *
+     * @param alwaysShowSummary new value
+     */
+    public void setAlwaysShowSummary(boolean alwaysShowSummary) {
+        mAlwaysShowSummary = alwaysShowSummary;
+        updateSummaryView();
+    }
+
+    /**
+     * Should show summary always
+     *
+     * @return If should show summary always
+     */
+    public boolean isAlwaysShowSummary() {
+        return mAlwaysShowSummary;
+    }
+
+    /**
+     * Set error text for this step. If you want to remove error text, the param should be null.
+     *
+     * @param errorText The error text should be set or zero for removing error text
+     */
+    public void setErrorText(String errorText) {
+        System.out.println("zzzzm--ssd>"+mSummary+"zzz");
+        System.out.println("zzzzwwm-->"+"getComponent16"+"---"+errorText);
+
+        mErrorText = errorText;
+        if(null==mSummaryText){
+            System.out.println("zzzzm-->"+mSummary+"zzz");
+        }
+        if(mErrorText != null){
+            System.out.println("zzzzm-->"+mSummary+"!null");
+        }else{
+            System.out.println("zzzzm-->"+mSummary+"==null");
+        }
+        mSummaryText.setText(mErrorText != null ? mErrorText : null!=mSummary?mSummary:"");
+        System.out.println("zzzzwwm-->"+"getComponent13"+"---"+111);
+
+        setState(mState);
+    }
+
+    /**
+     * Set error text for this step. If you want to remove error text, the param should be zero value.
+     *
+     * @param errorTextRes The title resource should be set
+     */
+//	public void setErrorText(@StringRes int errorTextRes) {
+//		if (errorTextRes != 0) {
+//			setErrorText(getResources().getString(errorTextRes));
+//		} else {
+//			setErrorText(null);
+//		}
+//	}
+
+    /**
+     * Get the title of this step
+     *
+     * @return The title of this step
+     */
+    public String getErrorText() {
+        return mErrorText;
+    }
+
+    /**
+     * Set summary for this step.
+     * If you set a null value, it will hide the summary view.
+     *
+     * @param summary The summary should be set or null
+     */
+    public void setSummary(String summary) {
+        mSummary = summary;
+        updateSummaryView();
+    }
+
+    /**
+     * Set summary for this step.
+     *
+     * @param summaryRes The summary resource should be set
+     */
+//	public void setSummary(@StringRes int summaryRes) {
+//		setSummary(getResources().getString(summaryRes));
+//	}
+
+    /**
+     * Get the summary of this step
+     *
+     * @return The summary of this step
+     */
+    public String getSummary() {
+        return mSummary;
+    }
+
+    /**
+     * Set finished summary for this step.
+     * If you set a null value, it will hide the summary view or show default summary.
+     *
+     * @param summary The summary should be set or null
+     */
+    public void setSummaryFinished(String summary) {
+        mSummaryFinished = summary;
+        updateSummaryView();
+    }
+
+    /**
+     * Set summary for this step.
+     *
+     * @param summaryRes The summary resource should be set
+     */
+//	public void setSummaryFinished(@StringRes int summaryRes) {
+//		setSummaryFinished(getResources().getString(summaryRes));
+//	}
+
+    /**
+     * Get the summary of this step
+     *
+     * @return The summary of this step
+     */
+    public String getSummaryFinished() {
+        return mSummaryFinished;
+    }
+
+    /**
+     * Update summary view
+     */
+    private void updateSummaryView() {
+        System.out.println("zzzzm-->"+"getComponent35");
+
+        mSummaryText.setText(
+                mErrorText != null ? mErrorText
+                        : (mSummaryFinished != null && mState == STATE_DONE) ? mSummaryFinished : mSummary
+        );
+        mSummaryText.setVisibility(
+                (mState != STATE_SELECTED || mAlwaysShowSummary) && !mSummaryText.getText().toString().equals("") ?
+                        Component.VISIBLE : Component.HIDE
+        );
+    }
+
+    /**
+     * Set index for this step
+     *
+     * @param index Index
+     */
+    public void setIndex(int index) {
+        mIndex = index;
+        if (null != mPointNumber) {
+            System.out.println("xxxxx---" + "null!=mPointNumber");
+        } else {
+            System.out.println("xxxxx---" + "00000000");
+
+        }
+        mPointNumber.setText(String.valueOf(index));
+    }
+
+    /**
+     * Get the index of this step
+     *
+     * @return The index of this step
+     */
+    public int getIndex() {
+        return mIndex;
+    }
+
+    /**
+     * Set if it is last step
+     *
+     * @param isLastStep If it is last step
+     */
+    public void setIsLastStep(boolean isLastStep) {
+        this.isLastStep = isLastStep;
+        mLineView.setVisibility(isLastStep ? Component.INVISIBLE : Component.VISIBLE);
+        updateMarginBottom();
+    }
+
+    /**
+     * Return if it is last step
+     *
+     * @return If it is last step
+     */
+    public boolean isLastStep() {
+        return isLastStep;
+    }
+
+    /**
+     * Set if animation should be enabled
+     *
+     * @param shouldAnimate If animation should be enabled
+     */
+    public void setAnimationEnabled(boolean shouldAnimate) {
+        mAnimationEnabled = shouldAnimate;
+        if (shouldAnimate) {
+//			mRightContainer.setTranslation(new Transition());
+        } else {
+//			mRightContainer.setTranslation(null);
+        }
+    }
+
+    /**
+     * Get if animation is enabled
+     *
+     * @return If animation is enabled
+     */
+    public boolean isAnimationEnabled() {
+        return mAnimationEnabled;
+    }
+
+    /**
+     * Set done icon drawable
+     *
+     * @param drawable Done icon drawable
+     */
+    public void setDoneIcon(Element drawable) {
+        mDoneIcon = drawable;
+        mDoneIconView.setImageElement(drawable);
+    }
+
+    /**
+     * Set done icon drawable resource
+     *
+     * @param drawableRes Done icon drawable resource
+     */
+	public void setDoneIconResource(int drawableRes) {
+        ShapeElement background = new ShapeElement(mContext, drawableRes);
+
+        setDoneIcon(background);
+	}
+
+    /**
+     * Get done icon drawable
+     *
+     * @return Done icon drawable
+     */
+    public Element getDoneIcon() {
+        return mDoneIcon;
+    }
+
+    /**
+     * Set animation duration
+     *
+     * @param duration Animation Duration
+     */
+    public void setAnimationDuration(int duration) {
+        mAnimationDuration = duration;
+    }
+
+    /**
+     * Get animation duration
+     *
+     * @return Animation Duration
+     */
+    public int getAnimationDuration() {
+        return mAnimationDuration;
+    }
+
+    /**
+     * Bind two stepper items for automatically setting state with nextStep() or prevStep()
+     *
+     * @param prevItem The previous item
+     * @param nextItem The next item
+     */
+    public void bindSteppers(VerticalStepperItemView prevItem, VerticalStepperItemView nextItem) {
+        if (prevItem != null) {
+            mPrevItemView = prevItem;
+            if (mPrevItemView.mNextItemView != this) {
+                mPrevItemView.bindSteppers(null, this);
+            }
+        }
+        if (nextItem != null) {
+            mNextItemView = nextItem;
+            if (mNextItemView.mPrevItemView != this) {
+                mNextItemView.bindSteppers(this, null);
+            }
+        }
+    }
+
+    /**
+     * Bind stepper items for automatically setting state with nextStep() or prevStep()
+     *
+     * @param items Stepper items
+     */
+    public static void bindSteppers(VerticalStepperItemView... items) {
+        System.out.println("xxxxx--2->" + items.length);
+
+        for (int i = 0; i < items.length - 1; i++) {
+            if (i != 0) {
+                System.out.println("xxxxx--0->" + i + "----" + items.length);
+
+                items[i].bindSteppers(items[i - 1], null);
+            }
+            System.out.println("xxxxx--else->" + i + "----" + items.length);
+            if (items[0] != null) {
+                System.out.println("xxxxx--!=null->" + i + "----" + items.length);
+
+            }
+            items[i].bindSteppers(null, items[i + 1]);
+        }
+    }
+
+    /**
+     * Return if stepper can go previous
+     *
+     * @return If stepper can go previous
+     */
+    public boolean canPrevStep() {
+        return mPrevItemView != null;
+    }
+
+    /**
+     * Go previous step
+     *
+     * @return If success
+     */
+    public boolean prevStep() {
+        if (canPrevStep()) {
+            setState(STATE_NORMAL);
+            if (mPrevItemView != null) {
+                mPrevItemView.setState(STATE_SELECTED);
+            }
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Return if stepper can go next
+     *
+     * @return If stepper can go next
+     */
+    public boolean canNextStep() {
+        return mNextItemView != null;
+    }
+
+    /**
+     * Go next step
+     *
+     * @return If success
+     */
+    public boolean nextStep() {
+        System.out.println("xxxxxnextstep");
+        if (canNextStep()) {
+            System.out.println("xxxxxnextstep1");
+
+            setState(STATE_DONE);
+            if (mNextItemView != null) {
+                System.out.println("xxxxxnextstep2");
+
+                mNextItemView.setState(STATE_SELECTED);
+            }
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Set normal point color
+     *
+     * @param color Normal Point Color
+     */
+    public void setNormalColor(Color color) {
+        mNormalColor = color;
+        if (mState == STATE_NORMAL) {
+//            ShapeElement shapeElement = new ShapeElement();
+//            shapeElement.setRgbColor(ViewUtils.getRgbColor(color));
+//            mPointBackground.setBackground(shapeElement);
+            ShapeElement background = new ShapeElement(mContext, ResourceTable.Graphic_gray_shap);
+            mPointBackground.setBackground(background);
+        }
+    }
+
+    /**
+     * Set normal point color
+     *
+     * @param colorRes Normal Point Color resource
+     */
+//	public void setNormalColorResource(@ColorRes int colorRes) {
+//		setNormalColor(getResources().getColor(colorRes));
+//	}
+
+    /**
+     * Get normal point color
+     *
+     * @return Normal Point Color
+     */
+    public Color getNormalColor() {
+        return mNormalColor;
+    }
+
+    /**
+     * Set activated point color
+     *
+     * @param color Activated Point Color
+     */
+    public void setActivatedColor(Color color,int sharpe) {
+        mActivatedColor = color;
+        if (mState != STATE_NORMAL) {
+//            ShapeElement shapeElement = new ShapeElement();
+//            shapeElement.setRgbColor(ViewUtils.getRgbColor(color));
+//            mPointBackground.setBackground(shapeElement);
+            ShapeElement background = new ShapeElement(mContext, sharpe);
+            mPointBackground.setBackground(background);
+        }
+    }
+
+    /**
+     * Set activated point color
+     *
+     * @param colorRes Activated Point Color resource
+     */
+//	public void setActivatedColorResource(@ColorRes int colorRes) {
+//		setActivatedColor(getResources().getColor(colorRes));
+//	}
+
+    /**
+     * Get line color
+     *
+     * @return Line Color
+     */
+    public Color getLineColor() {
+        return mLineColor;
+    }
+
+    /**
+     * Set line color
+     *
+     * @param color Line Color
+     */
+    public void setLineColor(Color color) {
+        ShapeElement shapeElement = new ShapeElement();
+        shapeElement.setRgbColor(ViewUtils.getRgbColor(color));
+        mLineColor = color;
+        mLineView.setBackground(shapeElement);
+    }
+
+    /**
+     * Set line color
+     *
+     * @param colorRes Line Color resource
+     */
+//	public void setLineColorResource(@ColorRes int colorRes) {
+//		setLineColor(getResources().getColor(colorRes));
+//	}
+
+    /**
+     * Get error highlight color
+     *
+     * @return Error Highlight Color
+     */
+    public Color getErrorColor() {
+        return mErrorColor;
+    }
+
+    /**
+     * Set error highlight color
+     *
+     * @param color Error Highlight Color
+     */
+    public void setErrorColor(Color color) {
+        if (isPreLollipop()) {
+//			mErrorIconView.getDrawable().setColorFilter(color, PorterDuff.Mode.DST_IN);
+        } else {
+//			mErrorIconView.getDrawable().setTint(color);
+        }
+        if (mErrorText != null && color != mErrorColor) {
+            if (mTitleColorAnimator != null && mTitleColorAnimator.isRunning()) mTitleColorAnimator.cancel();
+            if (mSummaryColorAnimator != null && mSummaryColorAnimator.isRunning()) mSummaryColorAnimator.cancel();
+            mTitleText.setTextColor(color);
+            mSummaryText.setTextColor(color);
+        }
+        mErrorColor = color;
+    }
+
+    /**
+     * Set error highlight color
+     *
+     * @param colorRes Error Highlight Color resource
+     */
+//	public void setErrorColorResource(Color colorRes) {
+//		setErrorColor(getResources().getColor(colorRes));
+//	}
+
+    /**
+     * Get activated point color
+     *
+     * @return Activated Point Color
+     */
+    public Color getActivatedColor() {
+        return mActivatedColor;
+    }
+
+//	@IntDef({STATE_NORMAL, STATE_SELECTED, STATE_DONE})
+//	@Retention(RetentionPolicy.SOURCE)
+//	public @interface State {}
+//
+//	// Save/Restore View Instance State
+//	@Override
+//	public Parcelable onSaveInstanceState() {
+//		ItemViewState state = new ItemViewState(super.onSaveInstanceState());
+//		state.title = mTitle;
+//		state.summary = mSummary;
+//		state.summaryFinished = mSummaryFinished;
+//		state.index = mIndex;
+//		state.isLastStep = isLastStep;
+//		state.state = mState;
+//		state.errorText = mErrorText;
+//		return state;
+//	}
+//
+//	@Override
+//	public void onRestoreInstanceState(Parcelable state) {
+//		if (state instanceof ItemViewState) {
+//			ItemViewState viewState = (ItemViewState) state;
+//			super.onRestoreInstanceState(viewState.getSuperState());
+//			setTitle(viewState.title);
+//			setSummary(viewState.summary);
+//			setSummaryFinished(viewState.summaryFinished);
+//			setIndex(viewState.index);
+//			setIsLastStep(viewState.isLastStep);
+//			setState(viewState.state);
+//			setErrorText(viewState.errorText);
+//			return;
+//		}
+//		super.onRestoreInstanceState(BaseSavedState.EMPTY_STATE);
+//	}
+
+//	protected static class ItemViewState extends BaseSavedState {
+//
+//		CharSequence title, summary, summaryFinished;
+//		int index = 1;
+//		boolean isLastStep = false;
+//		int state = STATE_NORMAL;
+//		CharSequence errorText;
+//
+//		ItemViewState(Parcelable superState) {
+//			super(superState);
+//		}
+//
+//		private ItemViewState(Parcel in) {
+//		    super(in);
+//		    title = in.readString();
+//		    summary = in.readString();
+//		    summaryFinished = in.readString();
+//		    index = in.readInt();
+//		    isLastStep = in.readByte() != 0;
+//		    state = in.readInt();
+//		    errorText = in.readString();
+//        }
+//
+//        @Override
+//        public void writeToParcel(Parcel out, int flags) {
+//		    super.writeToParcel(out, flags);
+//		    out.writeString(title != null ? title.toString() : null);
+//            out.writeString(summary != null ? summary.toString() : null);
+//            out.writeString(summaryFinished != null ? summaryFinished.toString() : null);
+//            out.writeInt(index);
+//            out.writeByte(isLastStep ? (byte) 1 : (byte) 0);
+//            out.writeInt(state);
+//            out.writeString(errorText != null ? errorText.toString() : null);
+//        }
+//
+//        public static final Parcelable.Creator<ItemViewState> CREATOR =
+//                new Parcelable.Creator<ItemViewState>() {
+//                    @Override
+//                    public ItemViewState createFromParcel(Parcel source) {
+//                        return new ItemViewState(source);
+//                    }
+//
+//                    @Override
+//                    public ItemViewState[] newArray(int size) {
+//                        return new ItemViewState[size];
+//                    }
+//		        };
+//
+//	}
+
+    private static boolean isPreLollipop() {
+        return true;
+    }
+
+}
\ No newline at end of file
diff --git a/library/src/main/java/moe/feng/common/stepperview/VerticalStepperView.java b/library/src/main/java/moe/feng/common/stepperview/VerticalStepperView.java
new file mode 100644
index 0000000000000000000000000000000000000000..40618dbec9e09b355719f99f9838a7c9c4b7219e
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/VerticalStepperView.java
@@ -0,0 +1,534 @@
+package moe.feng.common.stepperview;
+
+
+
+import moe.feng.common.stepperview.internal.VerticalSpaceItemDecoration;
+import ohos.agp.components.*;
+import ohos.agp.components.element.Element;
+import ohos.agp.utils.Color;
+import ohos.app.Context;
+import ohos.media.image.PixelMap;
+
+import java.util.Collections;
+
+
+public class VerticalStepperView extends StackLayout implements IStepperView {
+
+	/**
+	 * Internal view / adapter
+	 */
+	private ListContainer mListView;
+	private ItemAdapter mAdapter;
+
+	/**
+	 * View State
+	 */
+	private IStepperAdapter mStepperAdapter;
+	private int mCurrentStep = 0;
+	private String[] mErrorTexts = null;
+
+	/**
+	 * View attributes
+	 */
+	private boolean mAnimationEnabled;
+	private int mAnimationDuration;
+	private Color mNormalColor, mActivatedColor, mLineColor, mErrorColor;
+	private Element mDoneIcon;
+	private boolean mAlwaysShowSummary = false;
+	public VerticalStepperView(Context context) {
+		this(context, null);
+	}
+
+	public VerticalStepperView(Context context, AttrSet attrs) {
+		this(context, attrs, "");
+	}
+
+	public VerticalStepperView(Context context, AttrSet attrs, String defStyleAttr) {
+		super(context, attrs, defStyleAttr);
+		System.out.println("zzzzm-->"+"prepare");
+		initColor();
+		prepareListView(context);
+		System.out.println("zzzzm-->"+"prepareListView");
+
+		if (attrs != null) {
+
+			mNormalColor = TypedAttrUtils.getColor(attrs, "step_normal_color", mNormalColor);
+			mActivatedColor = TypedAttrUtils.getColor(attrs, "step_activated_color", mActivatedColor);
+
+			mAnimationDuration = TypedAttrUtils.getInteger(attrs, "step_animation_duration", mAnimationDuration);
+			mAnimationEnabled = TypedAttrUtils.getBoolean(attrs, "step_enable_animation", true);
+			mLineColor = TypedAttrUtils.getColor(attrs, "VerticalStepperView_step_line_color", mLineColor);
+			mErrorColor = TypedAttrUtils.getColor(attrs, "step_error_highlight_color", mErrorColor);
+			mAlwaysShowSummary = TypedAttrUtils.getBoolean(attrs, "step_show_summary_always", mAlwaysShowSummary);
+            if(null!=TypedAttrUtils.getElement(attrs,"step_done_icon",null)){
+				mDoneIcon =TypedAttrUtils.getElement(attrs,"step_done_icon",null);
+			}
+		}
+
+		setAnimationEnabled(mAnimationEnabled);
+	}
+	private void initColor() {
+		mNormalColor = new Color(Color.getIntColor("#9E9E9E"));
+		mActivatedColor = new Color(Color.getIntColor("#007DFF"));
+		mLineColor = new Color(Color.getIntColor("#9E9E9E"));
+		mErrorColor = new Color(Color.getIntColor("#F44336"));
+	}
+	private void prepareListView(Context context) {
+		mListView = new ListContainer(context);
+		mAdapter = new ItemAdapter();
+
+		mListView.setClipEnabled(false);
+		mListView.setPadding(0, 24, 0, 0);
+//		mListView.addItemDecoration(new VerticalSpaceItemDecoration(
+//				getResources().getDimensionPixelSize(R.dimen.vertical_stepper_item_space_height)));
+		mListView.setLayoutManager(new DirectionalLayoutManager());
+		mListView.setItemProvider(mAdapter);
+		addComponent(mListView, new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT));
+	}
+
+	/**
+	 * Set up the stepper adapter
+	 *
+	 * @param stepperAdapter Stepper Adapter
+	 */
+	public void setStepperAdapter( IStepperAdapter stepperAdapter) {
+		mStepperAdapter = stepperAdapter;
+		System.out.println("zzzzm-->"+"setStepperAdapter---"+mStepperAdapter.size());
+		mListView.setItemProvider(null);
+		mAdapter = new ItemAdapter();
+		mListView.setItemProvider(mAdapter);
+
+		updateSteppers();
+	}
+
+	/**
+	 * Notify the stepper adapter changed
+	 */
+	public void updateSteppers() {
+		if (mErrorTexts == null || mErrorTexts.length != mStepperAdapter.size()) {
+			mErrorTexts = new String[mStepperAdapter.size()];
+		}
+		mAdapter.notifyDataChanged();
+	}
+
+    /**
+     * Set should show summary always.
+     *
+     * @param alwaysShowSummary new value
+     */
+    public void setAlwaysShowSummary(boolean alwaysShowSummary) {
+        mAlwaysShowSummary = alwaysShowSummary;
+        updateSteppers();
+    }
+
+    /**
+     * Should show summary always
+     *
+     * @return If should show summary always
+     */
+    @Override
+    public boolean isAlwaysShowSummary() {
+        return mAlwaysShowSummary;
+    }
+
+	/**
+	 * Set error text for item. If you want to remove error text, the errorText param should be null.
+	 *
+	 * @param index Index
+	 * @param errorText Error text or null
+	 */
+	public void setErrorText(int index, String errorText) {
+		System.out.println("zzzzwwm---"+index+"---"+errorText);
+		if (mErrorTexts == null) {
+			mErrorTexts = new String[mStepperAdapter.size()];
+		}
+		mErrorTexts[index] = errorText;
+		updateSteppers();
+	}
+
+	/**
+	 * Get error text of item
+	 *
+	 * @param index Index
+	 * @return Error text or null (means no error)
+	 */
+	public String getErrorText(int index) {
+		if (mErrorTexts != null) {
+			return mErrorTexts[index];
+		}
+		return null;
+	}
+
+	/**
+	 * Return the count of steps
+	 *
+	 * @return The count of steps
+	 */
+	public int getStepCount() {
+		return mStepperAdapter != null ? mStepperAdapter.size() : 0;
+	}
+
+	/**
+	 * Return if stepper can go next
+	 *
+	 * @return If stepper can go next
+	 */
+	public boolean canNext() {
+		return mStepperAdapter != null && mCurrentStep < mStepperAdapter.size() - 1;
+	}
+
+	/**
+	 * Return if stepper can go previous
+	 *
+	 * @return If stepper can go previous
+	 */
+	public boolean canPrev() {
+		return mStepperAdapter != null && mCurrentStep > 0;
+	}
+
+	/**
+	 * Go next step
+	 *
+	 * @return If success
+	 */
+	public boolean nextStep() {
+		if (canNext()) {
+			mStepperAdapter.onHide(mCurrentStep);
+			mCurrentStep++;
+			mStepperAdapter.onShow(mCurrentStep);
+			if (mAnimationEnabled) {
+				mAdapter.notifyDataSetItemRangeChanged(mCurrentStep - 1, 2);
+			} else {
+				mAdapter.notifyDataChanged();
+			}
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Go previous step
+	 *
+	 * @return If success
+	 */
+	public boolean prevStep() {
+		if (canPrev()) {
+			mStepperAdapter.onHide(mCurrentStep);
+			mCurrentStep--;
+			mStepperAdapter.onShow(mCurrentStep);
+			if (mAnimationEnabled) {
+				mAdapter.notifyDataSetItemRangeChanged(mCurrentStep, 2);
+			} else {
+				mAdapter.notifyDataChanged();
+			}
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Get Stepper Adapter
+	 *
+	 * @return Stepper Adapter
+	 */
+	@Override
+	public IStepperAdapter getStepperAdapter() {
+		return mStepperAdapter;
+	}
+
+	/**
+	 * Get the index of current step
+	 *
+	 * @return The index of current step
+	 */
+	@Override
+	public int getCurrentStep() {
+		return mCurrentStep;
+	}
+
+	/**
+	 * Set normal point color
+	 *
+	 * @param color Normal Point Color
+	 */
+	public void setNormalColor( Color color) {
+		mNormalColor = color;
+		mAdapter.notifyDataChanged();
+	}
+
+	/**
+	 * Set normal point color
+	 *
+	 * @param colorRes Normal Point Color resource
+	 */
+//	public void setNormalColorResource(@ColorRes int colorRes) {
+//		setNormalColor(getResources().getColor(colorRes));
+//	}
+
+	/**
+	 * Get normal point color
+	 *
+	 * @return Normal Point Color
+	 */
+	@Override
+	public Color getNormalColor() {
+		return mNormalColor;
+	}
+
+	/**
+	 * Set activated point color
+	 *
+	 * @param color Activated Point Color
+	 */
+	public void setActivatedColor(Color color) {
+		mActivatedColor = color;
+		mAdapter.notifyDataChanged();
+	}
+
+	/**
+	 * Set activated point color
+	 *
+	 * @param colorRes Activated Point Color resource
+	 */
+//	public void setActivatedColorResource(@ColorRes int colorRes) {
+//		setActivatedColor(getResources().getColor(colorRes));
+//	}
+
+	/**
+	 * Get activated point color
+	 *
+	 * @return Activated Point Color
+	 */
+	@Override
+	public Color getActivatedColor() {
+		return mActivatedColor;
+	}
+
+	/**
+	 * Set error highlight color
+	 *
+	 * @param color Error Highlight Color
+	 */
+	public void setErrorColor(Color color) {
+		mErrorColor = color;
+		mAdapter.notifyDataChanged();
+	}
+
+	/**
+	 * Set error highlight color
+	 *
+	 * @param colorRes Error Highlight Color resource
+	 */
+//	public void setErrorColorResource(@ColorRes int colorRes) {
+//		setErrorColor(getResources().getColor(colorRes));
+//	}
+
+	/**
+	 * Get error highlight color
+	 *
+	 * @return Error Highlight Color
+	 */
+	@Override
+	public Color getErrorColor() {
+		return mErrorColor;
+	}
+
+	/**
+	 * Set line color
+	 *
+	 * @param color Line Color
+	 */
+	public void setLineColor(Color color) {
+		mLineColor = color;
+		mAdapter.notifyDataChanged();
+	}
+
+	/**
+	 * Set Line color
+	 *
+	 * @param colorRes Line Color resource
+	 */
+//	public void setLineColorResource(@ColorRes int colorRes) {
+//		setLineColor(getResources().getColor(colorRes));
+//	}
+
+	/**
+	 * Get Line color
+	 *
+	 * @return Line Color
+	 */
+	@Override
+	public Color getLineColor() {
+		return mLineColor;
+	}
+
+	/**
+	 * Get animation duration
+	 *
+	 * @return Animation duration
+	 */
+	@Override
+	public int getAnimationDuration() {
+		return mAnimationDuration;
+	}
+
+	/**
+	 * Get done icon drawable
+	 *
+	 * @return Done Icon Drawable
+	 */
+	@Override
+	public Element getDoneIcon() {
+		return mDoneIcon;
+	}
+
+	/**
+	 * Set if animation should be enabled
+	 *
+	 * @param enabled If animation should be enabled
+	 */
+	public void setAnimationEnabled(boolean enabled) {
+		mAnimationEnabled = enabled;
+	}
+
+	/**
+	 * Return if animation is enabled
+	 *
+	 * @return If animation is enabled
+	 */
+	public boolean isAnimationEnabled() {
+		return mAnimationEnabled;
+	}
+
+	/**
+	 * Set the current step by index
+	 *
+	 * @param currentStep The index of current step
+	 */
+	public void setCurrentStep(int currentStep) {
+		int minIndex = Math.min(currentStep, mCurrentStep);
+		int count = Math.abs(mCurrentStep - currentStep) + 1;
+
+		mCurrentStep = currentStep;
+		if (mAnimationEnabled) {
+			mAdapter.notifyDataSetItemRangeChanged(minIndex, count);
+		} else {
+			mAdapter.notifyDataChanged();
+		}
+	}
+
+	/**
+	 * Internal RecyclerView Adapter to show item views
+	 */
+	class ItemAdapter extends BaseItemProvider {
+
+
+
+		@Override
+		public int getCount() {
+			//System.out.println("zzzzm-->"+"getStepCount--"+getStepCount());
+
+			return getStepCount();
+		}
+
+		@Override
+		public Object getItem(int i) {
+			return Collections.emptyList();
+		}
+
+		@Override
+		public long getItemId(int i) {
+			return 0;
+		}
+
+		@Override
+		public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
+			System.out.println("zzzzm-->"+"getComponent");
+
+			component =new VerticalStepperItemView(componentContainer.getContext());
+			ItemHolder holder=new ItemHolder((VerticalStepperItemView) component);
+			System.out.println("zzzzm-->"+"getComponent1");
+
+			holder.mItemView.setIndex(position + 1);
+			System.out.println("zzzzm-->"+"getComponent2");
+
+			holder.mItemView.setIsLastStep(position == getCount() - 1);
+			System.out.println("zzzzm-->"+"getComponent3");
+
+			holder.mItemView.setTitle(getStepperAdapter().getTitle(position));
+			System.out.println("zzzzm-->"+"getComponent4");
+
+			holder.mItemView.setSummary(getStepperAdapter().getSummary(position));
+			System.out.println("zzzzm-->"+"getComponent5");
+
+			holder.mItemView.setNormalColor(mNormalColor);
+			System.out.println("zzzzm-->"+"getComponent6");
+
+			holder.mItemView.setActivatedColor(mActivatedColor,ResourceTable.Graphic_blue_cir_background);
+			System.out.println("zzzzm-->"+"getComponent7");
+
+			holder.mItemView.setAnimationDuration(mAnimationDuration);
+			System.out.println("zzzzm-->"+"getComponent8");
+
+			holder.mItemView.setDoneIcon(mDoneIcon);
+			System.out.println("zzzzm-->"+"getComponent9");
+
+			holder.mItemView.setAnimationEnabled(mAnimationEnabled);
+			System.out.println("zzzzm-->"+"getComponent10");
+
+			holder.mItemView.setLineColor(mLineColor);
+			System.out.println("zzzzm-->"+"getComponent11");
+
+			holder.mItemView.setErrorColor(mErrorColor);
+			System.out.println("zzzzm-->"+"getComponent12");
+			System.out.println("zzzzm-->"+"getComponent12---"+position+"-----"+mErrorTexts[position]+"---"+mErrorTexts);
+			System.out.println("zzzzwwm-->"+"getComponent13"+"---"+mErrorTexts[position]);
+
+			holder.mItemView.setErrorText(mErrorTexts[position]);
+			System.out.println("zzzzm-->"+"getComponent13");
+
+			holder.mItemView.setAlwaysShowSummary(mAlwaysShowSummary);
+			System.out.println("zzzzm-->"+"getComponent14");
+
+			if (getCurrentStep() > position) {
+				System.out.println("zzzzm-->"+"getComponent15");
+
+				holder.mItemView.setState(VerticalStepperItemView.STATE_DONE);
+			} else if (getCurrentStep() < position) {
+				System.out.println("zzzzm-->"+"getComponent16");
+
+				holder.mItemView.setState(VerticalStepperItemView.STATE_NORMAL);
+			} else {
+				System.out.println("zzzzm-->"+"getComponent17");
+
+				holder.mItemView.setState(VerticalStepperItemView.STATE_SELECTED);
+			}
+			System.out.println("zzzzm-->"+"getComponent18");
+
+			holder.mItemView.removeCustomView();
+			Component customView = getStepperAdapter().onCreateCustomView(position, getContext(), holder.mItemView);
+			System.out.println("zzzzm-->"+"getComponent19");
+
+			if (customView != null) {
+				System.out.println("zzzzm-->"+"getComponent21");
+
+				holder.mItemView.addCustomViewComponet(customView);
+			}
+			return component;
+		}
+
+		class ItemHolder  {
+
+			VerticalStepperItemView mItemView;
+
+			ItemHolder(VerticalStepperItemView itemView) {
+				mItemView = itemView;
+                ComponentContainer.LayoutConfig layoutConfig=new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,ComponentContainer.LayoutConfig.MATCH_CONTENT);
+				mItemView.setLayoutConfig(layoutConfig);
+			}
+
+		}
+
+	}
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/ViewBasedStepperAdapter.java b/library/src/main/java/moe/feng/common/stepperview/ViewBasedStepperAdapter.java
new file mode 100644
index 0000000000000000000000000000000000000000..fe030282853541f7d87363770991f776019346cb
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/ViewBasedStepperAdapter.java
@@ -0,0 +1,37 @@
+package moe.feng.common.stepperview;
+
+
+import ohos.agp.components.Component;
+import ohos.app.Context;
+
+public abstract class ViewBasedStepperAdapter implements IStepperAdapter {
+
+	private Component mViews[];
+
+	public ViewBasedStepperAdapter() {
+
+	}
+
+	public ViewBasedStepperAdapter(Component[] views) {
+		mViews = views;
+	}
+
+	public void setViews(Component[] views) {
+		mViews = views;
+	}
+
+	public Component getView(int index) {
+		return mViews[index];
+	}
+
+	@Override
+	public int size() {
+		return mViews.length;
+	}
+
+	@Override
+	public Component onCreateCustomView(int index, Context context, VerticalStepperItemView parent) {
+		return mViews[index];
+	}
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/ViewUtils.java b/library/src/main/java/moe/feng/common/stepperview/ViewUtils.java
new file mode 100644
index 0000000000000000000000000000000000000000..c585eeb4ddf9c276e9aacca71e8f0afae6c75c4b
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/ViewUtils.java
@@ -0,0 +1,102 @@
+package moe.feng.common.stepperview;
+
+
+import ohos.agp.animation.Animator;
+import ohos.agp.animation.AnimatorValue;
+import ohos.agp.colors.RgbColor;
+import ohos.agp.components.Component;
+import ohos.agp.components.Text;
+import ohos.agp.components.element.ShapeElement;
+import ohos.agp.utils.Color;
+
+class ViewUtils {
+	/**
+	 * getRgbColor
+	 *
+	 * @param color color
+	 * @return RgbColor
+	 */
+	public static RgbColor getRgbColor(Color color) {
+		return RgbColor.fromArgbInt(color.getValue());
+	}
+
+	/**
+	 * getRgbColor
+	 *
+	 * @param color color
+	 * @return RgbColor
+	 */
+	public static RgbColor getRgbColor(int color) {
+		return RgbColor.fromArgbInt(color);
+	}
+	/**
+	 * Get color attribute from current theme
+	 *
+	 * @param
+	 * @param
+	 * @return Result
+	 */
+
+	public static AnimatorValue createArgbAnimator(Component view, String propertyName, Color startColor, Color endColor) {
+
+		AnimatorValue animation = new AnimatorValue();
+//		animation.setDuration(100);
+		animation.setStateChangedListener(new Animator.StateChangedListener() {
+			@Override
+			public void onStart(Animator animator) {
+			}
+
+			@Override
+			public void onStop(Animator animator) {
+
+			}
+
+			@Override
+			public void onCancel(Animator animator) {
+
+			}
+
+			@Override
+			public void onEnd(Animator animator) {
+			}
+
+			@Override
+			public void onPause(Animator animator) {
+
+			}
+
+			@Override
+			public void onResume(Animator animator) {
+
+			}
+		});
+		animation.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
+
+			@Override
+			public void onUpdate(AnimatorValue animatorValue, float interpolatedTime) {
+				ShapeElement shapeElement=new ShapeElement();
+                if(interpolatedTime<5){
+                	shapeElement.setRgbColor(ViewUtils.getRgbColor(startColor));
+					if(view instanceof Text){
+						Text text= (Text) view;
+						text.setTextColor(startColor);
+					}
+				}else{
+					if(view instanceof Text) {
+						Text text = (Text) view;
+						text.setTextColor(endColor);
+					}
+					shapeElement.setRgbColor(ViewUtils.getRgbColor(endColor));
+
+				}
+                if(view instanceof Text){
+				}else {
+					view.setBackground(shapeElement);
+				}
+			}
+		});
+//		animation.start();
+		return animation;
+	}
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/interfaces/UpdatePositionState.java b/library/src/main/java/moe/feng/common/stepperview/interfaces/UpdatePositionState.java
deleted file mode 100644
index d00bf05490132e7c59ff9fbbc92007fdc5e1d995..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/interfaces/UpdatePositionState.java
+++ /dev/null
@@ -1,10 +0,0 @@
-package moe.feng.common.stepperview.interfaces;
-
-import ohos.agp.components.Component;
-
-public interface UpdatePositionState {
-    void updateState(int p, boolean up);
-    void click();
-    void clickCommont(Component component);
-
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/internal/ClipOvalFrameLayout.java b/library/src/main/java/moe/feng/common/stepperview/internal/ClipOvalFrameLayout.java
new file mode 100644
index 0000000000000000000000000000000000000000..fc97f75be7402c97ea837dd6d2b5436dd303c3ce
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/internal/ClipOvalFrameLayout.java
@@ -0,0 +1,66 @@
+package moe.feng.common.stepperview.internal;
+
+
+import ohos.agp.components.AttrSet;
+import ohos.agp.components.StackLayout;
+import ohos.agp.render.Path;
+import ohos.app.Context;
+
+/**
+ * @hide
+ */
+public class ClipOvalFrameLayout extends StackLayout {
+
+//	private Path path = new Path();
+
+	public ClipOvalFrameLayout(Context context) {
+		super(context);
+//		init();
+	}
+
+	public ClipOvalFrameLayout(Context context, AttrSet attrs) {
+		super(context, attrs);
+//		init();
+	}
+
+	public ClipOvalFrameLayout(Context context, AttrSet attrs, String defStyleAttr) {
+		super(context, attrs, defStyleAttr);
+//		init();
+	}
+
+	private void init() {
+		if (!isPreLollipop()) {
+//			setClipToOutline(true);
+		}
+	}
+
+//	@Override
+//	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+//		super.onSizeChanged(w, h, oldw, oldh);
+//
+//		if (isPreLollipop()) {
+//			float halfWidth = w / 2f;
+//			float halfHeight = h / 2f;
+//			path.reset();
+//			path.addCircle(halfWidth, halfHeight, Math.min(halfWidth, halfHeight), Path.Direction.CW);
+//			path.close();
+//		}
+//	}
+
+//	@Override
+//	protected void dispatchDraw(Canvas canvas) {
+//		if (isPreLollipop()) {
+//			int save = canvas.save();
+//			canvas.clipPath(path);
+//			super.dispatchDraw(canvas);
+//			canvas.restoreToCount(save);
+//		} else {
+//			super.dispatchDraw(canvas);
+//		}
+//	}
+
+	private static boolean isPreLollipop() {
+		return true;
+	}
+
+}
diff --git a/library/src/main/java/moe/feng/common/stepperview/internal/VerticalSpaceItemDecoration.java b/library/src/main/java/moe/feng/common/stepperview/internal/VerticalSpaceItemDecoration.java
new file mode 100644
index 0000000000000000000000000000000000000000..9f49b7e4fab41b62188358bb71b6c3c942c85a7e
--- /dev/null
+++ b/library/src/main/java/moe/feng/common/stepperview/internal/VerticalSpaceItemDecoration.java
@@ -0,0 +1,23 @@
+package moe.feng.common.stepperview.internal;
+
+
+
+/**
+ * @hide
+ */
+public class VerticalSpaceItemDecoration {
+//		extends ItemDecoration {
+//
+//	private final int verticalSpaceHeight;
+//
+//	public VerticalSpaceItemDecoration(int verticalSpaceHeight) {
+//		this.verticalSpaceHeight = verticalSpaceHeight;
+//	}
+//
+//	@Override
+//	public void getItemOffsets(Rect outRect, @NonNull View view,
+//							   @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
+//		outRect.bottom = verticalSpaceHeight;
+//	}
+
+}
\ No newline at end of file
diff --git a/library/src/main/java/moe/feng/common/stepperview/util/DensityUtils.java b/library/src/main/java/moe/feng/common/stepperview/util/DensityUtils.java
deleted file mode 100644
index 5ab1df1d5488bb8a547bcb280990c04d9a364b21..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/util/DensityUtils.java
+++ /dev/null
@@ -1,71 +0,0 @@
-package moe.feng.common.stepperview.util;
-
-
-import ohos.agp.components.AttrHelper;
-import ohos.agp.text.Font;
-import ohos.agp.window.service.Display;
-import ohos.agp.window.service.DisplayManager;
-import ohos.app.Context;
-import okhttp3.OkHttpClient;
-
-import java.io.File;
-import java.util.Optional;
-
-import static ohos.agp.components.AttrHelper.getDensity;
-
-public class DensityUtils {
-    /**
-     * fp 转 Px
-     * @param context
-     * @param fp
-     * @return
-     */
-    public static int fpToPx(final Context context, final float fp) {
-
-        return AttrHelper.fp2px(fp, getDensity(context));
-    }
-  public static void test(){
-      OkHttpClient okHttpClient=new OkHttpClient();
-  }
-    /**
-     * px 转 Fp
-     * @param context
-     * @param px
-     * @return
-     */
-    public static int pxToFp(final Context context, final float px) {
-        return Math.round(px * getDensity(context));
-    }
-
-    /**
-     *  通过文件返回字体
-     * @param path
-     * @return
-     */
-    public static Font getFilefont(File path) {
-        Font.Builder font = new Font.Builder(path);
-        return font.build();
-    }
-
-    /**
-     * 通过name返回字体
-     * Font font = DensityUtils.getFilefont(new File("resources/graphic/robotoregular.ttf"));
-     *                 text.setFont(font);
-     * @param name
-     * @return
-     */
-    public static Font getStringfont(String name) {
-        Font.Builder font = new Font.Builder(name);
-        return font.build();
-    }
-
-    /**
-     * 获取当前设备属性
-     * @param context
-     * @return
-     */
-    public static Display getDeviceAttr(Context context) {
-        Optional<Display> optional = DisplayManager.getInstance().getDefaultDisplay(context);
-        return optional.get();
-    }
-}
\ No newline at end of file
diff --git a/library/src/main/java/moe/feng/common/stepperview/util/DrawableUtils.java b/library/src/main/java/moe/feng/common/stepperview/util/DrawableUtils.java
deleted file mode 100644
index 2173a65fc357769bb5b9cb049cb6a97e71307654..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/util/DrawableUtils.java
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
- * Copyright (C) 2016 Jared Rummler
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-package moe.feng.common.stepperview.util;
-
-
-import ohos.agp.components.Component;
-import ohos.agp.components.ComponentState;
-import ohos.agp.components.element.PixelMapElement;
-import ohos.agp.components.element.ShapeElement;
-import ohos.agp.components.element.StateElement;
-import ohos.agp.utils.Color;
-import ohos.app.Context;
-import ohos.global.resource.NotExistException;
-import ohos.global.resource.Resource;
-import ohos.hiviewdfx.HiLog;
-import ohos.hiviewdfx.HiLogLabel;
-import ohos.media.image.ImageSource;
-import ohos.media.image.PixelMap;
-import ohos.media.image.common.PixelFormat;
-import ohos.media.image.common.Rect;
-import ohos.media.image.common.Size;
-
-import java.io.IOException;
-import java.io.InputStream;
-import java.text.DecimalFormat;
-
-import static ohos.agp.components.ComponentState.COMPONENT_STATE_DISABLED;
-import static ohos.agp.components.ComponentState.COMPONENT_STATE_FOCUSED;
-
-public final class DrawableUtils {
-
-    /**
-     * Darkens a color by a given factor.
-     *
-     * @param color  the color to darken
-     * @param factor The factor to darken the color.
-     * @return darker version of specified color.
-     */
-    static int darker(int color, float factor) {
-        return Color.argb(Color.alpha(color), Math.max((int) (Integer.parseInt(red(color)) * factor), 0),
-                Math.max((int) (Integer.parseInt(green(color)) * factor), 0), Math.max((int) (Integer.parseInt(blue(color)) * factor), 0));
-    }
-
-    /**
-     * Lightens a color by a given factor.
-     *
-     * @param color  The color to lighten
-     * @param factor The factor to lighten the color. 0 will make the color unchanged. 1 will make the
-     *               color white.
-     * @return lighter version of the specified color.
-     */
-    static int lighter(int color, float factor) {
-        int red = (int) ((Integer.parseInt(red(color), 16) * (1 - factor) / 255 + factor) * 255);
-        int green = (int) ((Integer.parseInt(green(color), 16) / 255 + factor) * 255);
-        int blue = (int) ((Integer.parseInt(blue(color), 16) * (1 - factor) / 255 + factor) * 255);
-        return Color.argb(Color.alpha(color), red, green, blue);
-    }
-
-    static String red(int color) {
-        String toHexString = Integer.toHexString((color >> 16) & 0xFF);
-        if (toHexString.length() == 1) {
-            toHexString = "0" + toHexString;
-        }
-        return toHexString;
-    }
-
-    static String green(int color) {
-        String toHexString = Integer.toHexString((color >> 8) & 0xFF);
-        if (toHexString.length() == 1) {
-            toHexString = "0" + toHexString;
-        }
-        return toHexString;
-    }
-
-    static String blue(int color) {
-        String toHexString = Integer.toHexString(color & 0xFF);
-        if (toHexString.length() == 1) {
-            toHexString = "0" + toHexString;
-        }
-        return toHexString;
-    }
-
-    /**
-     * Check if layout direction is RTL
-     *
-     * @param context the current context
-     * @return {@code true} if the layout direction is right-to-left
-     */
-    static boolean isRtl(Context context) {
-        return context.getResourceManager().getConfiguration().isLayoutRTL;
-    }
-
-    /**
-     * Return a drawable object associated with a particular resource ID.
-     *
-     * <p>Starting in {@link }, the returned drawable will be styled for the
-     * specified Context's theme.</p>
-     *
-     * @param drawableId The desired resource identifier, as generated by the aapt tool.
-     *                   This integer encodes the package, type, and resource entry.
-     *                   The value 0 is an invalid identifier.
-     * @return Drawable An object that can be used to draw this resource.
-     */
-    public static PixelMapElement getPixelMapElement(Context context, int drawableId) {
-        PixelMap pixelMap = getPixelMap(context, drawableId);
-        if (pixelMap == null) {
-            return null;
-        }
-        return new PixelMapElement(pixelMap);
-    }
-
-    /**
-     * @param context
-     * @param drawableId
-     * @return
-     */
-
-    public static PixelMap getPixelMap(Context context, int drawableId) {
-
-        InputStream drawableInputStream = null;
-        try {
-            drawableInputStream = context.getResourceManager().getResource(drawableId);
-            ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
-            sourceOptions.formatHint = "image/png";
-
-            ImageSource imageSource = ImageSource.create(drawableInputStream, sourceOptions);
-            ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
-            decodingOptions.desiredSize = new Size(0, 0);
-            decodingOptions.desiredRegion = new Rect(0, 0, 0, 0);
-            decodingOptions.desiredPixelFormat = PixelFormat.RGB_565;
-            PixelMap pixelMap = imageSource.createPixelmap(decodingOptions);
-            return pixelMap;
-        } catch (IOException | NotExistException e) {
-            e.printStackTrace();
-        } finally {
-            try {
-                if (drawableInputStream != null) {
-                    drawableInputStream.close();
-                }
-            } catch (IOException e) {
-                e.printStackTrace();
-            }
-        }
-        return null;
-    }
-
-    static boolean isEmpty(CharSequence str) {
-        return str == null || str.length() == 0;
-    }
-
-
-
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/util/Log.java b/library/src/main/java/moe/feng/common/stepperview/util/Log.java
deleted file mode 100644
index 7d6aa1c764145b67180b5f29fc62fa47f4cac3f0..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/util/Log.java
+++ /dev/null
@@ -1,12 +0,0 @@
-package moe.feng.common.stepperview.util;
-
-import ohos.hiviewdfx.HiLog;
-import ohos.hiviewdfx.HiLogLabel;
-
-public class Log {
-
-    public static void i(String value){
-        HiLogLabel label = new HiLogLabel(HiLog.LOG_APP,0x1256,"===");
-        HiLog.info(label,"===="+value);
-    }
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/util/Utility.java b/library/src/main/java/moe/feng/common/stepperview/util/Utility.java
deleted file mode 100644
index 4f976e8bbf0c65cae6789bf00f9ea782fb27f69e..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/util/Utility.java
+++ /dev/null
@@ -1,43 +0,0 @@
-package moe.feng.common.stepperview.util;
-
-import ohos.app.Context;
-import ohos.global.resource.NotExistException;
-import ohos.media.image.ImageSource;
-import ohos.media.image.PixelMap;
-
-import java.io.IOException;
-import java.io.InputStream;
-import java.util.ArrayList;
-import java.util.List;
-
-public class Utility {
-    private static List<Integer> heightlist=new ArrayList();
-    public static void addListValue(int heigth){
-        if(heigth!=0&&heightlist.size()<3){
-            heightlist.add(heigth);
-        }
-    }
-    public static int getListValue(int p){
-        if(heightlist.size()>p){
-            return  heightlist.get(p);
-        }
-        return 0;
-    }
-    public static void updateListValue(int heigth){
-        if(heigth!=0&&heightlist.size()<3){
-            heightlist.add(heigth);
-        }
-    }
-    public static PixelMap getPixelMapFromRes(Context context, int res) {
-        try {
-            InputStream stream = context.getResourceManager().getResource(res);
-            ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
-            ImageSource imageSource = ImageSource.create(stream, sourceOptions);
-            ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
-            return imageSource.createPixelmap(decodingOptions);
-        } catch (IOException | NotExistException e) {
-            e.printStackTrace();
-        }
-        return null;
-    }
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/view/MaterialRippleLayout.java b/library/src/main/java/moe/feng/common/stepperview/view/MaterialRippleLayout.java
deleted file mode 100644
index a4f96d12ee46de6fde37b2f95570211536f1eb7f..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/view/MaterialRippleLayout.java
+++ /dev/null
@@ -1,634 +0,0 @@
-package moe.feng.common.stepperview.view;
-
-import moe.feng.common.stepperview.util.TypedAttrUtils;
-import ohos.accessibility.ability.GesturePathDefine;
-import ohos.accessibility.ability.GesturePathPositionDefine;
-import ohos.accessibility.ability.GestureResultListener;
-import ohos.accessibility.ability.GestureResultListenerInfo;
-import ohos.agp.animation.Animator;
-import ohos.agp.animation.AnimatorValue;
-import ohos.agp.colors.RgbColor;
-import ohos.agp.components.*;
-import ohos.agp.components.element.ShapeElement;
-import ohos.agp.components.element.StateElement;
-import ohos.agp.render.Canvas;
-import ohos.agp.render.Paint;
-import ohos.agp.utils.Color;
-import ohos.agp.utils.Rect;
-import ohos.agp.window.service.Display;
-import ohos.agp.window.service.DisplayManager;
-import ohos.app.Context;
-import ohos.eventhandler.EventHandler;
-import ohos.eventhandler.EventRunner;
-import ohos.hiviewdfx.HiLog;
-import ohos.hiviewdfx.HiLogLabel;
-import ohos.multimodalinput.event.MmiPoint;
-import ohos.multimodalinput.event.TouchEvent;
-
-public class MaterialRippleLayout extends StackLayout
-        implements Component.TouchEventListener,Component.DrawTask,Component.ClickedListener {
-    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MaterialRippleLayout");
-    private static final int DEFAULT_LONG_PRESS_TIMEOUT = 500;
-    private static final boolean IS_DEFAULT_DELAY_CLICK = true;
-    private static final float DEFAULT_ALPHA = 0.2f;
-    private static final int DEFAULT_DURATION = 350;
-    private static final float DEFAULT_DIAMETER_DP = 80;
-    private static final int HOVER_DURATION = 1500;
-    private static final int ADD_RADIUS_LENGTH = 20;
-    private static int rippleDuration = DEFAULT_DURATION;
-    private static final boolean IS_DEFAULT_RIPPLE_OVERLAY = false;
-    private static final Color DEFAULT_BACKGROUND = Color.TRANSPARENT;
-    private static final int DEFAULT_RIPPLE_COLOR = 0x80000000;
-    private static final int INTAGER2 = 2;
-    private static final int INTAGER_SIX = 6;
-    private static final int INTAGER3 = 3;
-    private static final int TIME = 200;
-
-    MmiPoint pointerPosition;
-    DelayRunAnimator delayRunAnimator = new DelayRunAnimator();
-    GestureResultListener gestureDetector1;
-    GesturePathDefine gesturePathDefine;
-    GesturePathPositionDefine gesturePathPositionDefine;
-    boolean isDone = false;
-
-    private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener = new AnimatorValue.ValueUpdateListener() {
-        @Override
-        public void onUpdate(AnimatorValue animatorV, float value) {
-            if (value <= 0) {
-                return;
-            }
-            float currentRadius = rippleDiameter + maxRadius * value;
-            if (currentRadius < rippleDiameter) {
-                setRadius(rippleDiameter);
-            } else {
-                setRadius(currentRadius);
-            }
-            invalidate();
-        }
-    };
-
-    private Component childView;
-    private Color rippleColor = Color.BLACK;
-    private float rippleAlpha = DEFAULT_ALPHA;
-    private boolean isRippleDelayClick;
-    private float rippleDiameter = DEFAULT_DIAMETER_DP;
-    private boolean isRippleOverlay;
-    private boolean isRippleInAdapter;
-    private ShapeElement mBackgroundUnable;
-    private ShapeElement mBackgroundPressed;
-
-    private int mScreenWidth;
-    private final Paint mPaint = new Paint();
-
-    private GestureResultListenerInfo gestureDetector;
-
-    private EventHandler handler;
-
-    private AnimatorValue animatorValue;
-
-    private ListContainer parentAdapter;
-    private PerformClickEvent pendingClickEvent;
-
-    private Component bgComponent;
-    private final Rect bounds = new Rect();
-    private boolean isLongClick = false;
-    private float maxRadius;
-    private float mRadiusRipple;
-    private boolean isFingerUp = true;
-    private float positionX;
-    private float positionY;
-    private OnClickButton mclickButton;
-
-    public MaterialRippleLayout(Context context) {
-        super(context);
-        init(context, null, "");
-    }
-
-    public MaterialRippleLayout(Context context, AttrSet attrSet) {
-        super(context, attrSet);
-        init(context, attrSet, "");
-    }
-
-    public MaterialRippleLayout(Context context, AttrSet attrSet, String styleName) {
-        super(context, attrSet, styleName);
-        init(context, attrSet, styleName);
-    }
-
-    public float getX() {
-        return positionX;
-    }
-
-    public void setX(float ppx) {
-        this.positionX = ppx;
-    }
-
-    public float getY() {
-        return positionY;
-    }
-
-    public void setY(float ppy) {
-        this.positionY = ppy;
-    }
-
-    public float getRadius() {
-        return mRadiusRipple;
-    }
-
-    public void setRadius(float radius) {
-        this.mRadiusRipple = radius;
-    }
-
-    public RippleBuilder on(Button view) {
-        return new RippleBuilder(view);
-    }
-
-    private void init(Context context, AttrSet attrs, String defStyleAttr) {
-        Display display = DisplayManager.getInstance().getDefaultDisplay(getContext()).get();
-        mScreenWidth = display.getAttributes().width;
-
-        handler = new EventHandler(EventRunner.getMainEventRunner());
-
-        initAttrs(context, attrs, defStyleAttr);
-        setupPaint();
-
-        addDrawTask(this::onDraw);
-        setTouchEventListener(this::onTouchEvent);
-    }
-
-    private void initAttrs(Context context, AttrSet attrSet, String defStyleAttr) {
-        setStatePress();
-        if (attrSet == null) {
-            return;
-        }
-
-        rippleColor = TypedAttrUtils.getColor(attrSet, "mrl_rippleColor", new Color(DEFAULT_RIPPLE_COLOR));
-        rippleAlpha = TypedAttrUtils.getFloat(attrSet, "mrl_rippleAlpha", DEFAULT_ALPHA);
-        rippleDuration = TypedAttrUtils.getInteger(attrSet, "mrl_rippleDuration", DEFAULT_DURATION);
-        rippleDiameter = TypedAttrUtils.getFloat(attrSet, "mrl_rippleDiameterDp", DEFAULT_DIAMETER_DP);
-
-        isRippleOverlay = TypedAttrUtils.getBoolean(attrSet, "mrl_rippleOverlay", IS_DEFAULT_RIPPLE_OVERLAY);
-
-        HiLog.info(LABEL, "initAttrs rippleDiameter = " + rippleDiameter);
-    }
-
-    /**
-     * 初始化画笔
-     */
-    private void setupPaint() {
-        mPaint.setAntiAlias(true);
-        mPaint.setStyle(Paint.Style.FILL_STYLE);
-        mPaint.setColor(rippleColor);
-        mPaint.setAlpha(rippleAlpha);
-    }
-
-    @Override
-    public void onDraw(Component component, Canvas canvas) {
-        HiLog.info(LABEL, "initAttrs onDraw getWidth = " + getWidth() + "   getRadius() : " + getRadius());
-        canvas.drawCircle(getX(), getY(), getRadius(), mPaint);
-    }
-
-    private void setStatePress() {
-        mBackgroundUnable = new ShapeElement();
-        mBackgroundUnable.setRgbColor(RgbColor.fromArgbInt(Color.TRANSPARENT.getValue()));
-        mBackgroundPressed = new ShapeElement();
-        mBackgroundPressed.setRgbColor(RgbColor.fromArgbInt(Color.BLUE.getValue()));
-        int[][] states = new int[INTAGER_SIX][];
-        states[0] = new int[]{ComponentState.COMPONENT_STATE_DISABLED};
-        states[1] = new int[]{ComponentState.COMPONENT_STATE_PRESSED};
-        states[INTAGER2] = new int[]{ComponentState.COMPONENT_STATE_FOCUSED};
-        states[INTAGER3] = new int[]{ComponentState.COMPONENT_STATE_EMPTY};
-        StateElement stateBackground = new StateElement();
-        stateBackground.addState(states[0], mBackgroundUnable);
-        stateBackground.addState(states[1], mBackgroundPressed);
-        stateBackground.addState(states[INTAGER2], mBackgroundPressed);
-        stateBackground.addState(states[INTAGER3], mBackgroundUnable);
-    }
-
-    /**
-     * 点击事件的动画
-     */
-    private void initAnimator() {
-        animatorValue = new AnimatorValue();
-        animatorValue.setCurveType(Animator.CurveType.ACCELERATE_DECELERATE);
-        animatorValue.setDuration(rippleDuration);
-        animatorValue.setValueUpdateListener(mAnimatorUpdateListener);
-        animatorValue.setStateChangedListener(new Animator.StateChangedListener() {
-            @Override
-            public void onStart(Animator animator) {
-            }
-
-            @Override
-            public void onStop(Animator animator) {
-            }
-
-            @Override
-            public void onCancel(Animator animator) {
-            }
-
-            @Override
-            public void onEnd(Animator animator) {
-                setRadius(0);
-                fingerUp();
-
-                if (mclickButton != null) {
-                    mclickButton.onClick();
-                }
-            }
-
-            @Override
-            public void onPause(Animator animator) {
-            }
-
-            @Override
-            public void onResume(Animator animator) {
-            }
-        });
-        animatorValue.start();
-    }
-
-    public void setOnClick(OnClickButton clickButton) {
-        mclickButton = clickButton;
-    }
-
-    public interface OnClickButton {
-        void onClick();
-    }
-
-    /**
-     * 长按事件动画
-     */
-    private void initLongClickAnimator() {
-        animatorValue = new AnimatorValue();
-        animatorValue.setCurveType(Animator.CurveType.ACCELERATE_DECELERATE);
-        animatorValue.setDuration(rippleDuration);
-        animatorValue.setValueUpdateListener(mAnimatorUpdateListener);
-        animatorValue.setStateChangedListener(new Animator.StateChangedListener() {
-            @Override
-            public void onStart(Animator animator) {
-            }
-
-            @Override
-            public void onStop(Animator animator) {
-            }
-
-            @Override
-            public void onCancel(Animator animator) {
-            }
-
-            @Override
-            public void onEnd(Animator animator) {
-                if (isRippleOverlay && isFingerUp) {
-                    setRadius(0);
-                    invalidate();
-                }
-                if (!isRippleOverlay) {
-                    setRadius(0);
-                    invalidate();
-                }
-            }
-
-            @Override
-            public void onPause(Animator animator) {
-            }
-
-            @Override
-            public void onResume(Animator animator) {
-            }
-        });
-        animatorValue.start();
-    }
-
-    @SuppressWarnings("unchecked")
-    public <T extends Component> T getChildView() {
-        return (T) childView;
-    }
-
-    @Override
-    public void addComponent(Component childComponent) {
-        if (getChildCount() > 0) {
-            throw new IllegalStateException("");
-        }
-        childView = childComponent;
-        super.addComponent(childComponent);
-    }
-
-    @Override
-    public void setClickedListener(ClickedListener listener) {
-        if (childView == null) {
-            throw new IllegalStateException("");
-        }
-        childView.setClickedListener(listener);
-    }
-
-    @Override
-    public void setLongClickedListener(LongClickedListener listener) {
-        if (childView == null) {
-            throw new IllegalStateException("");
-        }
-        childView.setLongClickedListener(listener);
-    }
-
-    @Override
-    public void onClick(Component component) {
-        isLongClick = false;
-        rippleDuration = DEFAULT_DURATION;
-    }
-
-    @Override
-    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
-        touchEvent.getRadius(0);
-        pointerPosition = touchEvent.getPointerPosition(0);
-        float ppx = pointerPosition.getX();
-        float ppy = pointerPosition.getY();
-        int[] parentLocationOnScreen = getLocationOnScreen();
-        int xx = (int) (ppx - parentLocationOnScreen[0]);
-        int yy = (int) (ppy - parentLocationOnScreen[1]);
-
-        setX(ppx - parentLocationOnScreen[0]);
-        setY(component.getHeight() / INTAGER2);
-        switch (touchEvent.getAction()) {
-            case TouchEvent.PRIMARY_POINT_DOWN:
-                isFingerUp = false;
-                rippleDuration = DEFAULT_DURATION;
-                handler.postTask(delayRunAnimator, TIME);
-                setRippleDuration(rippleDuration);
-
-                if (Math.abs(ppx - parentLocationOnScreen[0])
-                        > Math.abs(ppx - (parentLocationOnScreen[0] + getWidth()))) {
-                    maxRadius = Math.abs(ppx - parentLocationOnScreen[0]) + ADD_RADIUS_LENGTH;
-                } else {
-                    maxRadius = Math.abs(ppx - (parentLocationOnScreen[0] + getWidth())) + ADD_RADIUS_LENGTH;
-                }
-                mRadiusRipple = maxRadius;
-                fingerPress();
-                resetConfig();
-                return true;
-            case TouchEvent.POINT_MOVE:
-                break;
-            case TouchEvent.PRIMARY_POINT_UP:
-                isFingerUp = true;
-                if (!isLongClick) {
-                    handler.removeTask(delayRunAnimator);
-                    if (rippleDuration <= 0) {
-                        rippleDuration = DEFAULT_DURATION;
-                    }
-                    setRippleDuration(rippleDuration);
-                    initAnimator();
-                }
-                if (isLongClick) {
-                    fingerUp();
-                }
-                break;
-            default:
-                break;
-        }
-        return false;
-    }
-
-    private class DelayRunAnimator implements Runnable {
-        @Override
-        public void run() {
-            isLongClick = true;
-            rippleDuration = HOVER_DURATION;
-            initLongClickAnimator();
-        }
-    }
-
-    /**
-     * 点击操作
-     */
-    private void performalViewClick() {
-        if (getComponentParent() instanceof ListContainer) {
-            if (!childView.callOnClick()) {
-                clickAdapterView((ListContainer) getComponentParent());
-            }
-        } else if (isRippleInAdapter) {
-            clickAdapterView(findParentAdapterView());
-        } else {
-            if (childView != null) {
-                childView.callOnClick();
-            }
-        }
-    }
-
-    private void clickAdapterView(ListContainer parent) {
-        final int position = parent.getIndexForComponent(MaterialRippleLayout.this);
-        final long itemId = parent.getItemProvider() != null
-                ? parent.getItemProvider().getItemId(position)
-                : 0;
-        if (position != ListContainer.INVALID_INDEX) {
-            parent.executeItemClick(MaterialRippleLayout.this, position, itemId);
-        }
-    }
-
-    /*
-     * Helper
-     */
-    private class PerformClickEvent implements Runnable {
-        @Override
-        public void run() {
-            if (getComponentParent() instanceof ListContainer) {
-                if (!childView.callOnClick()) {
-                    clickAdapterView((ListContainer) getComponentParent());
-                }
-            } else if (isRippleInAdapter) {
-                clickAdapterView(findParentAdapterView());
-            } else {
-                if (childView != null) {
-                    childView.callOnClick();
-                }
-                callOnClick();
-            }
-        }
-
-        private void clickAdapterView(ListContainer parent) {
-            final int position = parent.getIndexForComponent(MaterialRippleLayout.this);
-            final long itemId = parent.getItemProvider() != null
-                    ? parent.getItemProvider().getItemId(position)
-                    : 0;
-            if (position != ListContainer.INVALID_INDEX) {
-                parent.executeItemClick(MaterialRippleLayout.this, position, itemId);
-            }
-        }
-    }
-
-    private ListContainer findParentAdapterView() {
-        if (parentAdapter != null) {
-            return parentAdapter;
-        }
-        ComponentParent current = getComponentParent();
-        while (true) {
-            if (current instanceof ListContainer) {
-                parentAdapter = (ListContainer) current;
-                return parentAdapter;
-            } else {
-                try {
-                    current = current.getComponentParent();
-                } catch (NullPointerException npe) {
-                    throw new RuntimeException("Could not find aa parent AdapterView");
-                }
-            }
-        }
-    }
-
-    private void resetConfig() {
-        setRadius(getRadius());
-        isDone = false;
-    }
-
-    /**
-     * 按下
-     */
-    private void fingerPress() {
-    }
-
-    /**
-     * 抬起
-     */
-    private void fingerUp() {
-        if (isRippleOverlay && isFingerUp) {
-            setRadius(0);
-            invalidate();
-        }
-        isLongClick = false;
-    }
-
-    /*
-     * Accessor
-     */
-    public void setRippleColor(int rippleColor) {
-        this.rippleColor = new Color(rippleColor);
-        mPaint.setColor(new Color(rippleColor));
-        mPaint.setAlpha(rippleAlpha);
-        invalidate();
-    }
-
-    /**
-     * 设置透明度
-     *
-     * @param alpha
-     */
-    public void setDefaultRippleAlpha(float alpha) {
-        this.rippleAlpha = alpha;
-        mPaint.setAlpha(rippleAlpha);
-        invalidate();
-    }
-
-    public void isRippleDelayClick(boolean isClick) {
-        this.isRippleDelayClick = isClick;
-    }
-
-    public void setRippleDiameter(int rippleDiameter) {
-        this.rippleDiameter = rippleDiameter;
-    }
-
-    public void setRippleDuration(int rippleDuration) {
-        MaterialRippleLayout.rippleDuration = rippleDuration;
-    }
-
-    public void isRippleOverlay(boolean isOverlay) {
-        this.isRippleOverlay = isOverlay;
-    }
-
-    public void setRippleBackground(RgbColor color) {
-        ShapeElement shapeElement = new ShapeElement();
-        shapeElement.setRgbColor(color);
-        setBackground(shapeElement);
-    }
-
-    /*
-     * Builder
-     */
-    public static class RippleBuilder {
-        private static final int RED = 255;
-        private static final int GREEN = 255;
-        private static final int BLUE = 255;
-        private final Context context;
-        private final Component child;
-
-        private int rippleColor = Color.rgb(0, 0, 0);
-        private boolean isRippleOverlay = IS_DEFAULT_RIPPLE_OVERLAY;
-        private float rippleDiameter = DEFAULT_DIAMETER_DP;
-        private int rippleDuration = DEFAULT_DURATION;
-        private float rippleAlpha = DEFAULT_ALPHA;
-        private boolean isRippleDelayClick = IS_DEFAULT_DELAY_CLICK;
-        private int rippleBackground = Color.rgb(RED, GREEN, BLUE);
-
-        public RippleBuilder(Button child) {
-            this.child = child;
-            this.context = child.getContext();
-        }
-
-        public RippleBuilder rippleColor(int color) {
-            this.rippleColor = color;
-            return this;
-        }
-
-        public RippleBuilder rippleOverlay(boolean isOverlay) {
-            this.isRippleOverlay = isOverlay;
-            return this;
-        }
-
-        public RippleBuilder rippleDiameterDp(int diameterDp) {
-            this.rippleDiameter = diameterDp;
-            return this;
-        }
-
-        public RippleBuilder rippleDuration(int duration) {
-            this.rippleDuration = duration;
-            return this;
-        }
-
-        public RippleBuilder rippleAlpha(float alpha) {
-            this.rippleAlpha = alpha;
-            return this;
-        }
-
-        public RippleBuilder rippleDelayClick(boolean isDelayClick) {
-            this.isRippleDelayClick = isDelayClick;
-            return this;
-        }
-
-        public RippleBuilder rippleBackground(int color) {
-            this.rippleBackground = color;
-            return this;
-        }
-
-        public MaterialRippleLayout create() {
-            MaterialRippleLayout layout = new MaterialRippleLayout(context);
-            layout.setRippleColor(rippleColor);
-            layout.setDefaultRippleAlpha(rippleAlpha);
-            layout.isRippleDelayClick(isRippleDelayClick);
-            layout.setRippleDiameter(AttrHelper.fp2px(rippleDiameter, context));
-            layout.setRippleDuration(rippleDuration);
-            layout.isRippleOverlay(isRippleOverlay);
-            layout.setRippleBackground(new RgbColor(rippleBackground));
-
-            ShapeElement shapeElement = new ShapeElement();
-            shapeElement.setRgbColor(RgbColor.fromArgbInt(rippleBackground));
-            child.setBackground(shapeElement);
-
-            ComponentContainer.LayoutConfig params = child.getLayoutConfig();
-            ComponentContainer parent = (ComponentContainer) child.getComponentParent();
-            int index = 0;
-
-            if (parent instanceof MaterialRippleLayout) {
-                throw new IllegalStateException("");
-            }
-
-            if (parent != null) {
-                index = parent.getChildIndex(child);
-                parent.removeComponent(child);
-            }
-
-            layout.addComponent(child,
-                    new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,
-                            ComponentContainer.LayoutConfig.MATCH_PARENT));
-
-            if (parent != null) {
-                parent.addComponent(layout, index, params);
-            }
-            return layout;
-        }
-    }
-}
diff --git a/library/src/main/java/moe/feng/common/stepperview/view/ProgressWheel.java b/library/src/main/java/moe/feng/common/stepperview/view/ProgressWheel.java
deleted file mode 100644
index fdf0c6ddd0a8649a53b127b119f5db16c084a310..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/view/ProgressWheel.java
+++ /dev/null
@@ -1,461 +0,0 @@
-package moe.feng.common.stepperview.view;
-
-import ohos.agp.components.AttrSet;
-import ohos.agp.components.Component;
-import ohos.agp.render.Arc;
-import ohos.agp.render.Paint;
-import ohos.agp.render.Paint.ShaderType;
-import ohos.agp.render.Paint.Style;
-import ohos.agp.render.Shader;
-import ohos.agp.utils.Color;
-import ohos.agp.utils.RectFloat;
-import ohos.app.Context;
-import ohos.eventhandler.EventHandler;
-import ohos.eventhandler.EventRunner;
-import ohos.eventhandler.InnerEvent;
-
-/**
- * An indicator of progress, similar to Android's ProgressBar.
- *
- * @author Todd Davies
- *         <p/>
- * See MIT-LICENSE.txt for licence details
- */
-public class ProgressWheel extends Component {
-    private static final float RIM_WIDTH = 0.2f;
-    private static final float CONTOUR_SIZE = 2.0f;
-    private static final float BAR_WIDTH = 1.5f;
-    private static final int INTIGER = 2;
-    private static final int FULLRADIUS = 100;
-    private static final int CIRCLERADIUS = 80;
-    private static final int BARLENGTH = 60;
-    private static final int BARWIDTH = 20;
-    private static final int PADDING = 5;
-    private static final int ANGLE = 360;
-    private static final int ANGLE_90 = 90;
-    private static final int ANGLE_NEGATIVE = -90;
-    private static final int BARCOLOR = 0xAA000000;
-    private static final int RIMCOLOR = 0xAADDDDDD;
-    private static final int TEXTCOLOR = 0xFF000000;
-
-    private int fullRadius = FULLRADIUS;
-    private int circleRadius = CIRCLERADIUS;
-    private int barLength = BARLENGTH;
-    private int barWidth = BARWIDTH;
-    private int rimWidth = BARWIDTH;
-    private int textSize = BARWIDTH;
-    private int layoutHeight = 0;
-    private int layoutWidth = 0;
-
-    private float contourSize = 0;
-
-    private int paddingTop = PADDING;
-    private int paddingBottom = PADDING;
-    private int paddingLeft = PADDING;
-    private int paddingRight = PADDING;
-
-    private int barColor = BARCOLOR;
-    private int contourColor = BARCOLOR;
-    private int circleColor = 0x00000000;
-    private int rimColor = RIMCOLOR;
-    private int textColor = TEXTCOLOR;
-
-    private Paint barPaint = new Paint();
-    private Paint circlePaint = new Paint();
-    private Paint rimPaint = new Paint();
-    private Paint textPaint = new Paint();
-    private Paint contourPaint = new Paint();
-
-    private RectFloat innerCircleBounds = new RectFloat();
-    private RectFloat circleBounds = new RectFloat();
-    private RectFloat circleOuterContour = new RectFloat();
-    private RectFloat circleInnerContour = new RectFloat();
-
-    private float spinSpeed = CONTOUR_SIZE;
-    private int delayMillis = FULLRADIUS;
-    private float progress = 0;
-    private boolean isSpinning = false;
-
-    private String text = "";
-    private String[] splitText = {};
-
-    private EventHandler spinHandler = new EventHandler(EventRunner.getMainEventRunner()) {
-        /**
-         * This is the code that will increment the progress variable and so
-         * spin the wheel
-         */
-        @Override
-        public void processEvent(InnerEvent msg) {
-            invalidate();
-            if (isSpinning) {
-                spinHandler.sendEvent(0, delayMillis);
-            }
-            super.processEvent(msg);
-        }
-    };
-
-    /**
-     * The constructor for the ProgressWheel
-     *
-     * @param context
-     * @param attrSet
-     */
-    public ProgressWheel(Context context, AttrSet attrSet) {
-        super(context, attrSet);
-        DrawTask task = (component, canvas) -> {
-            setupBounds();
-            setupPaints();
-            canvas.drawArc(innerCircleBounds, new Arc(ANGLE, ANGLE, false), circlePaint);
-            canvas.drawArc(circleBounds, new Arc(ANGLE, ANGLE, false), rimPaint);
-            canvas.drawArc(circleOuterContour, new Arc(ANGLE, ANGLE, false), contourPaint);
-            if (isSpinning) {
-                canvas.drawArc(circleBounds, new Arc(progress - ANGLE_90, barLength, false), barPaint);
-            } else {
-                canvas.drawArc(circleBounds, new Arc(ANGLE_NEGATIVE, progress, false), barPaint);
-            }
-            float textHeight = textPaint.descent() - textPaint.ascent();
-            float verticalTextOffset = (textHeight / INTIGER) - textPaint.descent();
-            for (String line : splitText) {
-                float horizontalTextOffset = textPaint.measureText(line) / INTIGER;
-                canvas.drawText(
-                        textPaint,
-                        line,
-                        (float) component.getWidth() / INTIGER - horizontalTextOffset,
-                        (float) component.getHeight() / INTIGER + verticalTextOffset);
-            }
-            if (isSpinning) {
-                scheduleRedraw();
-            }
-        };
-        addDrawTask(task);
-    }
-
-    /**
-     * Set the properties of the paints we're using to
-     * draw the progress wheel
-     */
-    private void setupPaints() {
-        barPaint.setColor(new Color(barColor));
-        barPaint.setAntiAlias(true);
-        barPaint.setStyle(Style.STROKE_STYLE);
-        barPaint.setStrokeWidth(barWidth);
-
-        rimPaint.setColor(new Color(rimColor));
-        rimPaint.setAntiAlias(true);
-        rimPaint.setStyle(Style.STROKE_STYLE);
-        rimPaint.setStrokeWidth(rimWidth);
-
-        circlePaint.setColor(new Color(circleColor));
-        circlePaint.setAntiAlias(true);
-        circlePaint.setStyle(Style.FILL_STYLE);
-
-        textPaint.setColor(new Color(textColor));
-        textPaint.setStyle(Style.FILL_STYLE);
-        textPaint.setAntiAlias(true);
-        textPaint.setTextSize(textSize);
-
-        contourPaint.setColor(new Color(contourColor));
-        contourPaint.setAntiAlias(true);
-        contourPaint.setStyle(Style.STROKE_STYLE);
-        contourPaint.setStrokeWidth(contourSize);
-    }
-
-    /**
-     * Set the bounds of the component
-     */
-    private void setupBounds() {
-        // Width should equal to Height, find the min value to setup the circle
-        int minValue = Math.min(layoutWidth, layoutHeight);
-
-        // Calc the Offset if needed
-        int offsetx = layoutWidth - minValue;
-        int offsety = layoutHeight - minValue;
-
-        // Add the offset
-        paddingTop = this.getPaddingTop() + (offsety / INTIGER);
-        paddingBottom = this.getPaddingBottom() + (offsety / INTIGER);
-        paddingLeft = this.getPaddingLeft() + (offsetx / INTIGER);
-        paddingRight = this.getPaddingRight() + (offsetx / INTIGER);
-
-        int width = getWidth();
-        int height = getHeight();
-
-        innerCircleBounds = new RectFloat(
-                paddingLeft + (BAR_WIDTH * barWidth),
-                paddingTop + (BAR_WIDTH * barWidth),
-                width - paddingRight - (BAR_WIDTH * barWidth),
-                height - paddingBottom - (BAR_WIDTH * barWidth));
-        circleBounds = new RectFloat(
-                paddingLeft + barWidth,
-                paddingTop + barWidth,
-                width - paddingRight - barWidth,
-                height - paddingBottom - barWidth);
-        circleInnerContour = new RectFloat(
-                circleBounds.left + (rimWidth / RIM_WIDTH) + (contourSize / CONTOUR_SIZE),
-                circleBounds.top + (rimWidth / RIM_WIDTH) + (contourSize / CONTOUR_SIZE),
-                circleBounds.right - (rimWidth / RIM_WIDTH) - (contourSize / CONTOUR_SIZE),
-                circleBounds.bottom - (rimWidth / RIM_WIDTH) - (contourSize / CONTOUR_SIZE));
-        circleOuterContour = new RectFloat(
-                circleBounds.left - (rimWidth / RIM_WIDTH) - (contourSize / CONTOUR_SIZE),
-                circleBounds.top - (rimWidth / RIM_WIDTH) - (contourSize / CONTOUR_SIZE),
-                circleBounds.right + (rimWidth / RIM_WIDTH) + (contourSize / CONTOUR_SIZE),
-                circleBounds.bottom + (rimWidth / RIM_WIDTH) + (contourSize / CONTOUR_SIZE));
-
-        fullRadius = (width - paddingRight - barWidth) / INTIGER;
-        circleRadius = (fullRadius - barWidth) + 1;
-    }
-
-    @Override
-    public void addDrawTask(DrawTask drawTask) {
-        super.addDrawTask(drawTask);
-        drawTask.onDraw(this,mCanvasForTaskOverContent);
-    }
-
-    private void scheduleRedraw() {
-        progress += spinSpeed;
-        if (progress > ANGLE) {
-            progress = 0;
-        }
-        invalidate();
-    }
-
-    public boolean isSpinning() {
-        return isSpinning;
-    }
-
-    /**
-     * Reset the count (in increment mode)
-     */
-    public void resetCount() {
-        progress = 0;
-        setText("0%");
-        invalidate();
-    }
-
-    /**
-     * Turn off startSpinning mode
-     */
-    public void stopSpinning() {
-        isSpinning = false;
-        progress = 0;
-        invalidate();
-    }
-
-    /**
-     * Puts the view on spin mode
-     */
-    public void startSpinning() {
-        isSpinning = true;
-        spinHandler.sendEvent(0);
-    }
-
-    /**
-     * Increment the progress by 1 (of 360)
-     */
-    public void incrementProgress() {
-        incrementProgress(1);
-    }
-
-    public void incrementProgress(int amount) {
-        isSpinning = false;
-        progress += amount;
-        if (progress > ANGLE) {
-            progress %= ANGLE;
-        }
-        invalidate();
-    }
-
-    public void setProgress(int ii) {
-        isSpinning = false;
-        progress = ii;
-        invalidate();
-    }
-
-    public void setText(String text) {
-        this.text = text;
-        splitText = this.text.split(System.lineSeparator());
-    }
-
-    public int getCircleRadius() {
-        return circleRadius;
-    }
-
-    public void setCircleRadius(int circleRadius) {
-        this.circleRadius = circleRadius;
-    }
-
-    public int getBarLength() {
-        return barLength;
-    }
-
-    public void setBarLength(int barLength) {
-        this.barLength = barLength;
-    }
-
-    public int getBarWidth() {
-        return barWidth;
-    }
-
-    public void setBarWidth(int barWidth) {
-        this.barWidth = barWidth;
-
-        if (this.barPaint != null) {
-            this.barPaint.setStrokeWidth(this.barWidth);
-        }
-    }
-
-    public int getTextSize() {
-        return textSize;
-    }
-
-    public void setTextSize(int textSize) {
-        this.textSize = textSize;
-
-        if (this.textPaint != null) {
-            this.textPaint.setTextSize(this.textSize);
-        }
-    }
-
-    public int getPaddingTop() {
-        return paddingTop;
-    }
-
-    public void setPaddingTop(int paddingTop) {
-        this.paddingTop = paddingTop;
-    }
-
-    public int getPaddingBottom() {
-        return paddingBottom;
-    }
-
-    public void setPaddingBottom(int paddingBottom) {
-        this.paddingBottom = paddingBottom;
-    }
-
-    public int getPaddingLeft() {
-        return paddingLeft;
-    }
-
-    public void setPaddingLeft(int paddingLeft) {
-        this.paddingLeft = paddingLeft;
-    }
-
-    public int getPaddingRight() {
-        return paddingRight;
-    }
-
-    public void setPaddingRight(int paddingRight) {
-        this.paddingRight = paddingRight;
-    }
-
-    public int getBarColor() {
-        return barColor;
-    }
-
-    public void setBarColor(int barColor) {
-        this.barColor = barColor;
-
-        if (this.barPaint != null) {
-            this.barPaint.setColor(new Color(this.barColor));
-        }
-    }
-
-    public int getCircleColor() {
-        return circleColor;
-    }
-
-    public void setCircleColor(int circleColor) {
-        this.circleColor = circleColor;
-
-        if (this.circlePaint != null) {
-            this.circlePaint.setColor(new Color(this.circleColor));
-        }
-    }
-
-    public int getRimColor() {
-        return rimColor;
-    }
-
-    public void setRimColor(int rimColor) {
-        this.rimColor = rimColor;
-
-        if (this.rimPaint != null) {
-            this.rimPaint.setColor(new Color(this.rimColor));
-        }
-    }
-
-    public Shader getRimShader() {
-        return rimPaint.getShader();
-    }
-
-    public void setRimShader(Shader shader,ShaderType shaderType) {
-        this.rimPaint.setShader(shader,shaderType);
-    }
-
-    public int getTextColor() {
-        return textColor;
-    }
-
-    public void setTextColor(int textColor) {
-        this.textColor = textColor;
-
-        if (this.textPaint != null) {
-            this.textPaint.setColor(new Color(this.textColor));
-        }
-    }
-
-    public float getSpinSpeed() {
-        return spinSpeed;
-    }
-
-    public void setSpinSpeed(float spinSpeed) {
-        this.spinSpeed = spinSpeed;
-    }
-
-    public int getRimWidth() {
-        return rimWidth;
-    }
-
-    public void setRimWidth(int rimWidth) {
-        this.rimWidth = rimWidth;
-
-        if (this.rimPaint != null) {
-            this.rimPaint.setStrokeWidth(this.rimWidth);
-        }
-    }
-
-    public int getDelayMillis() {
-        return delayMillis;
-    }
-
-    public void setDelayMillis(int delayMillis) {
-        this.delayMillis = delayMillis;
-    }
-
-    public int getContourColor() {
-        return contourColor;
-    }
-
-    public void setContourColor(int contourColor) {
-        this.contourColor = contourColor;
-
-        if (contourPaint != null) {
-            this.contourPaint.setColor(new Color(this.contourColor));
-        }
-    }
-
-    public float getContourSize() {
-        return this.contourSize;
-    }
-
-    public void setContourSize(float contourSize) {
-        this.contourSize = contourSize;
-        if (contourPaint != null) {
-            this.contourPaint.setStrokeWidth(this.contourSize);
-        }
-    }
-
-    public int getProgress() {
-        return (int) progress;
-    }
-}
\ No newline at end of file
diff --git a/library/src/main/java/moe/feng/common/stepperview/view/ViewUtils.java b/library/src/main/java/moe/feng/common/stepperview/view/ViewUtils.java
deleted file mode 100644
index c4119c9ac32891bc833a238f3644c4074958bb5b..0000000000000000000000000000000000000000
--- a/library/src/main/java/moe/feng/common/stepperview/view/ViewUtils.java
+++ /dev/null
@@ -1,60 +0,0 @@
-package moe.feng.common.stepperview.view;
-
-import moe.feng.common.stepperview.ResourceTable;
-import ohos.agp.components.Button;
-import ohos.agp.components.DirectionalLayout;
-import ohos.agp.components.LayoutScatter;
-import ohos.agp.components.Text;
-import ohos.agp.utils.Color;
-import ohos.agp.utils.LayoutAlignment;
-import ohos.agp.utils.TextAlignment;
-import ohos.agp.window.dialog.ToastDialog;
-import ohos.app.Context;
-
-public class ViewUtils {
-    private static final float RIPPLE_ALPHA = 0.2f;
-    private static final int RIPPLE_DURATION = 2000;
-    private static final int RIPPLE_DIAMETERDP = 35;
-    private static MaterialRippleLayout materialRippleLayout;
-    private static final int MAX_LINE = 2;
-    private static final int DURATION = 5000;
-    private static final int OFFSET_Y = 60;
-    /**
-     * 启动动画
-     *
-     * @param bt
-     */
-    public static void startAnimator(Context context,Button bt,String color) {
-        if (bt != null) {
-            try {
-                materialRippleLayout = new MaterialRippleLayout(context).on(bt)
-                        .rippleColor(Color.getIntColor("#86666666"))
-                        .rippleAlpha(RIPPLE_ALPHA)
-                        .rippleDuration(RIPPLE_DURATION)
-                        .rippleBackground(Color.getIntColor(color))
-                        .rippleOverlay(true)
-                        .rippleDiameterDp(RIPPLE_DIAMETERDP)
-                        .create();
-            }catch (Exception e){
-
-            }
-
-        }
-    }
-    public static void toast(Context context,String string){
-        DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(context)
-                .parse(ResourceTable.Layout_layout_toast, null, false);
-        Text text = (Text) toastLayout.findComponentById(ResourceTable.Id_msg_toast);
-        text.setText(string);
-        text.setTextAlignment(TextAlignment.LEFT);
-        text.setMultipleLine(true);
-        text.setMaxTextLines(MAX_LINE);
-        text.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_END);
-        new ToastDialog(context)
-                .setComponent(toastLayout)
-                .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
-                .setAlignment(LayoutAlignment.BOTTOM | LayoutAlignment.HORIZONTAL_CENTER)
-                .setOffset(0, OFFSET_Y)
-                .show();
-    }
-}
diff --git a/library/src/main/resources/base/element/color.json b/library/src/main/resources/base/element/color.json
deleted file mode 100644
index ed624d3c218cf77b4318e15a6e30c1b3a7289667..0000000000000000000000000000000000000000
--- a/library/src/main/resources/base/element/color.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "color": [
-    {
-      "name": "material_grey_500",
-      "value": "#9E9E9E"
-    },
-    {
-      "name": "material_grey_400",
-      "value": "#BDBDBD"
-    },
-    {
-      "name": "material_red_500",
-      "value": "#F44336"
-    },
-    {
-      "name": "material_blue_500",
-      "value": "#2196F3"
-    }
-
-  ]
-}
\ No newline at end of file
diff --git a/library/src/main/resources/base/element/float.json b/library/src/main/resources/base/element/float.json
deleted file mode 100644
index 858207f0cc1422ae874cafd5d628dcd27000de80..0000000000000000000000000000000000000000
--- a/library/src/main/resources/base/element/float.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "float": [
-    {
-      "name": "dp1",
-      "value": "1vp"
-    },
-    {
-      "name": "stepper_margin_top",
-      "value": "24vp"
-    },
-    {
-      "name": "stepper_point_size",
-      "value": "24vp"
-    },
-    {
-      "name": "stepper_point_half_size",
-      "value": "12vp"
-    },
-    {
-      "name": "vertical_stepper_point_margin_start",
-      "value": "24vp"
-    },
-    {
-      "name": "vertical_stepper_point_margin_end",
-      "value": "12vp"
-    },
-    {
-      "name": "vertical_stepper_line_margin_top",
-      "value": "8vp"
-    },
-    {
-      "name": "vertical_stepper_line_width",
-      "value": "1vp"
-    },
-    {
-      "name": "vertical_stepper_item_space_height",
-      "value": "8vp"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/library/src/main/resources/base/element/string.json b/library/src/main/resources/base/element/string.json
index 0fec1f2cc2ae95977073133b56b4bb56e48eb6e6..1e2b219ccdd1183e23968586e5e2e404b41c38c9 100644
--- a/library/src/main/resources/base/element/string.json
+++ b/library/src/main/resources/base/element/string.json
@@ -2,23 +2,7 @@
   "string": [
     {
       "name": "app_name",
-      "value": "Library"
-    },
-    {
-      "name": "expand_less",
-      "value": "收缩"
-    },
-    {
-      "name": "expand_more",
-      "value": "展开"
-    },
-    {
-      "name": "ExpandableTextId",
-      "value": "expandable_text"
-    },
-    {
-      "name": "ExpandCollapseToggleId",
-      "value": "expand_collapse"
+      "value": "library"
     }
   ]
 }
diff --git a/entry/src/main/resources/base/graphic/dark_background.xml b/library/src/main/resources/base/graphic/blue_cir_background.xml
similarity index 86%
rename from entry/src/main/resources/base/graphic/dark_background.xml
rename to library/src/main/resources/base/graphic/blue_cir_background.xml
index 97ee9087800599c10b4b5ea3f672edae39199de4..710ba7369c8b2e6b506f92a57b2de4b3579544be 100644
--- a/entry/src/main/resources/base/graphic/dark_background.xml
+++ b/library/src/main/resources/base/graphic/blue_cir_background.xml
@@ -8,5 +8,5 @@
         ohos:width="24vp"/>
 
     <solid
-        ohos:color="#4B0091"/>
+        ohos:color="#007DFF"/>
 </shape>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/graphic/button_skip.xml b/library/src/main/resources/base/graphic/gray_shap.xml
similarity index 50%
rename from entry/src/main/resources/base/graphic/button_skip.xml
rename to library/src/main/resources/base/graphic/gray_shap.xml
index 4a5d15383436de0f9fbfdfa44a6121a36994a518..f9868fc91e9b157756ff230e2851ce77e694783c 100644
--- a/entry/src/main/resources/base/graphic/button_skip.xml
+++ b/library/src/main/resources/base/graphic/gray_shap.xml
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <shape
     xmlns:ohos="http://schemas.huawei.com/res/ohos"
-    ohos:shape="rectangle">
+    ohos:shape="oval">
 
-    <corners
-        ohos:radius="8vp"/>
+    <size
+        ohos:height="24vp"
+        ohos:width="24vp"/>
 
     <solid
-        ohos:color="#61000000"/>
+        ohos:color="#9E9E9E"/>
 </shape>
\ No newline at end of file
diff --git a/library/src/main/resources/base/graphic/ic_done_white_16dp.xml b/library/src/main/resources/base/graphic/ic_done_white_16dp.xml
index 2554f352aa5cfa38447b3ef3fd1f13e37dafbafd..9063b829a59903e5fb551e40d9dcdee279e7e8bc 100644
--- a/library/src/main/resources/base/graphic/ic_done_white_16dp.xml
+++ b/library/src/main/resources/base/graphic/ic_done_white_16dp.xml
@@ -1,8 +1,11 @@
-<vector xmlns:ohos="http://schemas.huawei.com/res/ohos"
-        ohos:height="16vp"
-        ohos:viewportHeight="24"
-        ohos:viewportWidth="24">
-<path
-    ohos:fillColor="#FFF"
-    ohos:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
+<vector
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="16vp"
+    ohos:viewportHeight="24.0"
+    ohos:viewportWidth="24.0"
+    ohos:width="16vp">
+
+    <path
+        ohos:fillColor="#FFFFFFFF"
+        ohos:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
 </vector>
diff --git a/library/src/main/resources/base/graphic/ic_warning_black_24dp.xml b/library/src/main/resources/base/graphic/ic_warning_black_24dp.xml
deleted file mode 100644
index 8787116726c34d4381ca1316c8e6824804e5a403..0000000000000000000000000000000000000000
--- a/library/src/main/resources/base/graphic/ic_warning_black_24dp.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<vector xmlns:ohos="http://schemas.huawei.com/res/ohos"
-        ohos:height="24vp"
-        ohos:width="24vp"
-        ohos:viewportHeight="24"
-        ohos:viewportWidth="24">
-    <path
-
-        ohos:fillColor="#FF000000"
-        ohos:pathData="M1,21h22L12,2 1,21zM13,18h-2v-2h2v2zM13,14h-2v-4h2v4z"/>
-</vector>
-
diff --git a/library/src/main/resources/base/graphic/stepper_point_background.xml b/library/src/main/resources/base/graphic/stepper_point_background.xml
index 175b09ed8a4db8ba3c77f3972a2101e33a8fff28..a39a9a11504fee0c3075853594066d033a38817c 100644
--- a/library/src/main/resources/base/graphic/stepper_point_background.xml
+++ b/library/src/main/resources/base/graphic/stepper_point_background.xml
@@ -1,11 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
-	   ohos:shape="">
-	<corners
-		ohos:radius="5vp"/>
-	<stroke
-		ohos:width="1vp"
-		ohos:color="gray"/>
+<?xml version="1.0" encoding="UTF-8" ?>
+<shape
+	xmlns:ohos="http://schemas.huawei.com/res/ohos"
+	ohos:shape="oval">
+
+	<size
+		ohos:height="24vp"
+		ohos:width="24vp"/>
+
 	<solid
-		ohos:color="#00BFFF"/>
-</shape>
+		ohos:color="#9E9E9E"/>
+</shape>
\ No newline at end of file
diff --git a/library/src/main/resources/base/layout/vertical_stepper_item_view_layout.xml b/library/src/main/resources/base/layout/vertical_stepper_item_view_layout.xml
new file mode 100644
index 0000000000000000000000000000000000000000..31f26abac5009997c2a22e423182695f78efdf93
--- /dev/null
+++ b/library/src/main/resources/base/layout/vertical_stepper_item_view_layout.xml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:id="$+id:vertical_stepper_item_view_layout"
+    ohos:height="match_content"
+    ohos:width="match_parent"
+    ohos:orientation="horizontal"
+    >
+
+    <DirectionalLayout
+        ohos:height="match_parent"
+        ohos:width="match_content"
+        ohos:alignment="horizontal_center"
+        ohos:end_margin="12vp"
+        ohos:orientation="vertical"
+        ohos:start_margin="24vp"
+        >
+
+        <StackLayout
+            ohos:height="24vp"
+            ohos:width="24vp">
+            <moe.feng.common.stepperview.internal.ClipOvalFrameLayout
+                ohos:id="$+id:stepper_point_frame"
+                ohos:height="24vp"
+                ohos:width="24vp"
+                ohos:background_element="$graphic:stepper_point_background"
+                >
+
+                <Component
+                    ohos:id="$+id:stepper_point_background"
+                    ohos:height="match_parent"
+                    ohos:width="match_parent"
+                    ohos:background_element="#9E9E9E"
+                   />
+
+                <Text
+                    ohos:id="$+id:stepper_number"
+                    ohos:height="match_content"
+                    ohos:width="match_content"
+                    ohos:layout_alignment="center"
+                    ohos:max_text_lines="1"
+                    ohos:text="1"
+                    ohos:text_color="#FFFFFF"
+                    ohos:text_size="12vp"/>
+
+                <Image
+                    ohos:id="$+id:stepper_done_icon"
+                    ohos:height="match_content"
+                    ohos:width="match_content"
+                    ohos:image_src="$graphic:ic_done_white_16dp"
+                    ohos:layout_alignment="center"/>
+
+            </moe.feng.common.stepperview.internal.ClipOvalFrameLayout>
+
+            <Image
+                ohos:id="$+id:stepper_error_icon"
+                ohos:height="24vp"
+                ohos:width="24vp"
+                ohos:alpha="0"
+                ohos:image_src="$media:ic_warning_black_24dp"/>
+
+        </StackLayout>
+
+        <Component
+            ohos:id="$+id:stepper_line"
+            ohos:height="0vp"
+            ohos:width="1vp"
+            ohos:background_element="#BDBDBD"
+            ohos:top_margin="8vp"
+            ohos:weight="1"/>
+
+    </DirectionalLayout>
+
+    <DirectionalLayout
+        ohos:id="$+id:stepper_right_layout"
+        ohos:height="match_content"
+        ohos:width="0vp"
+        ohos:end_margin="24vp"
+        ohos:orientation="vertical"
+        ohos:weight="1">
+
+        <Text
+            ohos:id="$+id:stepper_title"
+            ohos:height="match_content"
+            ohos:width="match_content"
+            ohos:max_text_lines="2"
+            ohos:text="Title"/>
+
+        <Text
+            ohos:id="$+id:stepper_summary"
+            ohos:height="match_content"
+            ohos:width="match_content"
+            ohos:text="Summary"/>
+
+        <StackLayout
+            ohos:id="$+id:stepper_custom_view"
+            ohos:height="match_content"
+            ohos:width="match_parent"
+            ohos:visibility="hide"
+           />
+
+        <Component
+            ohos:id="$+id:stepper_margin_bottom"
+            ohos:height="28vp"
+            ohos:width="match_parent"/>
+
+    </DirectionalLayout>
+
+</DirectionalLayout>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/warn.png b/library/src/main/resources/base/media/ic_warning_black_24dp.png
similarity index 100%
rename from entry/src/main/resources/base/media/warn.png
rename to library/src/main/resources/base/media/ic_warning_black_24dp.png
diff --git a/entry/src/test/java/moe/feng/common/steperview/ExampleTest.java b/library/src/test/java/moe/feng/common/stepperview/ExampleTest.java
similarity index 72%
rename from entry/src/test/java/moe/feng/common/steperview/ExampleTest.java
rename to library/src/test/java/moe/feng/common/stepperview/ExampleTest.java
index 7c9ebaf70d2eed34f30f966fb6fed07634eacda5..4eb5ece10e5b1c732b7fe30b8e4e2770ab1c26dd 100644
--- a/entry/src/test/java/moe/feng/common/steperview/ExampleTest.java
+++ b/library/src/test/java/moe/feng/common/stepperview/ExampleTest.java
@@ -1,4 +1,4 @@
-package moe.feng.common.steperview;
+package moe.feng.common.stepperview;
 
 import org.junit.Test;
 
diff --git a/settings.gradle b/settings.gradle
index 87cd12d9bee6039db8942628c8cf21ed46c91bd6..d0c7ee8440156d4a9324ac5357770747425fef57 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -1 +1 @@
-include ':entry',':library'
+include ':entry', ':library'