如何在 Android 中实现类似 FlowLayout 的功能?
在 Android 应用中，我们经常需要向用户解释如何在应用中执行某项任务的分步指南，例如如何预订应用中提供的服务。为此，我们必须以流式布局的形式显示详细的指南。
在本文中，我们将介绍如何在 Android 中创建类似 FlowLayout 的功能。
实现
我们将创建一个简单的应用，在其中显示一个简单的文本视图。创建此文本视图后，我们将创建一个步骤视图，其中将显示应用开发生命周期中需要遵循的基本步骤。现在，我们将使用 Android Studio 创建一个新项目。
步骤 1:在 Android Studio 中创建新项目
按照下图所示导航到 Android Studio。在下面的屏幕中，点击"新建项目"以创建一个新的 Android Studio 项目。
点击"新建项目"后，您将看到以下屏幕。
在此屏幕中，我们只需选择"空活动"并点击"下一步"。点击"下一步"后，您将看到以下屏幕。
在此屏幕中，我们只需指定项目名称。然后会自动生成软件包名称。
注意− 确保选择 Java 作为语言。
指定所有详细信息后，点击"完成"以创建一个新的 Android Studio 项目。
项目创建完成后，我们将看到两个打开的文件，即 activity_main.xml 和 MainActivity.java 文件。
步骤 2:在 build.gradle 文件中添加步骤视图的依赖项
导航到 Gradle 脚本>修改 build.gradle 文件，并在依赖项部分添加以下依赖项。
implementation 'com.github.shuhart:stepview:1.5.1'
添加上述依赖项后，只需同步您的项目即可安装。
步骤 3:使用 activity_main.xml
导航到 activity_main.xml。如果此文件不可见，请在左侧窗格中导航至 app>res>layout>activity_main.xml 以打开此文件。打开此文件后，向其中添加以下代码。代码中添加了注释，以便您详细了解。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:paddingTop="8dp"
android:paddingBottom="8dp"
tools:context=".MainActivity">
<!-- creating a text view on below line-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/step_view"
android:layout_centerInParent="true"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:padding="4dp"
android:text="Flow Layout in Android"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold" />
<!-- creating a step view on below line-->
<com.shuhart.stepview.StepView
android:id="@+id/step_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@color/purple_500"
android:backgroundTint="@color/purple_500"
android:layoutDirection="ltr"
android:padding="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:sv_animationType="All"
app:sv_doneTextColor="@color/purple_500"
app:sv_nextTextColor="@color/white"
app:sv_selectedCircleColor="@color/white"
app:sv_selectedCircleRadius="18dp"
app:sv_selectedTextColor="@color/white"
app:sv_stepNumberTextSize="18sp"
app:sv_stepPadding="12dp"
app:sv_textSize="12sp"
tools:ignore="MissingConstraints" />
<!-- creating linear layout for buttons on below line -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/step_view"
android:orientation="horizontal"
android:weightSum="2">
<!-- creating a button for next on below line -->
<Button
android:id="@+id/idBtnNxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:backgroundTint="@color/purple_500"
android:text="Next"
android:textAllCaps="false" />
<!-- creating a button for back on below line -->
<Button
android:id="@+id/idBtnBack"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:backgroundTint="@color/purple_500"
android:text="Back"
android:textAllCaps="false" />
</LinearLayout>
</RelativeLayout>
说明:在上面的代码中，我们创建了一个相对布局的根布局。在这个布局中，我们创建了一个文本视图，用于显示应用程序的标题。之后，我们创建一个 StepView，用于以流程的形式显示构建 Android 应用程序的步骤。之后，我们创建一个水平线性布局。在这个线性布局中，我们将创建两个按钮:"下一步"按钮和"后退"按钮。点击"下一步"按钮后，我们将进入下一步;点击"后退"按钮后，我们将返回上一步。
步骤 4:使用 MainActivity.java 文件
导航到 MainActivity.java。如果此文件不可见，请在左侧窗格中导航至 app>res>layout>MainActivity.java 以打开此文件。打开此文件后，将以下代码添加到其中。代码中添加了注释，以便您详细了解。
package com.example.java_test_application;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.core.content.res.ResourcesCompat;
import com.shuhart.stepview.StepView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
// 在下一行创建当前步数的变量。
private int currentStep = 0;
// 在下一行创建按钮和步数视图的变量
private Button nextBtn, backBtn;
private StepView stepView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化下面一行的步骤视图的变量。
stepView = findViewById(R.id.step_view);
nextBtn = findViewById(R.id.idBtnNxt);
backBtn = findViewById(R.id.idBtnBack);
// 为要在步骤视图中显示的步骤创建一个数组列表。
List<String> steps = new ArrayList<String>() {{
add("App
Strategy");
add("Analysis &
Planning");
add("UI/UX
Design");
add("App
Development");
add("Application
Testing");
}};
// 在步骤视图中为每个步骤添加点击监听器。
stepView.setOnStepClickListener(new StepView.OnStepClickListener() {
@Override
public void onStepClick(int step) {
// 以 toast 消息的形式显示每个步骤的操作。
Toast.makeText(MainActivity.this, steps.get(step), Toast.LENGTH_SHORT).show();
}
});
// 在下面的行中添加我们的下一个按钮的点击监听器。
nextBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在下方行检查当前步骤是否小于步骤视图。
if (currentStep < stepView.getStepCount() - 1) {
// 增加当前步骤。
currentStep++;
// 在下方行继续步骤视图。
stepView.go(currentStep, true);
} else {
// 在下方行将步骤视图设置为 true。
stepView.done(true);
}
// 在下方行检查最后一步。
if (currentStep == stepView.getStepCount() - 1) {
// 如果到达最后一步，则显示下面的 toast 消息。
Toast.makeText(MainActivity.this, "Application ready for release..", Toast.LENGTH_SHORT).show();
}
}
});
// 添加返回按钮的点击监听器
backBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在下方检查步骤。
if (currentStep > 0) {
// 减少当前步骤。
currentStep--;
}
// 在下方将步骤视图添加到"完成"状态。
stepView.done(false);
// 在下方将步骤视图设置为"继续"。
stepView.go(currentStep, true);
}
});
// 在下方设置步骤视图的步骤。
stepView.setSteps(steps);
}
}
说明 - 在上面的代码中，我们首先创建了按钮、步骤视图和一个用于存储用户当前所在步骤的变量。现在我们来看一下 onCreate 方法。这是每个 Android 应用程序的默认方法。此方法在应用程序视图创建时调用。在此方法中，我们设置内容视图，即名为 activity_main.xml 的布局文件，并从该文件设置 UI。在 onCreate 方法中，我们使用在 activity_main.xml 文件中指定的 ID 初始化步骤视图和按钮。之后，我们创建一个字符串数组列表，用于指定在步骤视图或流程布局中显示的步骤。
之后，我们为步骤视图添加一个点击监听器，这样当用户点击步骤视图中的任何步骤时，我们都会针对该特定步骤显示一条提示消息。之后，我们为下一步按钮添加一个点击监听器。在此方法的点击监听器中，我们首先检查当前步骤变量，然后将步骤视图移至下一步，并增加当前步骤变量。之后，我们检查当前步骤是否已到达最后一步。如果到达最后一步，我们将再次显示一条提示消息，表示已到达最后一步，应用已准备好部署。
之后，我们为后退按钮添加一个点击监听器。在点击方法中，我们检查当前步骤是否大于 0，如果大于，则减少当前步骤变量，然后继续步骤视图。最后，我们将步骤数组列表添加到步骤视图中。
添加上述代码后，只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意− 确保您已连接到真实设备或模拟器。
输出
结论
在上文中，我们探讨了如何在 Android 应用程序中创建类似流式布局的功能。
