基于Android 带动画的自定义流程状态图

概述

这是一个带渲染动画的自定义流程状态图，每个节点根据当前的进度可渲染成不同的标识，也扩展了超出屏幕时的滑动效果，同时也运用了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 的数据变动，监听器会根据数据源的长度，与屏幕的宽度进行对比，自动适配

四、运行效果