Swift - 实现表格tableViewCell里嵌套collectionView（附样例）

有时要实现一个复杂的页面布局，单单使用  UITableView 实现不了，需要通过  UITableView 和  UICollectionView 结合实现，即每个单元格  tableViewCell 中都嵌套一个  collectionView。下面通过样例演示如何实现。

1，效果图

（1）表格中每一个单元格对应一个月份的图书列表。 （2）单元格中头部显示月份标题。内部通过  collectionView 显示当月所有书籍封面图片，数量不定。整个单元格高度自适应。 （3）这个样例其实只用多  section 的  collectionView 也能实现（ 点击查看）。本文使用  UITableView +  UICollectionView 演示如何实现同样的功能，

2，如何实现单元格高度自适应

（1）我们要对  collectionView 设置个高度约束。当在单元格中更新  collectionView 的数据时，要获取这个  collectionView 的真实的内容高度（ contentSize.height），然后用  contentSize.height 来更新  collectionView 的高度约束。这样就实现了单元格内部  collectionView 的高度自适应。 （2）而对于单元格  tableViewCell 的高度自适应，是通过  AutoLayout 特性实现的。利用内容将  cell 撑起来。

1 2 3 4

//设置estimatedRowHeight属性默认值 self .tableView!.estimatedRowHeight = 44.0 //rowHeight属性设置为UITableViewAutomaticDimension self .tableView!.rowHeight =  UITableViewAutomaticDimension

3，实现步骤

（1）新建一个自定义的  collectionView 单元格类： MyCollectionViewCell，同时勾选“ Also create XIB file”

（2）在  MyCollectionViewCell.xib 中添加一个  ImageView，并设置好约束。同时在对应的类中作关联

（3） MyCollectionViewCell.swift 代码如下：

1 2 3 4 5 6 7 8 9 10 11

