自定格单元

使用Swift在iOS中使用TableView和CollectionView

App Store上的大多数iOS应用程序都有一个项目列表的UI表示形式,因此很明显,iOS开发人员在整个开发过程中花费了大量的时间使用TableView和CollectionView。 自2009年以来,在AppIt Ventures,我们一直在开发iOS应用,并适应iOS提供的所有技巧,改进和新功能。 在本文中,我们希望共享一个称为“自调整大小的单元格”的概念。 尽管这不是一个新话题(iOS 8宣布了这一话题),但我们希望通过Self-Sizing Cells帮助初学者了解更多详细信息和用例。

在iOS 8之前,在具有不同高度的单元格的TableView或CollectionView中显示动态内容并不是一个容易的过程。过去,我们不得不以编程方式计算每个单元格的高度并增加相应单元格的高度。 使用自调整大小的单元格时,显示高度可变的动态内容是一个简单的过程。

  • 自动布局用于tableview单元内的UI元素。
  • 将Tableview rowHeight设置为UITableViewAutomaticDimension
  • 设置estimatedRowHeight或实现高度估计委托方法,并且此estimatedRowHeight将是单元格的默认高度。

设置这两个属性后,系统将使用“自动布局”来计算行的实际高度。 EstimateRowHeight是情节提要中原型单元格的高度,当rowHeight属性设置为UITableViewAutomaticDimension我们告诉tableview根据单元格中添加的其他约束来计算单元格高度。

让我们看一下如何演示如何将tableview告知自身大小的快速演示

  • 创建一个示例报价列表演示,以在表格视图中显示带有作者姓名的报价,并使用自定义单元格将表格视图单元格设置为定义表格视图单元格。

在此示例演示中,我们将展示如何创建支持动态类型的自定义TableView单元格 。 由于动态类型使用户可以控制在单元格中显示的文本的大小,因此,必须根据文本大小调整单元格的大小,这一点很重要。

  1. 在情节提要中 ,使用tableview单元格并在其中添加两个标签。

2.我们必须在View控件r中添加以下两个Tableview委托方法。

要么

我们可以在viewDidLoad方法中添加以下两行代码。

3.在数组中加上一些引号,然后将其分配给indexPath()方法中cellForRow中的引号描述标签,有关结果,请参见下文。

在上面的结果屏幕中,我们没有得到预期的结果,因为我们需要将报价描述标签的行数设置 为零 。 设置好之后,最终结果如下。


tableview演示类似,我们必须按照以下步骤将自定义集合视图单元格设置为定义大小的 collectionView单元格

  • 对UI CollectionView单元内的UI元素使用自动布局
  • 设置UICollectionViewFlowLayout的EstimatedItemSize
  • 设置systemLayoutSizeFitting UI CollectionView单元格。

estimatedItemSize是CollectionView中原型单元格的估计大小。 当我们将systemLayoutSizeFitting属性设置为CollectionView单元时,CollectionView根据其当前约束返回最佳视图大小。

就像我们对TableView所做的一样,让我们​​为CollectionView创建一个报价列表演示,并使用自定义单元格显示作者照片的报价。

我们必须在CollectionView自定义单元格类中添加以下方法。

在情节提要中将行数设置 为零 CollectionView单元格(TableView单元格)中获取报价描述标签

最后,看到用于自定义UICollectionView单元格的结果屏幕


注意:上面创建的CollectionView演示在UI和空格方面存在问题。 正确的表示形式将需要使用交错网格视图。 因此,为了获得交错的网格视图,我们可能需要使用其他一些外部库。 如果您知道在使用默认CollectionView时实现交错视图UI的任何技巧,请在评论部分分享您的想法。


如果您喜欢这篇文章,并且对您有所帮助,请给我一些鼓掌! 请在Twitter和Medium上关注我! 关注AppIt Ventures以获得其他有趣的文章。 谢谢😄