简单选项弹出框

您遇到了多少次需求,需要显示一个弹出窗口,该弹出窗口显示可供选择的选项列表。 在某些情况下,我们还会显示刻度线,以确定已经选择了哪个选项。

假设您创建了一个视图控制器,其中显示了要排序的选项,升序和降序以供选择。 外观如下图所示。

现在过了几天,您还需要显示一个弹出窗口,该弹出窗口显示用于选择按选项排序的选项。 我经常看到开发人员编写新的viewcontroller来显示这些选项以供选择,如下图所示。

现在,我们无需使用协议,而是可以使用协议并创建可以显示任何类型选项的通用ViewController。 此弹出窗口还将根据选项的大小和文本来调整大小。 让我们在下一部分中进行此操作。


让我们首先记下我们的要求:

  • 弹出框应显示选项对象的数组。
  • 选项将是一个对象,该对象可以提供要为该选项显示的文本,该文本的字体。 我还应说明是否选择了该选项。
  • 如果选择了一个选项,则需要显示刻度线。
  • 选择选项后,应将回调与选项对象一起发送到委托对象。
  • 显示选项的UIViewController子类应该是通用的。 我们应该能够显示任何一组选项。
  • 弹出窗口应调整为可变的文本宽度。

现在我们有了我们的要求,让我们开始编码。 让我们首先照顾最简单的部分。 让我们首先将选项对象需求转换为协议。 我们还使用协议的扩展来计算它显示的文本的大小。 它使实现保持清洁。


现在我们已经有了RBOptionItem协议,让我们在UITableViewCell上创建一个扩展,以便可以由RBOptionItem对其进行配置。 容易吧?


接下来,我们创建名为RBOptionItemListViewController的视图控制器
它执行以下操作:

  • 将tableview设置为其视图。
  • 包含RBOptionsItem的二维数组,称为item。 它使用这些项目来填充表格视图中的单元格。
  • 设置项目时计算preferredContentSize
  • 它具有可向其通知选项项目选择事件的委托对象。
  • 它还充当tableview的数据源和委托对象。
  • 它将modalPresentationStyle设置为popover类型。

这就是RBOptionItemListViewController最初显示的方式。

这里的关键部分是计算首选内容的大小。 看一下calculateAndSetPreferredContentSize()方法。 它将二维数组项展平为一维。 然后,在展平的数组上,我们调用reduce以获得弹出框所需的最大宽度。 同样,我们通过展平数组来计算选项项的最大数量,最后计算总高度和宽度,并将其设置为viewcontroller的preferredContentSize。


现在,我们在RBOptionItemListViewController上编写扩展,以使其充当表视图的数据源和委托。 在这里,我们使用项目将选项内容填充到表格视图中。 委托也用于通知选择事件。


我们的简单选项popover现在可以使用了。 让我们尝试一下。 让我们创建一个选项类型,分别选择排序顺序和排序依据。

创建一个简单的UIViewController子类,我们可以在其中进行测试。 您可以使用下面的要点自行编写。

使用此ViewController实例后,您将看到我们的弹出窗口正在按预期工作。 它是通用的,可以呈现选项项。 此处提供了此简单弹出窗口和演示的源代码。 您可以继续改进自己的实现。

到此结束本主题。 请留下您的意见,以改善这一点。

你喜欢这篇文章吗? 也许尝试以下方法之一:

  • 在Swift中使用ExpressibleByArrayLiteral简化生活
  • 驯服宽松的通知
  • 断点作为调试内容提供者
  • 使用MVVM的表格视图的POP方法