集合视图设计布局 Ios

Posted 2023-03-14

【中文标题】集合视图设计布局 Ios

【英文标题】：Collection View Design Layout Ios

【发布时间】：2016-11-28 03:01:13

【问题描述】：

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

图片如下：

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

这是我当前单元格的样子：

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

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

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】：

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
        
    

【讨论】：

我的细胞从顶部被切断了。我该怎么办？

yourCollectionView.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing) 从顶部增加 contentInset，可能会有帮助

希望，我很有帮助：D