web-dev-qa-db-ja.com

行ごとに正確に3つに収まるようにコレクションビューのセルを配置する

画像のコレクションビューを作成しようとしています。行ごとに3つあり、間にスペースはありません。

コレクションビューのデータソースは次のとおりです。

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return posts.count
}

これが私のストーリーボードでの設定方法です（imageViewの幅は125、375画面幅の3分の1）：

enter image description here

ただし、アプリを実行して写真を追加すると、次のようになります。

enter image description here

行ごとに3つの画像が表示されるように修正するにはどうすればよいですか？助けてくれてありがとう！

iosswiftxcodeuicollectionview
9
KingTim

あなたは実装する必要があります

UICollectionViewDelegateFlowLayout

スペーシングスタッフ用。

CollectionViewCellsのサイズを次のように設定します。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let yourWidth = collectionView.bounds.width/3.0
    let yourHeight = yourWidth

    return CGSize(width: yourWidth, height: yourHeight)
}

また、これらの関数を追加して、collectionViewCellsの間隔を正しくすることもできます。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets.zero
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
35
Kingalione

Swift-バージョン4.2

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 3

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))

    return CGSize(width: size, height: size) 
}
11
Gagandeep Gambhir

1-ICollectionViewDelegateFlowLayout に準拠する必要があります

2-次のように collectionView（_：layout：sizeForItemAt：） メソッドを実装する必要があります。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let screenWidth = UIScreen.main.bounds.width
    let scaleFactor = (screenWidth / 3) - 6

    return CGSize(width: scaleFactor, height: scaleFactor)
}

最小スペースが8であるとすると（たとえば）、

enter image description here

出力は、正方形のサイズの各行に対して3つのアイテムである必要があります。

注：セル間のスペースをゼロに設定する場合、scaleFactorは次のようになります。

let scaleFactor = (screenWidth / 3)

これが役に立てば幸いです。

4
Ahmad F

これを使用できます

このコードは、セクションインセットまたはminimumInteritemSpacingを変更でき、このパラメーターを使用して計算およびサイズ変更できるように書かれています。

このコードを使用するか、プロジェクトを Github からダウンロードできます。

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {


        let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

        let numberofItem: CGFloat = 3

        let collectionViewWidth = self.collectionView.bounds.width

        let extraSpace = (numberofItem - 1) * flowLayout.minimumInteritemSpacing

        let inset = flowLayout.sectionInset.right + flowLayout.sectionInset.left

        let width = Int((collectionViewWidth - extraSpace - inset) / numberofItem)

        print(width)

        return CGSize(width: width, height: width)
    }
2
sadegh bitarafan

あなたは実装する必要があります

ICollectionViewDelegateFlowLayout間隔のもの用。

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UpperCollectionViewCell", for: indexPath) as! UpperCollectionViewCell
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    return CGSize(width: (self.collectionView.frame.width/3.0) - 5 , height: (self.collectionView.frame.height/4.0))
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return  2
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return  2
}
2
Deviyani Swami