import UIKit class MyCollectionViewCell :  UICollectionViewCell { //用于显示封面缩略图 @IBOutlet weak var imageView:  UIImageView ! override func awakeFromNib() { super .awakeFromNib() } }

（4）新建一个自定义的  tableView  单元格类： MyTableViewCell ，同时勾选“ Also create XIB file ”

（5）在  MyTableViewCell.xib 中添加一个  Label 和一个  CollectionView，并设置好约束。同时在对应的类中作关联。 其中  Label 设置的是上、下、左、右4个约束：

CollectionView 设置的是左、右、下以及高度这个4个约束：

（6） MyTableViewCell.swift 代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

import UIKit class MyTableViewCell :  UITableViewCell ,  UICollectionViewDelegate ,  UICollectionViewDataSource { //单元格标题 @IBOutlet weak var titleLabel:  UILabel ! //封面图片集合列表 @IBOutlet weak var collectionView:  UICollectionView ! //collectionView的高度约束 @IBOutlet weak var collectionViewHeight:  NSLayoutConstraint ! //封面数据 var images:[ String ] = [] override func awakeFromNib() { super .awakeFromNib() //设置collectionView的代理 self .collectionView.delegate =  self self .collectionView.dataSource =  self // 注册CollectionViewCell self .collectionView!.register( UINib (nibName: "MyCollectionViewCell" , bundle: nil ), forCellWithReuseIdentifier:  "myCell" ) } //加载数据 func reloadData(title: String , images:[ String ]) { //设置标题 self .titleLabel.text = title //保存图片数据 self .images = images //collectionView重新加载数据 self .collectionView.reloadData() //更新collectionView的高度约束 let contentSize =  self .collectionView.collectionViewLayout.collectionViewContentSize collectionViewHeight.constant = contentSize.height } //返回collectionView的单元格数量 func collectionView(_ collectionView:  UICollectionView , numberOfItemsInSection section:  Int ) ->  Int { return images.count } //返回对应的单元格 func collectionView(_ collectionView:  UICollectionView , cellForItemAt indexPath:  IndexPath ) ->  UICollectionViewCell { let cell  = collectionView.dequeueReusableCell(withReuseIdentifier:  "myCell" , for : indexPath)  as !  MyCollectionViewCell cell.imageView.image =  UIImage (named: images[indexPath.item]) return cell } //绘制单元格底部横线 override func draw(_ rect:  CGRect ) { //线宽 let lineWidth = 1 /  UIScreen .main.scale //线偏移量 let lineAdjustOffset = 1 /  UIScreen .main.scale / 2 //线条颜色 let lineColor =  UIColor (red: 0xe0/255, green: 0xe0/255, blue: 0xe0/255, alpha: 1) //获取绘图上下文 guard  let context =  UIGraphicsGetCurrentContext ()  else { return } //创建一个矩形，它的所有边都内缩固定的偏移量 let drawingRect =  self .bounds.insetBy(dx: lineAdjustOffset, dy: lineAdjustOffset) //创建并设置路径 let path =  CGMutablePath () path.move(to:  CGPoint (x: drawingRect.minX, y: drawingRect.maxY)) path.addLine(to:  CGPoint (x: drawingRect.maxX, y: drawingRect.maxY)) //添加路径到图形上下文 context.addPath(path) //设置笔触颜色 context.setStrokeColor(lineColor.cgColor) //设置笔触宽度 context.setLineWidth(lineWidth) //绘制路径 context.strokePath() } override func setSelected(_ selected:  Bool , animated:  Bool ) { super .setSelected(selected, animated: animated) } }

（7）在  StoryBoard 主视图中添加一个  TableView，并设置好约束。同时在对应的类中作关联。

（8） ViewController.swift 代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

import UIKit //每月书籍 struct BookPreview { var title: String var images:[ String ] } class ViewController :  UIViewController ,  UITableViewDelegate ,  UITableViewDataSource { //所有书籍数据 let books = [ BookPreview (title:  "五月新书" , images: [ "0.jpg" ,  "1.jpg" , "2.jpg" ,  "3.jpg" , "4.jpg" , "5.jpg" , "6.jpg" ]), BookPreview (title:  "六月新书" , images: [ "7.jpg" ,  "8.jpg" ,  "9.jpg" ]), BookPreview (title:  "七月新书" , images: [ "10.jpg" ,  "11.jpg" ,  "12.jpg" ,  "13.jpg" ]) ] //显示内容的tableView @IBOutlet weak var tableView:  UITableView ! override func loadView() { super .loadView() } override func viewDidLoad() { super .viewDidLoad() //设置tableView代理 self .tableView!.delegate =  self self .tableView!.dataSource =  self //去除单元格分隔线 self .tableView!.separatorStyle = .none //创建一个重用的单元格 self .tableView!.register( UINib (nibName: "MyTableViewCell" , bundle: nil ), forCellReuseIdentifier: "myCell" ) //设置estimatedRowHeight属性默认值 self .tableView!.estimatedRowHeight = 44.0 //rowHeight属性设置为UITableViewAutomaticDimension self .tableView!.rowHeight =  UITableViewAutomaticDimension } //在本例中，只有一个分区 func numberOfSectionsInTableView(tableView:  UITableView ) ->  Int { return 1; } //返回表格行数 func tableView(_ tableView:  UITableView , numberOfRowsInSection section:  Int ) ->  Int { return self .books.count } //创建各单元显示内容(创建参数indexPath指定的单元） func tableView(_ tableView:  UITableView , cellForRowAt indexPath:  IndexPath ) ->  UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier:  "myCell" ) as !  MyTableViewCell //下面这两个语句一定要添加，否则第一屏显示的collection view尺寸，以及里面的单元格位置会不正确 cell.frame = tableView.bounds cell.layoutIfNeeded() //重新加载单元格数据 cell.reloadData(title:books[indexPath.row].title, images: books[indexPath.row].images) return cell } override func didReceiveMemoryWarning() { super .didReceiveMemoryWarning() } }

源码下载：

hangge_1591.zip

功能修改：每个单元格只显示一行封面图片

上面的样例中，每个单元格内的图片是全部显示出来，有多少显示多少，高度自适应。 我们还可以换种展示方法，每个单元格，即每个  collectionView 只显示一行数据，图片如果多的话可以通过左右滑动查看。

1，效果图

2，实现原理

我们只需要把  collectionView 的滚动方向改成水平方向即可。

如果不需要显示横向的滚动条，可以去掉“ Shows Horizontal Indicator”的勾选。

原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1591.html