集合視圖設計佈局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 
     } 
    }