web-dev-qa-db-ja.com

Swiftの幅を埋めるUICollectionViewカスタムセル

写真でわかるように、セル間の幅が大きすぎるので、セルを幅いっぱいに埋める方法を考えています。 imageViewが1つしかないカスタムセルを使用しています。

enter image description here

ストーリーボードからカスタマイズしようとしましたが、オプションがないか、プログラムで行う必要があると思います。 enter image description here

私のUICollectionViewController：

 @IBOutlet var collectionView2: UICollectionView!

    let recipeImages = ["angry_birds_cake", "creme_brelee", "Egg_benedict", "full_breakfast", "green_tea", "ham_and_cheese_panini", "ham_and_Egg_sandwich", "hamburger", "instant_noodle_with_Egg.jpg", "japanese_noodle_with_pork", "mushroom_risotto", "noodle_with_bbq_pork", "starbucks_coffee", "thai_shrimp_cake", "vegetable_curry", "white_chocolate_donut"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Do any additional setup after loading the view.

    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


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

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! RecipeCollectionViewCell

        // Configure the cell
        cell.recipeImageView.image = UIImage(named: recipeImages[indexPath.row])

        return cell
    }
iosswiftuicollectionviewuicollectionviewlayout
33
AaoIi

これをプログラムで行う必要があります。

View ControllerにUICollectionViewDelegateFlowLayoutを実装し、collectionView:layout:sizeForItemAtIndexPath:でサイズを指定します

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let kWhateverHeightYouWant = 100
        return CGSizeMake(collectionView.bounds.size.width, CGFloat(kWhateverHeightYouWant))
}

また、View ControllerのcollectionView.collectionViewLayout.invalidateLayout()内でviewWillLayoutSubviews()を呼び出して、メインビューの寸法が変更されたとき（たとえば、回転時）にコレクションビューが再レイアウトされるようにすることもできます。

Swift 4アップデート

func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let kWhateverHeightYouWant = 100
            return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant))
}
86
Matthew Quiros

View ControllerのオーバーライドviewDidLayoutSubviewsメソッド内

@IBOutlet weak var collectionView: UICollectionView!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemWidth = view.bounds.width / 3.0
        let itemHeight = layout.itemSize.height
        layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
        layout.invalidateLayout()
    }
}

（collectionViewプロパティはcollectionViewです）

11
mustafa

UICollectionViewCellの幅を設定するには、次のコードを使用します。

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {        
    return CGSize(width: screenWidth/3, height: screenWidth/3);
}
10
Nimit Parekh

Swift 3でも、

View Controllerが以下に準拠していることを確認してください。

UICollectionViewDelegate、
UICollectionViewDataSource、
ICollectionViewDelegateFlowLayout

8
brycejl

Swift

Swift 3を使用している場合、次の方法を使用します。

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

    }

変更に注意してください：

  1. メソッド名のcollectionViewの前に_を追加します
  2. NSIndexPathはIndexPathに変更されます
4
JPetric

私は同じ要件を持っています。私の場合は、以下のソリューションが機能しています。 IImageView上、左、下、右の制約を inside ICollectionviewCellに設定します

@IBOutlet weak var imagesCollectionView: UICollectionView!

override func viewDidLoad() {
    super.viewDidLoad()
    // flowlayout
    let screenWidth = UIScreen.main.bounds.width
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 10, right: 0)
    layout.itemSize = CGSize(width: screenWidth/3 - 5, height: screenWidth/3 - 5)
    layout.minimumInteritemSpacing = 5
    layout.minimumLineSpacing = 5
    imagesCollectionView.collectionViewLayout = layout

}
1
Raju Abe

私の場合、UICollectionViewに2列と3行を表示したかった

UICollectionViewDelegateFlowLayoutデリゲートをクラスに追加しました

次に、sizeForItemAt indexPathをオーバーライドします

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellHeight = (collectionView.bounds.size.height - 30) / 3 // 3 count of rows to show
    let cellWidth = (collectionView.bounds.size.width - 20) / 2 // 2 count of colomn to show
    return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellHeight))
}

30は行間隔、20はセル間のインテントです。

0
F.sh

私の場合、すべてのセルの幅が155、高さが220であると仮定します。ポートレートモードで行ごとに2つのセルを表示し、ランドスケープで3つのセルを表示する場合。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var itemsCount : CGFloat = 2.0
    if UIApplication.sharedApplication().statusBarOrientation != UIInterfaceOrientation.Portrait {
        itemsCount = 3.0
    }
    return CGSize(width: self.view.frame.width/itemsCount - 20, height: 220/155 * (self.view.frame.width/itemsCount - 20));
}
0
Eduardo Irias

プログラムでitemSizeを[UIScreen mainScreen].bounds.size.width/3に設定します

0
rounak

最善の解決策は、itemSizeのUICollectionViewFlowLayoutのviewDidLayoutSubviewsを変更することです。 UICollectionViewの最も正確なサイズを取得できる場所です。レイアウトでinvalidateを呼び出す必要はありません。これは既に行われています。

0
ZaBlanc