概述
这是一个带渲染动画的自定义流程状态图,每个节点根据当前的进度可渲染成不同的标识,也扩展了超出屏幕时的滑动效果,同时也运用了viewmodel 和databinding 技术,用MVVM架构模式来实现效果
详细
一、项目结构
├─app
│ ├─main
│ │ ├─java
│ │ │ └─com
│ │ │ └─sky
│ │ │ └─saleapp
│ │ │ ├─adapter
│ │ │ ├─base
│ │ │ ├─module
│ │ │ │ ├─code
│ │ │ │ └─step
│ │ │ └─util
│ │ │ └─titlebar
│ │ └─res
│ │ ├─drawable
│ │ ├─drawable-v24
│ │ ├─drawable-xxhdpi
│ │ ├─layout
│ │ ├─mipmap-anydpi-v26
│ │ ├─mipmap-hdpi
│ │ ├─mipmap-mdpi
│ │ ├─mipmap-xhdpi
│ │ ├─mipmap-xxhdpi
│ │ ├─mipmap-xxxhdpi
│ │ ├─navigation
│ │ └─values
├─build
│ └─kotlin
│ └─sessions
├─gradle
│ └─wrapper
二、程序实现
1、工程目录
2、实现方法
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="@+id/viewStatusBar"
android:layout_width="match_parent"
android:layout_height="0dp" />
<include
android:id="@+id/include"
layout="@layout/common_title_barlayout" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"
android:orientation="vertical">
<LinearLayout
android:id="@+id/six_length_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<ProgressBar
android:id="@+id/currentProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_marginLeft="41dp"
android:layout_marginTop="20dp"
android:layout_marginRight="50dp"
android:max="100"
android:progressDrawable="@drawable/bg_park_progress_bar" />
<LinearLayout
android:id="@+id/current_progress_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="41dp"
android:layout_marginRight="50dp"
android:clipChildren="false"
android:orientation="horizontal" />
</FrameLayout>
</LinearLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/more_than_six_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/car_interval_ry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:nestedScrollingEnabled="false" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/screen_inside"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="@dimen/dp_10"
android:layout_weight="1"
android:background="@color/gold_141"
android:gravity="center"
android:text="屏幕内"
android:textColor="@color/white"
android:textSize="16sp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/screen_outside"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="@dimen/dp_10"
android:layout_weight="1"
android:background="@color/gold_141"
android:gravity="center"
android:text="超出屏幕"
android:textColor="@color/white"
android:textSize="16sp" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</layout>
三、实现逻辑
主要是通过自定义view的思想来实现功能
1、先抽取整个流程图的其中一段作为模板;
2、然后通过viewModel 得到数据源的数据(具体数据结构可结合自身项目)
3、通过data 的数据变动,监听器会根据数据源的长度,与屏幕的宽度进行对比,自动适配
四、运行效果