如何在安卓系统中为底部导航栏添加一个浮动的动作按钮

DebugUsery
475 阅读4分钟

在安卓系统中为底部导航栏添加一个浮动的动作按钮

触发动作是设计Android应用程序时需要考虑的一个关键因素。在大多数情况下，按钮有助于实现这一目的。

复合按钮（compoundButton）、切换按钮（ToggleButton）和单选按钮（RadioButton）等按钮在Android应用程序中经常使用。

在本教程中，我们将讨论浮动动作按钮，它用FAB来表示。

浮动动作按钮与其他用户界面元素不同。它们是圆形的，有集中的图标，出现在其他屏幕内容之上。这些按钮鼓励用户采取一系列的行动，比如在待办事项列表中添加一个项目。

常见的浮动动作按钮类型有。

  • Regular FAB- 这种类型的浮动操作按钮没有任何扩展，是标准尺寸。
  • Mini FAB - 这种形式的FAB用于小屏幕上。
  • Extended FABs - 这种类型的按钮比较大，有文本标签嵌入其中。

前提条件

要跟上本教程，你需要。

  • 对[Kotlin]编程语言有一些基本了解。
  • 对Android开发的基础知识有基本了解。

目标

在本教程结束时，读者将了解如何使用材料设计组件，如何创建一个底部导航栏，以及如何添加一个浮动动作按钮。

我们最终的用户界面应该如下所示。

UI

第1步 - 创建一个新项目

要在Android Studio中创建一个新的项目，进入文件>新建>新项目>空活动，如下图所示。

Creating a project

给项目起一个描述性的名字，如FloatingActionButton，然后选择Kotlin作为你的首选编程语言。最后，点击 "完成"来完成该项目。

第2步--添加Material设计的依赖项

要添加Material design的依赖性，请导航到app级别的build.Gradle文件。在插件下，添加id 'kotlin-android-extensions ，然后在依赖项下，添加如下所示的Material design依赖项，然后点击同步。

implementation 'com.google.android.material:material:1.3.0-alpha03'

第3步 - 为BottomNavigationView创建一个菜单

要创建一个Android资源文件，请导航到res目录并创建一个新的Android资源文件。

选择菜单作为你的首选资源类型，并给一个描述性的文件名，如bottom_menu_nav ，然后点击OK。使用下面的代码来组装你的菜单。

<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">  

      <item android:id="@+id/bnbMenuHome"  
      android:title="Home Icon"  
      android:icon="@drawable/ic_home_bnb"/>  
      
      <item android:id="@+id/bnbMenuSearch"  
      android:title="Search Icon"  
      android:icon="@drawable/ic_search_bnb"/>  
      
      <item android:id="@+id/bnbMenuPerson"  
      android:title="Profile Icon"  
      android:icon="@drawable/ic_person_bnb"/>  
      
      <item android:id="@+id/bnbMenuSetting"  
      android:title="Setting Icon"  
      android:icon="@drawable/ic_settings_bnb"/>  
  
</menu>

第4步 - 导入图标

让我们为我们的BottomNavigationView添加一些图标。我们将使用五个图标，四个用于我们的BottomNavigationView，一个用于我们的浮动动作按钮。

要做到这一点，请浏览res目录，右键单击 drawable，然后从菜单中选择新建>矢量资产。

Icons

继续前进到剪贴画图标，然后点击它。搜索一个主页图标，然后选择它，并将名称改为ic_home_bnb。最后，点击下一步和完成来完成这一过程。

按照同样的程序，添加其余的搜索、人物、设置和添加图标。

注意：你可以添加最适合你需要的图标。

第5步 - 用FAB设计用户界面

用户界面允许用户与应用程序进行互动。拥有一个吸引人的用户界面设计是至关重要的。在我们的案例中，应用程序的界面应该如下所示。

UI

浮动动作按钮的背景应该与应用程序的配色方案形成对比。我们可以通过使用color accent 属性定制按钮的颜色来实现这一点。

注意：一个BottomNavigationBar 可以包含一个任务或组件。然而，建议至少包括三个目标图标。

第6步 - 应用所需的主题

我们使用主题组件来改变我们应用程序的外观。在res目录内，导航到value文件夹，然后到theme/style.xml文件。

将父主题从Theme.MaterialComponents.DayNight.DarkActionBar 改为Theme.MaterialComponents 。

我们还需要删除应用于BottomNavigationBar 的阴影，在MainActivity.kt 文件中添加以下代码。

bottomNavView.background = null

第7步 - MainActivity.kt类

下面的底部导航代码和浮动按钮实现应该包含在MainActivity.kt文件中，如下图所示。

class MainActivity : AppCompatActivity() {   
    //declare a variable  
  private lateinit var floatingActionButton: FloatingActionButton  
  
    override fun onCreate(savedInstanceState: Bundle?) {  
      super.onCreate(savedInstanceState)  
      setContentView(R.layout.activity_main)  
  
      bottomNavView.background = null  //Removing the background shadow
      bottomNavView.menu.getItem(2).isEnabled = false  
  
      //creating a toast  
      floatingActionButton = findViewById(R.id.fab)  
      floatingActionButton.setOnClickListener { 
         //showing a toast message when clicked 
         Toast.makeText(this, "FloatingActionButton Clicked", Toast.LENGTH_SHORT).show()  
      }  
  }  
}

结语

在本教程中，我们讨论了Android中不同类型的浮动动作按钮。

我们还学习了如何创建一个底部导航栏并将浮动动作按钮纳入其中。

avatar
文章
阅读
粉丝