CollectionViewでCustomCellを使った際のLayout

前提・実現したいこと

CustomCellを使用したCollectionViewでcellを横に3個並べて表示したいのですが、思った様にLayoutできません。
画像,2の様に等間隔で表示したいです。

画像、１

画像、２

CollectionViewCell

import UIKit
import SDWebImage

class OtherCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var otherView: UIImageView!
    @IBOutlet weak var otherNameLabel: UILabel!
    

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    func toFields(user: UserModel){
        
        self.otherView.sd_setImage(with: URL(string: user.userIcon), completed: nil)
        self.otherNameLabel.text = user.userName
        
    }

}

CollectionView

import UIKit
import Firebase

class OtherCollectionViewController: UICollectionViewController {
    
    
    var userDatas = [UserModel]()
    var userRef: DatabaseReference = Database.database().reference().child("UsersProfile")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.register(UINib(nibName: "OtherCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "otherCell")
        
        collectionView.delegate = self
        collectionView.dataSource = self
        getUserData()
        
    }
    func getUserData(){
        
        if UserDefaults.standard.object(forKey: "userID") != nil {
            
            let userID = UserDefaults.standard.object(forKey: "userID") as! String
            
            userDatas.removeAll()
            
            userRef.observe(.value) { (snapShot) in
                
                for snap in snapShot.children {
                    
                    let userData = UserModel(snapShot: snap as! DataSnapshot)
                    
                    self.userDatas.insert(userData, at: 0)
                    self.collectionView.reloadData()
                    
                }
            }
            
        }else{
            print("userdefaults Error")
        }
    }

    // MARK: UICollectionViewDataSource

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }


    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of items
        return userDatas.count
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let otherCell = collectionView.dequeueReusableCell(withReuseIdentifier: "otherCell", for: indexPath) as! OtherCollectionViewCell
    
        let user = userDatas[indexPath.row]
        
        otherCell.toFields(user: user)
    
        return otherCell
    }
}

Xcode上での設定

xibFileのcellはOtherCollectionViewCellを継承しています。OtherCollectionView内のCellもXcode上でつないでいます。

xibFileからOtherCollectionViewCellの高さをMainStoryboard上のCellと高さを揃えています。（揃える必要があるのかわからないが揃えていますが、意味はあるのでしょうか？）
![イメ

試したこと

https://qiita.com/tamagalago/items/a6bc26ab8574138280e9
上記のサイトを見ながら、実装してみたのですがLayoutが変わりませんでした。
こちらはCustomCellではないので、Layoutが変わらなかったのでしょうか？

補足情報（FW/ツールのバージョンなど）

swift５
xcode　Version 11.4 (11E146)

行動規範の内容に同意します

回答1件

ベストアンサー

自動調整使わないのでしたら下記のような書き方でセルのサイズを設定できます。

extension OtherCollectionViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 40.0 はcollectionViewの左右のスペース(Selection Insets の値)とセル同士のスペース(Min SpaceingのFor cellsの値)
        // ↑何列にするかで調整する
        let width: CGFloat = (collectionView.frame.width - 40.0) / 3
        let height: CGFloat = width // 正方形なら
        return CGSize(width: width, height: height)
    }
}

投稿2020/04/13 05:50