带有堆栈视图的可扩展单元

在表视图中有多种创建可扩展单元格的方法。 您很少可以在此博客或Google的某个地方轻松找到它们。 其中之一是苹果官方的“日期单元”演示代码。 但是，大多数描述都是通过直接在约束上使用操作来描述一些困难的方法。

今天，我想通过使用自iOS 9.0以来给我们提供的优势（称为UIStackView）来介绍一种更简单的方法。

我将建立一个简单的编程语言列表，并可能点击标题并显示简短描述。

设置表视图

第一步是设置表格视图。 我希望这个过程是您熟悉的familiar️。

我更喜欢将表视图数据源与主视图控制器分开，以保持代码的清洁和可维护。 为此，我创建了DataSource类，该类维护所有表视图源逻辑。

从数组中检索数据（例如在单元格上显示）的通用模式是这样的： items [indexPath.row] ，我想简化此过程，因此我编写了对数据源类的简单扩展：

“ ProgrammingLanguage”只是一个表示表示单元格中显示的数据（图像，标题和描述）的结构。 您可以从我的GitHub页面（下面的链接）下载整个项目。

设置单元

前面的步骤是iOS表格视图的典型步骤； 现在我们将创建我们的单元。 我们应该从情节提要文件开始，将自定义单元格添加到表格视图中：

只需将单元格拖动到表格视图，然后对堆栈视图执行相同的操作。

您需要做的最后一件事是将两个或更多视图放入堆栈视图，并根据需要自定义其外观。 您应该遵循的模式是，第一个视图是对用户始终可见的折叠视图。 关键是为折叠视图设置一些高度。 在我的情况下为50，但是如果要创建更大的折叠单元格，则应设置其他值。

使用堆栈视图并手动更改其子视图的高度或宽度时，您还应该记住正确配置此控件。 这是我的细胞的一个例子：

如果您此时离开视图配置，看到扩展单元格“ 无法同时满足约束条件 ”时，您可能会感到失望。 ”显示在您的控制台上。 原因很简单-隐藏视图的高度限制为0 ，因此，如果扩展单元格，则将与堆栈视图的总高度发生冲突。 幸运的是，修复非常简单。 只需将折叠的视图高度约束优先级更改为999。

在对情节提要中的单元格进行样式设置后，我们需要将其连接到真实代码。 为此，我们需要创建一个继承UITableViewCell并根据需要进行基本设置的类。

这里的关键部分是创建单元状态，该状态描述了应该折叠还是扩展单元。 Swift枚举在这里会有所帮助。

如您在上面看到的，我添加了“ carretImage ”属性，该属性决定了在当前状态下我们应该在单元格上显示什么carret图像。 另外，我们需要允许我们更改单元格当前状态的属性或方法。

这里的逻辑很简单。 我设置默认状态（.collapsed），并使用观察者属性调用toggle（）方法，该方法隐藏或显示我们的“展开视图”。

而已！ 😆。 我们完成了单元-代码和UI。

设置拼图！

最后一步是将数据连接到单元。 我们通过实现cellForRowAt indexPath方法来实现 在数据源类中。

配置单元的最后一步是它的状态。 我们需要知道何时扩展单元格或否。 为此，我将选定的单元格索引路径保存在源数据源类中。

如果此集合包含当前索引路径，则将状态设置为Expanded ，否则设置为collapsed 。

下面是它的工作原理：

这就是全部！ UIStackView是一个功能强大的控件，建议您花几分钟时间并对其进行一些实验。

希望我的快速文章对您有所帮助:)。

资源：

UIStackView指南：https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views

UITableView指南：https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/TableView_iPhone/CreateConfigureTableView/CreateConfigureTableView.html

自定义表格视图单元格（Objective-C）：http：//www.appcoda.com/customize-table-view-cells-for-uitableview/

项目来源：

我的github页面😁