Android自定义StepView仿外卖配送进度

在Android开发中，自定义视图是提升应用界面独特性和用户体验的重要手段。本篇将深入探讨如何创建一个自定义的StepView，用于模拟外卖配送过程中的进度展示。StepView通常用于展示一系列步骤，每个步骤可能有不同的状态，如未完成、已完成或正在进行。在本文中，我们将分析实现这样一个StepView的关键技术和代码。 我们需要在`res/values`目录下创建一个`attrs.xml`文件，用来定义自定义视图所需的属性。这些属性包括： 1. `step_size`: 步骤图像的大小。 2. `line_size`: 连接步骤的线条宽度。 3. `text_size`: 文字大小。 4. `text_line_margin`: 文字与线条之间的间距。 5. `normal_line_color`: 一般线的颜色。 6. `normal_text_color`: 一般文字颜色。 7. `target_text_color`: 当前步骤文字颜色。 8. `passed_line_color`: 已完成步骤线条颜色。 9. `step_count`: 总步骤数。 10. `current_step`: 当前步骤位置。 11. `normal_step_iv`: 一般步骤图像资源引用。 12. `passed_step_iv`: 已完成步骤图像资源引用。 13. `target_step_iv`: 当前步骤图像资源引用。 14. `step_is_touch`: 是否允许步骤被触摸。 15. `text_up_line`: 文字是否显示在线条上方。 接下来，我们需要创建一个名为`StepView`的自定义视图类。这个类应该继承自`View`或`ViewGroup`，并重写`onDraw()`方法来绘制步骤、线条和文字。在`onDraw()`中，我们可以使用`Canvas`对象来绘制图形，如矩形（步骤）、线条和文字。根据传递的属性值，我们改变颜色和样式。 在布局文件中，我们可以像下面这样使用自定义的StepView： ```xml <com.example.StepView android:id="@+id/step_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:step_size="20dp" app:line_size="2dp" app:text_size="14sp" app:normal_line_color="@color/colorGray" app:normal_text_color="@color/colorBlack" app:passed_line_color="@color/colorGreen" app:target_text_color="@color/colorPrimary" app:step_count="4" app:current_step="2" app:normal_step_iv="@drawable/ic_normal_step" app:passed_step_iv="@drawable/ic_passed_step" app:target_step_iv="@drawable/ic_target_step" app:step_is_touch="true" app:text_up_line="true"/> ``` 为了响应用户的触摸事件，我们可以为StepView添加一个`OnItemStepTouchListener`接口。当用户点击某个步骤时，触发`onItemStepTouch()`方法，从而在日志中记录用户点击的位置或其他业务逻辑。 在Java代码中，我们可以设置StepView的属性，如步骤文字、当前步骤位置，并设置触摸监听器： ```java StepView stepView = findViewById(R.id.step_view); String[] stepTexts = {"订单已提交", "商家已接单", "配送中", "已送达"}; stepView.setStepTexts(stepTexts); stepView.setCurrentStep(2); stepView.setOnItemStepTouchListener(new StepView.OnItemStepTouchListener() { @Override public void onItemStepTouch(int position) { Log.d("TAG", "当前点击位置: " + position); } }); ``` 此外，我们还可以通过`CheckBox`来控制StepView的可触摸性以及文字是否显示在线条上方。例如，通过监听`CheckBox`的选中状态，调用`setStepIsTouch()`和`setTextUpLine()`方法来更新StepView的行为。 创建一个自定义的StepView需要定义自定义属性、重写`onDraw()`方法来绘制视图，并提供触摸事件监听。通过这种方式，我们可以灵活地定制进度条的样式和行为，使其适应各种应用需求，比如模拟外卖配送进度。同时，这样的自定义视图还能提高代码的可复用性和项目的可维护性。