iOS 中的 UIBarButtonItem2025年3月17日 | 阅读 8 分钟 在 iOS 应用开发中,我们经常使用工具栏和标签栏作为用户界面的重要组成部分,以方便导航。在工具栏和标签栏中添加按钮是一个好主意,因为它简化了导航,并且应用中大多数重要屏幕都可以一站式访问。 为此,Apple 为我们提供了用于放置在工具栏和标签栏上的专用按钮,即 UIBarButtonItem 类。该类的语法如下。 在 iOS 应用中,我们可以通过使用 Interface Builder 中的对象库来添加 UIBarButtonItem。但是,我们也可以通过编程方式创建 UIBarButtonItem。我们可以通过向 UIBarButtonItemApperance 发送 setter 消息来定制按钮的外观。我们还可以使用标准的 UINavigationItem 对象(backBarButtonItem、leftBarButtonItem、rightBarButtonItem)或 UIToolbar 实例中的自定义按钮。 在本教程中,我们将讨论如何在 iOS 应用中通过编程方式和使用 Interface Builder 来添加 UIBarButtonItems。我们还将讨论如何为 Bar Button Items 添加操作,以便在用户对按钮执行事件时执行特定操作。 使用 Interface Builder 添加 UIBarButtonItem让我们创建一个名为 BarButtonExample 的 XCode 项目,如下所示。 ![]() 创建 XCode 项目完成后,打开 Main.storyboard 文件,并将当前 View Controller 嵌入导航控制器,以便为 View Controller 添加导航栏,如下所示。 ![]() 将 View Controller 嵌入导航控制器后,我们将看到导航栏位于 View Controller 的顶部,如下所示。 ![]() 现在,我们的任务是自定义 View Controller 的导航栏。我们可以随时选择导航栏,并在 XCode 中查看“Attribute inspector”(属性检查器)来配置我们的导航栏。我们可以根据需要设置标题、tint color、bar tint color 等。 要在 View Controller 中添加一个 bar button item,我们需要在 Object Library 中搜索它,然后将其拖到导航栏上,如下所示。 ![]() 我们还可以使用 XCode 中的 Attribute Inspector 来定制 Bar Button item。Attribute Inspector 中为 bar button item 提供的选项如下图所示。 ![]() 在这里,我们可以设置 bar item 的标题和图像。XCode 提供了各种系统项作为 bar button items,如 Add、More 等。在此示例中,我们创建了一个 bar button item 来向列表添加项。 在示例中,我们在 View Controller 中添加了 bar button item,以及导航栏的标题。如果在模拟器上运行该应用程序,显示如下。 ![]() 如果我们单击导航栏上的“add”按钮,将不会发生任何事情。这是因为我们还没有在 ViewController.swift 文件中为“add”按钮添加任何操作。 让我们为 View Controller 中的“add”按钮创建一个操作,如下所示。 ![]() 现在我们已经为“add”按钮添加了操作 Outlet,完成这个项目。我们的项目将显示车辆列表,以及它们的容量和车辆类型。我们提供了选项,允许用户在需要时向列表中添加任何车辆。 让我们在 Main.storyboard 中向 View Controller 添加一个 tableview,以向用户显示列表。 ![]() 我们的 ViewController 现在包含一个 TableView,该 TableView 进一步包含一个 TableViewCell 来显示上图中显示的车辆数据。让我们在 View Controller 中实现 tableview 的 Delegate 和 DataSource 方法来显示列表。 在 ViewController.swift 中添加以下代码。 ViewController.swift 上面的代码正确地完成了所有操作,即它实现了 TableView Delegate 和 DataSource 方法以在 tableview 中显示列表。它还创建了一个 Vehicle 对象的数组,该数组将用作 DataSource 数组。但是,由于 VehicleModel 数组是空的,并且应用程序中还没有任何数据,因此应用程序将不会显示任何内容。 VehicleModel 的代码如下。 VehicleModel.swift 让我们创建一些 VehicleModel 的实例,并将它们添加到我们的 DataSource 数组 Vehicles 中。 将以下代码添加到 viewDidLoad(:) 方法中。 一旦我们将上面的代码添加到 viewDidLoad(: ) 中,我们将在模拟器上运行我们的应用程序。 它将显示应用的 Home Screen,如下所示。 ![]() 现在,让我们向项目中添加另一个 View Controller,名为 AddVC,它将提示用户添加具有特定编号、类型和容量的另一辆车。 为此,从对象库中向 storyboard 添加一个 ViewController,并添加 textfields 和 submit 按钮,以便用户可以输入车辆信息并提交。 ![]() 让我们创建一个新的 UIViewController 子类 AddVC,并将其分配给 storyboard 中新创建的 View Controller。 将以下代码添加到 AddVC 中。 让我们当用户在 Home View Controller 上单击 Add 按钮时呈现此 View Controller。为此,在 ViewController 的 clickedAddBtn() 方法中添加以下代码。 我们已准备好再次在模拟器上运行我们的应用程序。单击 home view controller 上的 add 按钮后,将显示以下屏幕。 ![]() 用户输入信息并单击 submit 后,我们的应用程序应返回 Home Screen。我们还应该查看 Home Screen 上显示的车辆列表中的已添加车辆。 为了进行导航,让我们创建协议 AddVCDelegate,其中包含 clickedSbmtBtn(vehicleData:VehicleModel),如下所示。 我们需要在 AddVC 中创建一个 AddVCDelegate 类型的属性,它将调用 clickedSbmtBtn() 方法。 将以下属性添加到 AddVC 中。 还将以下代码添加到 Submit 按钮的操作 Outlet 中。 我们需要创建我们 Home View Controller 的一个扩展,该扩展符合 AddVCDelegate 协议。此外,我们还需要定义 clickedSbmtBtn() 方法,如下所示。 除非我们将 AddVC 实例的 delegate 属性分配给 self,否则上述代码将无效,如下所示。 现在,我们已经完成了应用程序的任务。让我们运行应用程序并在模拟器中查看该应用程序。 ![]() 现在,单击 submit,然后查看 tableview 是否已更新。 ![]() 应用程序的完整代码如下。 ViewController.swift AddVC.swift VehicleModel.swift VehicleTableViewCell.swift 以编程方式创建 UIBarButtonItem与其将其添加到 Storyboard 中,不如创建 UIBarButtonItem 类的实例,并将其添加到我们的导航栏中,如下所示。 |
我们请求您订阅我们的新闻通讯以获取最新更新。