首页 安卓& Kotlin Tutorials

视觉反馈:开奖结果3d框,小吃店和吐司

向用户提供视觉反馈非常重要。在本教程中,您将学习“开奖结果3d框”,“小吃店”和“吐司”。

4.8/5 4个评分

  • Kotlin 1.4,Android 4.1,Android Studio 4.2

您是否曾经轻按过按钮并想知道“这项工作成功了吗?”或“这有什么作用吗?”盯着不变的屏幕?您的移动应用是与用户互动的产品。来回反馈对于实现所需功能至关重要。必须准确告知应用程序用户想要执行什么操作(通过与界面的交互),并且用户需要确认已执行了所需的操作。提供反馈有助于建立信任,提高用户信心,并使您的应用程序更易于使用。

有几种方法可以帮助建立这种信心,例如使用简单的触摸状态向用户显示应用程序已在按钮上注册了他们的点击,进度指示器以确保用户在幕后正在发生事情或向用户发送确认消息。确认操作已完成。单独地,这些都是可以添加到您的应用程序中的相对较小的内容,结合使用后,它们可以为用户提供更好,更轻松的体验。

在本教程中,您将学习如何:

  • 使用多种 开奖结果3d方块 显示不同类型的信息
  • 节目 触摸状态进度指标 确保用户可以正常使用该应用程序
  • 向用户提供快速更新 小吃店敬酒
注意:本教程假定您具有Kotlin,Android和Android Studio的基本知识。如果您不熟悉Android开发或尚未安装Android Studio,请参考这些 开始Android开发 教程。

入门

首先,使用 下载资料 本教程顶部或底部的按钮。

在Android Studio中打开项目,并熟悉文件。然后在设备上构建并运行它,以查看应用程序的外观。

用于提供视觉反馈和水果列表的屏幕。

在水果沙拉应用程序中提供视觉反馈

该应用程序具有单个屏幕。垂直对齐三张卡片,每种水果一张:香蕉,橙子和酸橙。每个显示在水果名称和添加数量旁边的图像。第四张卡片实际上是一个包含“神秘水果”字样的按钮。稍后,您将学习如何在用户点击此按钮时显示带有额外水果项目的开奖结果3d框。

卡的下面是三个按钮。最初,这些按钮没有任何作用,但是在本教程中,您将向它们添加以下功能。

窃听 加水果 显示添加水果的开奖结果3d框。数量值将在相应的水果卡上更新,并且小吃店会确认添加了哪个水果,并为用户提供了一个选项:如果用户意外选择了错误的水果,则可以撤消操作。

窃听 复制清单 将水果及其数量的列表保存到设备上的剪贴板。 Toast向用户提供确认反馈。

窃听 清晰的列表 将所有水果数量重置为零。由于这是不可逆的操作,因此会出现一个开奖结果3d框,提示用户确认他们愿意继续进行。

听起来很适合一个屏幕,但是每个开奖结果3d框和通知都只是暂时出现。它们只占屏幕的一小部分,但效果却很强大!

