如何使UICollectionView像滚动的Instagram Stories Preview一样出现

Question

对于新手问题很抱歉，但是许多小时后，我无法掌握如何正确布局collectionViewCells使其看起来像instagram页面，且故事剪辑位于顶部。

目前这是我最好的一个collectionView（不起作用）和tableView（起作用）：

但是有几个问题。首先，请注意顶部栏（即collectionView栏）在左侧并未与其下面的tableView项齐平。

我的代码是：

JSON.parse(data.replace(/"/g,'"'));

很明显，间距大于8px，所以我对插图的基本理解一定是错误的。另外，我注意到没有办法在代码中设置extension ChatTableViewController : UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 3 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "profileClipView", for: indexPath) as! ProfileClipViewCell cell.nameLabel.text = "text" cell.imageCell.image = UIImage(named: "temp_me") return cell } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let side = self.collectionView.bounds.size.height - 16 return CGSize(width: side - 10, height: side) } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { return UIEdgeInsets.init(top: 8, left: 8, bottom: 8, right: 8) } } ，我认为在设置collectionView委托/数据源时它会被设置。

我遇到的另一个问题是照片下面的文本永远不会出现。我创建了一个如下所示的xib：

imageView为1：1，并修剪到顶部和侧面，底部的黑框是lableView，它修剪到图像和底部，并在外部视图中居中。请注意，该标签没有出现！

因此，最终我想知道如何使单元与侧面齐平，并想知道为什么标签不出现。非常感谢帮助！