如何在安卓系统中创建一个自定义的步枪表格

DebugUsery
165 阅读5分钟

在安卓系统中创建一个自定义步进形式

在Android应用程序中创建表单时，你可能想在可用的屏幕空间内展示所有的信息。这种方法有点麻烦，因为不是所有的东西都能放在一个屏幕上。

为了提高一致性，改善用户界面，并使应用程序更具互动性，我们实现了一个步进器。

前提条件

要跟上进度。

  • 确保你安装了Android Studio。
  • 你需要充分了解如何创建和运行Android应用程序。
  • 需要了解Kotlin编程语言和ViewBinding 。

目标

在本教程结束时，读者将能够。

  • 理解什么是步进式表格。
  • 知道步进形式的各种应用。
  • 了解如何创建一个步进式表格。

简介

步进器通过一连串的逻辑和编号的步骤显示进度。它们也可以用于导航，以及在保存一个步骤时显示瞬时反馈信息。

步进器将当前屏幕划分为不同的视图，内容分布在所有的视图中。用户可以在这些视图中导航。

步进器通过显示他们所处的步骤以及他们还剩下多少步，使用户了解他们的进展。否则，由于屏幕空间有限，这可能是一个挑战。

步进器表格的应用

步进器表格可用于。

  • 贷款应用，用户需要填写大量的细节。
  • 用户在注册时，需要填写更多的信息，而这些信息又不能在一个屏幕上显示出来的应用。

在本教程中，我们将为贷款申请创建一个表单，要求用户填写姓名、地点、如何使用贷款、目前的工作细节等细节，最后在最后一个表单中填写贷款金额。

第1步 - 创建一个安卓项目

启动Android Studio并创建一个空的Android项目。

project

第2步 - 设置项目

在这一步，复制以下依赖关系，并将其粘贴到你的应用级build.gradle 文件。

dependencies {
    implementation 'com.shuhart.stepview:stepview:1.5.1'
}

第3步 - 定义步骤的标题

在res 目录中，打开string.xml ，添加以下数组。这就是将出现在每个步骤顶部的标题列表。

<array name="details">
    <item>Personal</item>
    <item>Location</item>
    <item>Usage</item>
    <item>Employment</item>
    <item>Loan</item>
</array>

第4步 - 应用程序布局

在这一点上，我们要定义一个布局，它将定义不同步骤的显示方式。

定义StepView

在res 目录中，打开你的布局文件，添加以下代码。

    <com.shuhart.stepview.StepView
    android:id="@+id/step_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:padding="8dp"
    app:sv_animationDuration="1"
    app:sv_animationType="Line"
    app:sv_doneCircleColor="@color/primaryLightColor"
    app:sv_doneCircleRadius="20dp"
    app:sv_doneStepLineColor="@color/primaryLightColor"
    app:sv_doneStepMarkColor="@android:color/black"
    app:sv_doneTextColor="@android:color/darker_gray"
    app:sv_nextStepLineColor="@color/colorGray"
    app:sv_nextTextColor="@color/colorGray"
    app:sv_selectedCircleColor="@color/primaryDarkColor"
    app:sv_selectedCircleRadius="12dp"
    app:sv_selectedStepNumberColor="@color/colorLightGrayMore"
    app:sv_selectedTextColor="@color/primaryDarkColor"
    app:sv_stepLineWidth="1dp"
    app:sv_stepNumberTextSize="12sp"
    app:sv_stepPadding="4dp"
    app:sv_stepViewStyle="@style/StepView"
    app:sv_steps="@array/details"
    app:sv_stepsNumber="3"
    app:sv_textSize="12sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

解释

在这个视图中。

  • 我们添加了属性app:sv_steps="@array/details" ，其中包含我们用字符串定义的步骤。

你可以利用不同的属性来制作一个你喜欢的外观的步长。例如，改变不同的颜色和大小属性。

定义表格布局

为了在不同的步骤中实现不同的表单，我们将创建布局并隐藏它们，然后在正确的步骤中显示它们。

我们还将在布局的底部定义一个Button 。这个按钮将被用来从一个表单导航到另一个。

个人详细资料表格

以下将是这一步的布局。

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/personal_details"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/step_view">

<!--  YOUR_VIEWS -->

</androidx.constraintlayout.widget.ConstraintLayout>

step 1

地点详情表

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/location"
    android:layout_width="match_parent"
    android:layout_height="530dp"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/step_view">

    <!-- YOUR_VIEWS -->

</androidx.constraintlayout.widget.ConstraintLayout>

step 2

使用细节表

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/usage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/step_view">

    <!-- YOUR_VIEWS -->

</androidx.constraintlayout.widget.ConstraintLayout>

