集合视图设计布局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! 
} 

我的猜测是会有2个主要的事情，使我想要的设计，这使我有两个具体问题。

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

Answer 1

视图控制器类

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 
     } 
    }