集合视图设计布局Ios

Question

所以，我现在正在制作一个带有集合视图布局的应用程序，并且想知道如何设计它以使其看起来不错。我在网上发现了一张我希望它看起来像的图片，并想知道我应该如何制作它。

这是图片：

我想要复制的集合视图是中间的那个。

以下是我当前细胞的样子：

第一个回答后的我的细胞：

这是我目前配置单元格的代码：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "channelCell", for: indexPath) as? ChannelCollectionViewCell
    let channel = channels[indexPath.row]
    // Configure the cell
    cell?.configureCell(channel: channel)
    return cell!
}

我的猜测是，我想要的设计有两个主要内容，它带给我两个具体的问题。

1. 如何让细胞有圆角？
2. 如何从屏幕侧面放置一个单元格并减少单元格之间的间隙？

Answer 1

  

ViewController类

class YourClass: UIViewController {
    //MARK:-Outlets
    @IBOutlet weak var yourCollectionView: UICollectionView!

    //Mark:-Variables
    var cellWidth:CGFloat = 0
    var cellHeight:CGFloat = 0
    var spacing:CGFloat = 12
    var numberOfColumn:CGFloat = 2


    //MARK:-LifeCycle
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        yourCollectionView.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)

        if let flowLayout = yourCollectionView.collectionViewLayout as? UICollectionViewFlowLayout{

            cellWidth = (yourCollectionView.frame.width  - (numberOfColumn + 1)*spacing)/numberOfColumn
           cellHeight = 100 //yourCellHeight
            flowLayout.minimumLineSpacing = spacing
            flowLayout.minimumInteritemSpacing = spacing
        }
    }

extension YourClass:UICollectionViewDataSource{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? YourCollectionViewCell{

         //Configure cell

            return cell
        }
        return UICollectionViewCell()
    }  
}


 extension YourClass:UICollectionViewDelegateFlowLayout{
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: cellWidth, height: cellHeight)
        }
}

  

CollectionViewCell类

class YourCollectionViewCell:UICollectionViewCell{

    override func awakeFromNib() {
            super.awakeFromNib()
            self.layer.cornerRadius = 10 //customize yourself
            self.layer.masksToBounds = true
        }
    }