step 3

就业详情表

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/employment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/step_view">

    <!-- YOUR_VIEWS -->

</androidx.constraintlayout.widget.ConstraintLayout>

step 4

贷款详情表

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/repayment"
    android:layout_width="match_parent"
    android:layout_height="600dp"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/step_view">

    <!-- YOUR_VIEWS -->

</androidx.constraintlayout.widget.ConstraintLayout>

step 5

导航按钮

最后，让我们添加一个按钮，帮助我们在这五个表格中进行导航。

<com.google.android.material.button.MaterialButton
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="64dp"
    android:padding="12dp"
    android:text="Next"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

注意：除了第一个表格，将其他表格的可见性设置为gone 。这将确保每次只有一个表格是可见的。

第5步--导航到下一步

在定义了我们的布局之后，剩下的就是给我们的MainActivity.kt ，添加一些逻辑，以帮助我们在不同的表单中导航。

定义一个变量，它将保存每个表单的位置。

private var position = 0

另外，为了确保我们的StepView总是从第一步开始，在onCreate 方法里面，添加这行代码。

binding.stepView.done(false)

接下来，我们需要在Next Button 中添加一个ClickListener ，以根据位置显示和隐藏相应的表单。

binding.button.setOnClickListener {
    when (position) {
        0 -> {
            binding.personalDetails.visibility = View.GONE
            binding.location.visibility = View.VISIBLE
            position = 1
            binding.stepView.done(false)
            binding.stepView.go(position, true)
            binding.button.text = "Next"
        }
        1 -> {
            binding.location.visibility = View.GONE
            binding.usage.visibility = View.VISIBLE
            position = 2
            binding.stepView.done(false)
            binding.stepView.go(position, true)
        }
        2 -> {
            binding.usage.visibility = View.GONE
            binding.employment.visibility = View.VISIBLE
            position = 3
            binding.stepView.done(false)
            binding.stepView.go(position, true)
        }
        3 -> {
            binding.employment.visibility = View.GONE
            binding.repayment.visibility = View.VISIBLE
            position = 4
            binding.stepView.done(false)
            binding.stepView.go(position, true)
            binding.button.text = "Submit"
        }

        else -> {
            position = 0
            binding.stepView.done(true)
            binding.stepView.go(it, true)

            // Go to another Activity or Fragment
        }
    }
}

解释

在按钮的onClickListener ，我们正在切换位置，据此，对于每个位置。

  • 我们隐藏当前的布局/表单，并使下一个表单可见。
  • 我们将位置递增到相应的布局。
  • 我们确保binding.stepView.done 是假的，这样StepView就会显示当前的步骤没有完成，除了最后一个步骤。
  • 然后，我们使StepView 到递增的位置--binding.stepView.go(position, true) 。
  • 最后，对于前三个布局，我们把Button 的文字改为 "Next"。在第四步，我们将文本改为 "提交"。

在else 部分，我们将位置设置为 "0"，并调用StepView'的done 方法。

在这个else 子句中，我们可以添加代码，将用户导航到另一个Activity 或Fragment

第6步--处理返回导航

添加一个允许用户导航到上一步的功能是很好的。为了做到这一点，我们将实现onBackPressed 方法。

override fun onBackPressed() {
    when (position) {
        0 -> {
            // exit the app
            super.onBackPressed()
        }

        1 -> {
            binding.location.visibility = View.GONE
            binding.personalDetails.visibility = View.VISIBLE
            position = 0
            binding.stepView.done(false)
            binding.stepView.go(position, true)
            binding.button.text = "Next"
        }
        2 -> {
            binding.usage.visibility = View.GONE
            binding.location.visibility = View.VISIBLE
            position = 1
            binding.stepView.done(false)
            binding.stepView.go(position, true)
        }
        3 -> {
            binding.employment.visibility = View.GONE
            binding.usage.visibility = View.VISIBLE
            position = 2
            binding.stepView.done(false)
            binding.stepView.go(position, true)
        }
        else -> {
            binding.repayment.visibility = View.GONE
            binding.employment.visibility = View.VISIBLE
            position = 3
            binding.stepView.done(false)
            binding.stepView.go(position, true)
            binding.button.text = "Next"
        }
    }
}

解说

onBackPressed:

  • 如果位置是 "0"，应用程序将退出。
  • 对于其他位置，我们隐藏当前的布局，并使前面的布局和它的位置一起可见。

就这样，你已经创建了一个可定制的Stepper表单。

总结

在本教程中，我们已经了解了什么是步进器，它有哪些应用，以及如何使用StepView 创建一个步进器表单。来吧，在你的应用程序中使用这个很棒的功能。

avatar
文章
阅读
粉丝