注意:本教程的示例项目已经设置为使用Material Components。要在自己的应用中使用它们,请添加 Android的材料组件 对项目gradle文件的依赖。看着那(这 GitHub上的Material Components repo 详细步骤。

Android机器人会构建一堵墙(代表Android组件)。

触摸状态

通常,当您按下物理按钮时,您会感觉到它在手指的作用力下移动,并在卡住时听到喀哒声。这些几乎不能保证该按钮已完全按下并且可以正常工作。制作数字产品时,您需要考虑提供相同类型的反馈。

在Android中,执行此操作的标准方法是在用户可以与之交互的任何事物上提供触摸状态。这意味着,当用户触摸按钮时,应用会通过更改背景颜色来确认已注册了触摸。当用户松开手指时,颜色恢复正常,有时会产生波纹效果。请记住,触摸状态已预先内置在材料组件中。

构建并运行。现在,点击卡片和按钮以注意此行为。

单击该动画时,显示第四个按钮的背景的动画将发生变化。

当您触摸按钮时,按钮会改变颜色并产生波纹效果, 神秘水果 视图。但是,您不会在三张水果卡上看到颜色变化,因为它们没有被定义为按钮。

在项目中,打开 activity_main.xml 和 look at the MaterialCardView attributes.

屏幕快照,其中包含MaterialCardView属性列表。

的 card with ID card_mystery has two extra attributes defined: clickablefocusable. This tells the component that the card will handle clicks, so the touch state is automatically added.

开奖结果3d方块

开奖结果3d框是小的多功能窗口,覆盖在屏幕主要内容上方。它们对于从用户获取所需的输入或使用户了解重要事件很有用。但是,它们会阻止其余的内容,并可能打乱或引起用户的注意。因此,应该使用开奖结果3d框 谨慎地 和故意的。在某些情况下,最好考虑重新设计以使用溢出菜单或快餐栏,您稍后将学习如何做。

各种类型的开奖结果3d框可以满足不同的用例。材料组件库提供对三种主要类型的支持:

  • 简单开奖结果3d:显示标题和项目列表。此开奖结果3d框没有任何按钮。而是在选择一个项目时触发该动作。
  • 确认开奖结果3d框:设计上与简单开奖结果3d框相似,最多增加了两个按钮:正向和中性。这种类型的开奖结果3d框可以选择多个项目,并且在用户按下肯定按钮之前不会触发动作。
  • 警报开奖结果3d框:具有可选的标题,消息和最多三个按钮:肯定,否定和中性。当应用要求用户做出决定或确认他们已阅读重要信息时,将使用此开奖结果3d框。
注意:材料组件库还提供 MaterialTimePickerMaterialDatePicker 用于创建特定Picker类型开奖结果3d框的类。

除了“材料组件”开奖结果3d框的实现外,您还可以使用以下方法将自己的自定义布局添加到开奖结果3d框中 开奖结果3d片段.

使用MaterialAlertDialogBu​​ilder

MaterialAlertDialogBu​​ilder 提供了几个用于设置开奖结果3d框的功能。只要应用程序使用Material主题,构建器就会使用当前应用程序主题中定义的任何颜色或形状创建一个Android AlertDialog。使用此构建器可以创建在“材料组件”库中定义的任何开奖结果3d框。

构建器允许您将方法链接在一起。最常用的方法允许您使用单击侦听器添加标题,消息和按钮。请记住,并非所有方法都可以在同一开奖结果3d框中一起使用。例如,使用该构建器不可能同时显示消息和可选项目列表的开奖结果3d框。您可以在 官方文件.

要使用构建器,您需要先导入它。将以下导入语句添加到以下内容的顶部 MainActivity.kt:

import com.google.android.material.dialog.MaterialAlertDialogBu​​ilder

简单开奖结果3d

现在,您将显示一个简单开奖结果3d框,当用户点击时显示三个水果选项 加水果。该开奖结果3d框允许选择 项目。在项目中,打开 MainActivity.kt 和 find a click listener for the button with ID button_add.

该代码包含ID为button_add的按钮的点击侦听器。

您会看到点击 加水果 executes showAddFruitDialog(). Replace TODO in this function 使用以下代码:

MaterialAlertDialogBu​​ilder(this)
   .setTitle(resources.getString(R.string.dialog_add_fruit_title))
   .setItems(fruitItems) { dialog, selectedFruitItem ->
     updateFruitQuantity(selectedFruitItem, true)
     dialog.dismiss()
     showSnackbar(selectedFruitItem)
   }
   .show()

This creates an instance of MaterialAlertDialogBu​​ilder 和 sets a title for the dialog from the string resources. It populates setItems() with the list of fruits stored in the fruitItems value, 和 within the lambda it defines the click listener for when a dialog item is tapped. Here, the quantity of the selected item is updated, then the dialog is dismissed. 的 last line of the click listener calls showSnackbar(selectedFruitItem). This function has not yet been implemented, but you’ll address it later in the tutorial. Finally, show() displays the newly created dialog.

构建并运行。点按 加水果 查看“简单开奖结果3d框”的外观并选择一个水果项目。相应的数量值将按预期增加,并且开奖结果3d框消失。您也可以通过点击开奖结果3d框外部来关闭开奖结果3d框而不更新水果项目。

弹出开奖结果3d框的动画,用户在开奖结果3d框列表中选择第一项。

When building your own app, if you want to disable dismissing a dialog without selecting 一 of the items in a list, chain setCancelable(false) on the dialog builder.

确认开奖结果3d框

简单开奖结果3d框非常适合快速添加单个项目,但是如果您希望允许用户一次添加多种水果, 确认开奖结果3d框 比较合适。确认开奖结果3d框可以配置为允许 项目选择。它还要求用户在执行操作之前确认他们的选择。

Now, you’ll implement the 确认开奖结果3d框. Find showAddFruitDialog() 和 add the following line at the top:

val checkedItems = booleanArrayOf(false, false, false)

该行创建一个布尔数组来保存每个水果项目的状态。最初,它们都不会被选中。

然后,替换以下行:

.setItems(fruitItems) { dialog, selectedFruitItem ->
     updateFruitQuantity(selectedFruitItem, true)
     dialog.dismiss()
     showSnackbar(selectedFruitItem)
   }

这些行:

.setNeutralButton(resources.getString(R.string.dialog_cancel)) { dialog, _ ->
      dialog.cancel()
    }
.setPositiveButton(resources.getString(R.string.dialog_add_fruit_positive_button))
    { dialog, _ ->
      checkedItems.forEachIndexed { fruitItem, isChecked ->
        if (isChecked) updateFruitQuantity(fruitItem, true)
      }
      dialog.dismiss()
    }
.setMultiChoiceItems(fruitItems, checkedItems) { _, position, checked ->
      checkedItems[position] = checked
    }

You used the existing MaterialAlertDialogBu​​ilder to create a dialog, 和 now, besides a title, the builder sets two buttons:

  • 中性按钮,在点击时取消开奖结果3d框
  • 一个带有单击侦听器的肯定按钮,该按钮可循环显示选中的项目,如果已​​选择,则更新水果数量,然后关闭该开奖结果3d框

setMultiChoiceItems() takes the lists of items 和 states to display the options inside the dialog. When implementing this in your own app, if you want to restrict item selection to 一 item at a time, replace this method with setSingleChoiceItems().

的 click listener here updates the checkedItems array with the new checked state of the item. This keeps the list of states up to date for when the positive button is pressed.

构建并运行。再次点击 加水果,这一次查看“确认开奖结果3d框”的外观和行为。

带有确认开奖结果3d框的动画。

警报开奖结果3d框

现在,您已经有了一个允许用户添加水果的开奖结果3d框,您还需要提供一种清除用户列表的方法。清除列表将是不可逆的操作,因此您需要添加保护措施以防止用户意外执行此操作。警报开奖结果3d框非常适合此用例,因为它使您可以显示有关操作后果的一些额外信息。然后,用户可以确认自己希望继续,也可以在为时已晚之前退出。

和以前一样 MainActivity.kt, find the button with ID button_clear, which already has a click listener set. On tap, it calls showClearListConfirmationDialog().

具有一个TODO的空showClearListConfirmationDialog方法的代码。

Replace TODO in this function with the following:

MaterialAlertDialogBu​​ilder(this)
   .setTitle(resources.getString(R.string.dialog_clear_list_title))
   .setMessage(resources.getString(R.string.dialog_clear_list_message))
   .setNeutralButton(resources.getString(R.string.dialog_cancel)) { dialog, _ ->
     dialog.cancel()
   }
   .setNegativeButton(resources.getString(R.string.dialog_negative_button)) { dialog, _ ->
     dialog.dismiss()
   }
   .setPositiveButton(resources.getString(R.string.dialog_clear_list_positive_button
)) { dialog, _ ->
     updateFruitQuantity(null, false)
     dialog.dismiss()
   }
   .show()

Again, you’re using the MaterialAlertDialogBu​​ilder to create 和 show the dialog. It has a title, message, 和 neutral, negative 和 positive buttons. 的 positive button has a click listener that clears the fruit quantities before dismissing the dialog. It’s good practice to give the positive button a label that describes the action, if possible, to increase clarity 和 ease of use.

Both the neutral 和 negative button click listeners close the dialog. dialog.cancel()dialog.dismiss() do very similar actions, but each can have a different listener attached, so they might have different behaviors according to how you chose to implement them. 的 most common practice is that dialog.dismiss() is called when the dialog finishes its job 和 removes it from the screen, 和 dialog.cancel() is called when the user performs an action to close the dialog.

构建并运行。点按 清晰的列表 显示开奖结果3d框。

带有“警报”开奖结果3d框的动画。

自定义开奖结果3d框

有时,您可能想向用户显示一个更加独特或复杂的开奖结果3d框。通过创建自定义开奖结果3d框,您可以定义自己的布局以显示在开奖结果3d框的主要内容区域中。

Android机器人使用“心眼”表情符号生成自定义布局。

要创建“自定义开奖结果3d框”,请打开 dialog_fruit.xml. This simple layout contains a TextView 和 an ImageView.

dialog_fruit.xml中的T​​extView和ImageView。

To implement the custom layout in a dialog, you need to extend 开奖结果3d片段() 和 override onCreateDialog(). 在项目中,打开 CustomFruitDialog.kt. You’ll see already declared onCreateDialog() which isn’t doing anything custom right now. But that’s about to change. Replace:

super.onCreateDialog(savedInstanceState)

使用以下代码:

activity?.let {
 val inflater = it.layoutInflater
 AlertDialog.Builder(it)
     .setView(inflater.inflate(R.layout.dialog_fruit, null))
     .setPositiveButton(R.string.dialog_fruit_close) { _, _ ->
       listener?.onDialogButtonClicked()
     }
     .create()
} ?: throw IllegalStateException("Activity cannot be null")

This code first checks that 开奖结果3d片段 has Activity into which it can be inflated, 和 throws an error if Activity is null. In this case, the app wouldn’t be able to display the dialog on the screen.

This time, the code uses the 安卓AlertDialog.Builder class directly to create the custom dialog. setView() inflates the custom layout into the dialog, 和 setPositiveButton() makes use of the standard dialog buttons. You aren’t required to use the dialog buttons if your custom layout has its own built in.

的 positive button’s click listener calls onDialogButtonClicked() from a custom interface, which has not yet been defined.

自定义接口的代码称为Listener。

In the same file, find the Listener interface 和 add the following code in place of TODO:

fun onDialogButtonClicked()

您可以在希望显示此自定义开奖结果3d框的任何类中实现此接口方法。这样,您可以根据开奖结果3d框显示位置的上下文来更改肯定按钮的行为。

显示自定义开奖结果3d框

现在,您需要显示开奖结果3d框。回去 MainActivity.kt 和 find the card with ID card_mystery. This card already has a click listener assigned that calls loadSurpriseDialog(), which has not yet been implemented.

带有空的loadSurpriseDialog方法的代码。

Add the following code in loadSurpriseDialog():

CustomFruitDialog().apply {
 listener = object : CustomFruitDialog.Listener {
   override fun onDialogButtonClicked() {
     dismiss()
   }
 }
}.show(supportFragmentManager, TAG_FRUIT_DIALOG)

This creates an instance of your newly defined CustomFruitDialog, implements the click listener to dismiss the dialog 和 shows the dialog.

构建并运行。点按 神秘水果 卡以查看自定义开奖结果3d框。

“自定义”开奖结果3d框显示了神秘的水果:梨。

进度指标

用户与您的应用进行交互时,通常会出现短暂的延迟。也许应用程序需要向服务器发出请求,然后等待它返回填充屏幕上的字段所需的信息。也许它需要从数据库检索数据并进行一些快速处理以过滤掉不相关的条目。这些任务可能只需要几秒钟,但是如果没有任何迹象表明该应用程序在后台运行,则用户可能会想知道该应用程序是否还在运行。

这是进度指示器的用处。它们在屏幕上用移动指示器填充时间,使用户确信应用程序已注册请求并正在处理该请求。

一个沙漏。

增加延迟

Imagine your app must call a server before it can show the mystery fruit. It could take a couple of seconds to get the result. Use Handler to force a delay before showing the dialog, emulating the real-world example.

In the project, navigate to loadSurpriseDialog() in MainActivity.kt. Wrap your existing CustomFruitDialog implementation 使用以下代码:

Handler(mainLooper).postDelayed(Runnable {
  // Your existing CustomFruitDialog() implementation
}, DELAY)

This code uses Handler to execute the Runnable block after the defined delay. DELAY is a constant defined in the companion object at the bottom of the file. It is currently set to 2,000 milliseconds (two seconds).

构建并运行。点按 神秘水果 卡。您会注意到,没有任何进展的迹象,即使是两秒钟也可能会感觉很长,足以让您开始怀疑是否应该点击按钮重试。

在显示“神秘水果”开奖结果3d框之前有延迟的动画。

添加进度指示器

要添加进度指示器,您需要在XML文件中声明它。打开 activity_main.xml 和 replace TODO: add progress bar with this:

<ProgressBar
 和roid:id="@+id/progress"
 style="@android:style/Widget.Material.Light.ProgressBar.Large.Inverse"
 和roid:layout_width="wrap_content"
 和roid:layout_height="wrap_content"
 和roid:visibility="gone"
 app:layout_constraintBottom_toTopOf="@id/button_add"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@id/card_mystery" />

This adds a Progress Bar, which displays as a circle by default. This view has 和roid:visibility="gone", so it’s initially hidden 和 you can choose when to show it from the code.

注意:材质组件的Android实现 进度指标 仍在计划中。留意 官方发行说明 保持更新。

Although the Material Component is not available in a stable channel yet, you can still use Material styles to keep the theme consistent. If you wanted to show a horizontal bar instead, you could set a style such as “@android:style/Widget.Material.Light.ProgressBar.Horizontal”.

Find loadSurpriseDialog() in MainActivity.kt。将以下行添加到函数的开头:

progress.visibility = View.VISIBLE

这使进度条在屏幕上可见。默认情况下,进度条是不确定的,因此一旦可见,进度条将一直旋转直到被隐藏。将以下内容添加到Runnable块的顶部:

progress.visibility = View.GONE

一旦延迟过去,这将再次隐藏进度条。您的代码如下所示:

带有用于隐藏和显示进度条的代码的loadSurpriseDialog方法。

构建并运行。点按 神秘水果 卡。现在,您将看到指示灯,并且可以放心,该应用程序已注册了按钮点击并可以完成您的请求。

在打开带有神秘水果的开奖结果3d框之前显示进度条的动画。

小吃店

小吃栏是一个有用的小面板,它弹出屏幕底部以向用户显示一小段反馈。它可以一直持续到被用户关闭为止,或者显示一段时间。小吃店还可以显示一个可选按钮,以在点击时触发操作。

Earlier in the tutorial, you added a 简单开奖结果3d to let the user add a fruit item. You might remember that you replaced setItems() when you added the 确认开奖结果3d框. Now, you’ll revert this to show the 简单开奖结果3d again.

Replace the following code in showAddFruitDialog():

.setNeutralButton(resources.getString(R.string.dialog_cancel)) { dialog, _ ->
      dialog.cancel()
    }
.setPositiveButton(resources.getString(R.string.dialog_add_fruit_positive_button))
    { dialog, _ ->
      checkedItems.forEachIndexed { fruitItem, isChecked ->
        if (isChecked) updateFruitQuantity(fruitItem, true)
      }
      dialog.dismiss()
    }
.setMultiChoiceItems(fruitItems, checkedItems) { _, position, checked ->
      checkedItems[position] = checked
    }

这些行:

.setItems(fruitItems) { dialog, selectedFruitItem ->
     updateFruitQuantity(selectedFruitItem, true)
     dialog.dismiss()
     showSnackbar(selectedFruitItem)
   }

As you can remember, the item click listener is already set up to call showSnackbar(). Your code now looks like this:

该代码为Snackbar准备了实现。

添加小吃店

当用户从开奖结果3d框中选择水果时,开奖结果3d框将关闭并且数量将更新。用户可能没有注意到数量值的变化,或者可能不小心点了错误类型的水果。在这两种情况下,小吃店都可以通过以确认消息的形式显示反馈并提供“撤消”操作来向用户提供信息和保证。

现在打开 MainActivity.kt 和 find showSnackbar().

带有空的showSnackbar方法的代码。

Replace TODO in showSnackbar() with the following:

val snackbarText = getString(R.string.snackbar_fruit_added, fruitItems[selectedFruitItem])
Snackbar.make(layout_main, snackbarText, Snackbar.LENGTH_LONG)
   .setAction(R.string.snackbar_undo) {
     updateFruitQuantity(selectedFruitItem, false)
   }
   .show()

First, this code creates the string value snackbarText. Here, it uses the position of the selected fruit item from the dialog to get the 名称 from the list of fruits. This 名称 is then inserted into the string resource value for the Snackbar to display.

Snackbar.make() creates a Snackbar with a parent view from which the Snackbar can find an ancestor ViewGroup in which to display itself, the text to be displayed 和 how long to display it. 的re are three default options: LENGTH_LONG, LENGTH_SHORTLENGTH_INDEFINITE.

注意: If you want to include other Material Components in your layout, such as a FloatingActionButton, it’s recommended to use a CoordinatorLayout as the container for your screen layout. This allows the system to handle moving the other components up the screen when displaying the Snackbar 和 provides extra swipe-to-dismiss functionality.

In this case, you want to show an 撤消 action. setAction() takes the string for the button, 和 a click listener which resets the previously updated fruit quantity value.

Finally, show() displays the Snackbar on the screen.

构建并运行。点按 加水果 然后从开奖结果3d框中选择一个水果项目。小吃栏出现在屏幕底部。如果点击 撤消,您会看到数量相应减少。

显示Snackbar的动画。

敬酒

开发人员可以在自己的Android应用中使用Toast已有很长时间了。它们是弹出消息的最简单形式,它不显眼且短暂,可以环绕其内容并显示在屏幕底部。

如果您需要在消息旁边执行某项操作,或者要确保该应用在发生该操作的同一UI中显示该消息,则可以在Snakebar之上选择Snackbar。

该示例项目包含一个 复制清单 按钮,可将水果列表及其数量保存到设备上的剪贴板。您可以显示一个简单的Toast,以向用户确认该应用程序已成功保存了内容。

在项目中,打开 MainActivity.kt. 的 button with ID button_copy already has a click listener, which calls saveToClipboard(). This method handles saving the text to the clipboard, then calls showToast(). Here, you’ll add code to display the Toast.

空的showToast方法的代码。

添加以下代码:

Toast.makeText(this, R.string.toast_copied_to_clipboard, Toast.LENGTH_LONG).show()

这将使用提供的字符串创建Toast并显示多长时间。

构建并运行。点按 复制清单,您会看到Toast出现在屏幕底部。

显示吐司的动画。

然后去哪儿?

通过单击下载最终项目 下载资料 在本教程的顶部或底部。

现在,您已经了解了可以提供有用的警报和提示以改善用户对您的应用程序体验的几种不同方式。

如果您想继续尝试,可以在许多方面进行其他自定义。例如,您可以尝试更改Snackbar的主题以更改应用程序的外观。材料组件文档中有很多建议 主题化。或者,您可以尝试使用动画添加自己的自定义触摸响应和加载指示器。从开始 Google指南 寻找灵感。

还有更多关于开奖结果3d框的知识。为什么不尝试添加 MaterialTimePicker 要么 MaterialDatePicker 到您的应用程序,以了解它们如何工作。您也可以尝试创建另一个具有更复杂布局的自定义开奖结果3d框。

安卓robot dances.

希望您学到了很多东西,并且在旅途中玩得开心。如果您有任何意见或疑问,请加入下面的论坛讨论。

平均评分

4.8/5

为此内容添加评分

4个评分

更像这样

贡献者

评论