UICollectionView कॉलम की संख्या निर्धारित करें


100

मैंने अभी UICollectionViews के बारे में सीखना शुरू किया। मैं सोच रहा था कि किसी को पता है कि एक संग्रह में कॉलम की संख्या कैसे निर्दिष्ट की जाए। डिफ़ॉल्ट 3 (iPhone / पोर्ट्रेट) पर सेट है। मैंने दस्तावेज़ीकरण देखा है और संक्षिप्त उत्तर नहीं खोज सकता।


1
मेरे पास एक ऐप है जो मैं UICollectionViewमूल रूप से ग्रिड के रूप में उपयोग करता हूं क्योंकि मुझे पता है कि मुझे केवल 4 कॉलम चाहिए। मैं अपनी कोशिकाओं को एक निश्चित आकार बनाकर ऐसा करता हूं, और उन दोनों के बीच अंतर एक निश्चित आकार है, इसलिए संग्रह केवल 4 कॉलम दिखाता है, कोई अभिविन्यास नहीं। क्या यह आपकी ज़रूरत के समान है?
jilgert00

या यह एक सामान्य प्रश्न से अधिक है, जैसे मैं गतिशील रूप से कॉलम की संख्या निर्धारित कर सकता हूं या नहीं?
jilgert00

मूल रूप से मैं पोर्ट्रेट मोड में 7 कॉलम देख रहा हूं। इसलिए मैंने स्तंभों की चौड़ाई 46px (320 px / 46px = 7) कर दी है। मुझे नहीं पता था कि उनकी रिक्ति संपत्ति थी।
एसएनवी

जवाबों:


81

संग्रह दृश्य बहुत शक्तिशाली हैं, और वे एक मूल्य पर आते हैं। बहुत सारे, और बहुत सारे विकल्प। जैसा कि omz ने कहा:

ऐसे कई तरीके हैं जिनसे आप कॉलम की संख्या बदल सकते हैं

मैं <UICollectionViewDelegateFlowLayout>आपको प्रोटोकॉल लागू करने का सुझाव देता हूं , जिससे आपको निम्नलिखित विधियों तक पहुंच प्राप्त हो सकती है जिसमें आप अपने लेआउट के बारे में अधिक नियंत्रण रख सकते हैं UICollectionView, बिना इसकी आवश्यकता के।

  • collectionView:layout:insetForSectionAtIndex:
  • collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
  • collectionView:layout:minimumLineSpacingForSectionAtIndex:
  • collectionView:layout:referenceSizeForFooterInSection:
  • collectionView:layout:referenceSizeForHeaderInSection:
  • collectionView:layout:sizeForItemAtIndexPath:

इसके अलावा, निम्नलिखित विधि को लागू करने से आपके UICollectionView को एक अभिविन्यास परिवर्तन पर लेआउट को अपडेट करने के लिए मजबूर किया जाएगा: (आप परिदृश्य के लिए कोशिकाओं को फिर से आकार देना और उन्हें खिंचाव बनाना चाहते थे)

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
                               duration:(NSTimeInterval)duration{

    [self.myCollectionView.collectionViewLayout invalidateLayout];
}

इसके अतिरिक्त, यहां 2 बहुत अच्छे ट्यूटोरियल हैं UICollectionViews:

http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12

http://skeuo.com/uicollectionview-custom-layout-tutorial


1
क्या यह सभी iOS उपकरणों के लिए काम करेगा? collectionView:layout:sizeForItemAtIndexPath:अलग से सभी उपकरणों के लिए संभाला जाना चाहिए ?
शरथ

1
@ शरत, निश्चित रूप से सब कुछ के लिए काम करता है। आपको बस अपना गणित इस तरह से करने की आवश्यकता है जो सभी उपकरणों के लिए अनुकूल हो;)। अनुकूली डिजाइन।
theCodingArt

वाह इतना बढ़िया, लेकिन वास्तविक उदाहरण? एंड्रॉइड में हम कर सकते हैं new GridLayoutManager(mContext, 4))(4 कॉलम), बहुत आसान है, या बस उपयोग करें LinearLayoutManager(बेशक इसमें केवल 1 कॉलम है)
user25

145

स्विफ्ट 5 और आईओएस 12.3 के साथ, आप इनसेट्स और आकार परिवर्तन (रोटेशन सहित) का प्रबंधन करते समय प्रति पंक्ति में आइटम की संख्या निर्धारित करने के लिए निम्नलिखित 4 कार्यान्वयन में से एक का उपयोग कर सकते हैं UICollectionView


# 1। उपवर्गीकरण UICollectionViewFlowLayoutऔर का उपयोग कर UICollectionViewFlowLayoutके itemSizeसंपत्ति

ColumnFlowLayout.swift:

import UIKit

class ColumnFlowLayout: UICollectionViewFlowLayout {

    let cellsPerRow: Int

    init(cellsPerRow: Int, minimumInteritemSpacing: CGFloat = 0, minimumLineSpacing: CGFloat = 0, sectionInset: UIEdgeInsets = .zero) {
        self.cellsPerRow = cellsPerRow
        super.init()

        self.minimumInteritemSpacing = minimumInteritemSpacing
        self.minimumLineSpacing = minimumLineSpacing
        self.sectionInset = sectionInset
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func prepare() {
        super.prepare()

        guard let collectionView = collectionView else { return }
        let marginsAndInsets = sectionInset.left + sectionInset.right + collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right + minimumInteritemSpacing * CGFloat(cellsPerRow - 1)
        let itemWidth = ((collectionView.bounds.size.width - marginsAndInsets) / CGFloat(cellsPerRow)).rounded(.down)
        itemSize = CGSize(width: itemWidth, height: itemWidth)
    }

    override func invalidationContext(forBoundsChange newBounds: CGRect) -> UICollectionViewLayoutInvalidationContext {
        let context = super.invalidationContext(forBoundsChange: newBounds) as! UICollectionViewFlowLayoutInvalidationContext
        context.invalidateFlowLayoutDelegateMetrics = newBounds.size != collectionView?.bounds.size
        return context
    }

}

CollectionViewController.swift:

import UIKit

class CollectionViewController: UICollectionViewController {

    let columnLayout = ColumnFlowLayout(
        cellsPerRow: 5,
        minimumInteritemSpacing: 10,
        minimumLineSpacing: 10,
        sectionInset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    )

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView?.collectionViewLayout = columnLayout
        collectionView?.contentInsetAdjustmentBehavior = .always
        collectionView?.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = UIColor.orange
        return cell
    }

}

यहां छवि विवरण दर्ज करें


# 2। का उपयोग करते हुए UICollectionViewFlowLayoutकी itemSizeविधि

import UIKit

class CollectionViewController: UICollectionViewController {

    let margin: CGFloat = 10
    let cellsPerRow = 5

    override func viewDidLoad() {
        super.viewDidLoad()

        guard let collectionView = collectionView, let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else { return }

        flowLayout.minimumInteritemSpacing = margin
        flowLayout.minimumLineSpacing = margin
        flowLayout.sectionInset = UIEdgeInsets(top: margin, left: margin, bottom: margin, right: margin)

        collectionView.contentInsetAdjustmentBehavior = .always
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }

    override func viewWillLayoutSubviews() {
        guard let collectionView = collectionView, let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
        let marginsAndInsets = flowLayout.sectionInset.left + flowLayout.sectionInset.right + collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right + flowLayout.minimumInteritemSpacing * CGFloat(cellsPerRow - 1)
        let itemWidth = ((collectionView.bounds.size.width - marginsAndInsets) / CGFloat(cellsPerRow)).rounded(.down)
        flowLayout.itemSize =  CGSize(width: itemWidth, height: itemWidth)
    }

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = UIColor.orange
        return cell
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        collectionView?.collectionViewLayout.invalidateLayout()
        super.viewWillTransition(to: size, with: coordinator)
    }

}

# 3। का उपयोग करते हुए UICollectionViewDelegateFlowLayoutकी collectionView(_:layout:sizeForItemAt:)विधि

import UIKit

class CollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    let inset: CGFloat = 10
    let minimumLineSpacing: CGFloat = 10
    let minimumInteritemSpacing: CGFloat = 10
    let cellsPerRow = 5

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView?.contentInsetAdjustmentBehavior = .always
        collectionView?.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: inset, left: inset, bottom: inset, right: inset)
    }

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

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let marginsAndInsets = inset * 2 + collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right + minimumInteritemSpacing * CGFloat(cellsPerRow - 1)
        let itemWidth = ((collectionView.bounds.size.width - marginsAndInsets) / CGFloat(cellsPerRow)).rounded(.down)
        return CGSize(width: itemWidth, height: itemWidth)
    }

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = UIColor.orange
        return cell
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        collectionView?.collectionViewLayout.invalidateLayout()
        super.viewWillTransition(to: size, with: coordinator)
    }

}

# 4। उपवर्गीकरण UICollectionViewFlowLayoutऔर का उपयोग कर UICollectionViewFlowLayoutके estimatedItemSizeसंपत्ति

CollectionViewController.swift:

import UIKit

class CollectionViewController: UICollectionViewController {

    let items = [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Lorem ipsum dolor sit amet, consectetur.",
        "Lorem ipsum dolor sit amet.",
        "Lorem ipsum dolor sit amet, consectetur.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing.",
        "Lorem ipsum.",
        "Lorem ipsum dolor sit amet.",
        "Lorem ipsum dolor sit.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
        "Lorem ipsum dolor sit amet, consectetur."
    ]

    let columnLayout = FlowLayout(
        cellsPerRow: 3,
        minimumInteritemSpacing: 10,
        minimumLineSpacing: 10,
        sectionInset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    )

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView?.collectionViewLayout = columnLayout
        collectionView?.contentInsetAdjustmentBehavior = .always
        collectionView?.register(Cell.self, forCellWithReuseIdentifier: "Cell")
    }

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! Cell
        cell.label.text = items[indexPath.row]
        return cell
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        collectionView?.collectionViewLayout.invalidateLayout()
        super.viewWillTransition(to: size, with: coordinator)
    }

}

FlowLayout.swift:

import UIKit

class FlowLayout: UICollectionViewFlowLayout {

    let cellsPerRow: Int

    required init(cellsPerRow: Int = 1, minimumInteritemSpacing: CGFloat = 0, minimumLineSpacing: CGFloat = 0, sectionInset: UIEdgeInsets = .zero) {
        self.cellsPerRow = cellsPerRow

        super.init()

        self.minimumInteritemSpacing = minimumInteritemSpacing
        self.minimumLineSpacing = minimumLineSpacing
        self.sectionInset = sectionInset
        estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let layoutAttributes = super.layoutAttributesForItem(at: indexPath) else { return nil }
        guard let collectionView = collectionView else { return layoutAttributes }

        let marginsAndInsets = collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right + sectionInset.left + sectionInset.right + minimumInteritemSpacing * CGFloat(cellsPerRow - 1)
        layoutAttributes.bounds.size.width = ((collectionView.bounds.width - marginsAndInsets) / CGFloat(cellsPerRow)).rounded(.down)

        return layoutAttributes
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let superLayoutAttributes = super.layoutAttributesForElements(in: rect)!.map { $0.copy() as! UICollectionViewLayoutAttributes }
        guard scrollDirection == .vertical else { return superLayoutAttributes }

        let layoutAttributes = superLayoutAttributes.compactMap { layoutAttribute in
            return layoutAttribute.representedElementCategory == .cell ? layoutAttributesForItem(at: layoutAttribute.indexPath) : layoutAttribute
        }

        // (optional) Uncomment to top align cells that are on the same line
        /*
        let cellAttributes = layoutAttributes.filter({ $0.representedElementCategory == .cell })
        for (_, attributes) in Dictionary(grouping: cellAttributes, by: { ($0.center.y / 10).rounded(.up) * 10 }) {
            guard let max = attributes.max(by: { $0.size.height < $1.size.height }) else { continue }
            for attribute in attributes where attribute.size.height != max.size.height {
                attribute.frame.origin.y = max.frame.origin.y
            }
        }
         */

        // (optional) Uncomment to bottom align cells that are on the same line
        /*
        let cellAttributes = layoutAttributes.filter({ $0.representedElementCategory == .cell })
        for (_, attributes) in Dictionary(grouping: cellAttributes, by: { ($0.center.y / 10).rounded(.up) * 10 }) {
            guard let max = attributes.max(by: { $0.size.height < $1.size.height }) else { continue }
            for attribute in attributes where attribute.size.height != max.size.height {
                attribute.frame.origin.y += max.frame.maxY - attribute.frame.maxY
            }
        }
         */

        return layoutAttributes
    }

}

Cell.swift:

import UIKit

class Cell: UICollectionViewCell {

    let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)

        label.numberOfLines = 0
        backgroundColor = .orange
        contentView.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.topAnchor.constraint(equalTo: contentView.layoutMarginsGuide.topAnchor).isActive = true
        label.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor).isActive = true
        label.trailingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.trailingAnchor).isActive = true
        label.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        layoutIfNeeded()
        label.preferredMaxLayoutWidth = label.bounds.size.width
        layoutAttributes.bounds.size.height = contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).height
        return layoutAttributes
    }

    // Alternative implementation
    /*
    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        label.preferredMaxLayoutWidth = layoutAttributes.size.width - contentView.layoutMargins.left - contentView.layoutMargins.right
        layoutAttributes.bounds.size.height = contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).height
        return layoutAttributes
    }
    */

}

यहां छवि विवरण दर्ज करें


3
समाधान जो "viewWillTransition (आकार के लिए ..." का उपयोग करते हैं, डिवाइस रोटेशन को ठीक से हैंडल नहीं करते हैं। चूंकि इसे फ़्रेम सेट करने से पहले कॉल किया जाता है, संग्रह दृश्य के पुराने आयाम का उपयोग सेल आकार की गणना करने के लिए किया जाता है। (आजमाया नहीं है। अन्य समाधान अभी तक)
vale

2
मैंने समाधान # 1 का उपयोग किया, आप मेरे नए नायक हैं।
टॉम वोलेटर्स

1
मैंने आपके समाधान का उपयोग किया # 1। इसकी शानदार।
शाहिल

1
शानदार और पूर्ण उत्तर, # 2
एलईडी

1
समाधान # 1 एकदम सही है! योगदान के लिए धन्यवाद!
ब्रायन

61

मैंने UICollectionViewDelegateFlowLayoutअपने पर लागू किया UICollectionViewControllerऔर सेल के आकार को निर्धारित करने के लिए जिम्मेदार विधि को ओवरराइड किया। मैंने तब स्क्रीन की चौड़ाई ली और इसे अपनी कॉलम आवश्यकता के साथ विभाजित किया। उदाहरण के लिए, मैं प्रत्येक स्क्रीन आकार पर 3 कॉलम रखना चाहता था। तो यहाँ मेरा कोड कैसा दिखता है -

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    float cellWidth = screenWidth / 3.0; //Replace the divisor with the column count requirement. Make sure to have it in float.
    CGSize size = CGSizeMake(cellWidth, cellWidth);

    return size;
}

2
बहुत सरल, पवित्रता और कम कोड के लिए धन्यवाद
jjxtra

2
इसके बजाय प्रति पंक्ति n-1 अत्यधिक स्थान वाली वस्तुओं से बचने के लिए आपको आइटम रिक्ति को 0 पर सेट करना सुनिश्चित करना चाहिए।
जो

41

नॉब के जवाब पर विस्तार:

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
        let totalSpace = flowLayout.sectionInset.left
            + flowLayout.sectionInset.right
            + (flowLayout.minimumInteritemSpacing * CGFloat(numberOfItemsPerRow - 1))
        let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(numberOfItemsPerRow))
        return CGSize(width: size, height: size)
}

यह कोशिकाओं के बीच किसी भी रिक्ति के लिए अनुमति देता है। यह एक Intसदस्य चर को बुलाता है numberOfItemsPerRowऔर यह भी मानता है कि सभी कोशिकाएं चौकोर और समान आकार की हैं। जैसा कि jhilgert00 के उत्तर में उल्लेख किया गया है कि हमें अभिविन्यास परिवर्तनों पर भी प्रतिक्रिया करनी चाहिए, लेकिन अब viewWillTransitionToSizeजैसा willRotateToInterfaceOrientationकि मूल्यह्रास द्वारा उपयोग किया जाता है।


Let size = Int ((collectionView.bounds. उपलब्धता - TotalSpace) / CGFloat (numberOfItemsPerRow)) - आपको Int को कास्टिंग हटा देना चाहिए, क्योंकि कुछ मामलों में यह कोशिकाओं के बीच छोटे स्थान बनाते हैं
Makalele

14

यहां स्विफ्ट 3 के लिए दो-कॉलम लेआउट का कार्य कोड दिया गया है:

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

    let nbCol = 2

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(nbCol - 1))
    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(nbCol))
    return CGSize(width: size, height: size)
}

"NbCol" को अपने वांछित कॉलम में बदलने के लिए स्वतंत्र महसूस करें।


जब इनसेट्स (1.0,1.0,1.0,1.0) होते हैं, तो हर समाधान में क्या गलत है, इस मामले में लेआउट 1 कॉलम बन जाता है!
rd_

@fraxool महान जवाब है, लेकिन अगर मैं उपकरण को लेआउट रीसेट करता हूं ... तो उसके लिए कोई भी फिक्स?
मक्सिम नियाज़ेव

8

यदि आप प्रतिनिधि का उपयोग करके आलसी हैं।

extension UICollectionView {
    func setItemsInRow(items: Int) {
        if let layout = self.collectionViewLayout as? UICollectionViewFlowLayout {
            let contentInset = self.contentInset
            let itemsInRow: CGFloat = CGFloat(items);
            let innerSpace = layout.minimumInteritemSpacing * (itemsInRow - 1.0)
            let insetSpace = contentInset.left + contentInset.right + layout.sectionInset.left + layout.sectionInset.right
            let width = floor((CGRectGetWidth(frame) - insetSpace - innerSpace) / itemsInRow);
            layout.itemSize = CGSizeMake(width, width)
        }
    }
}

पुनश्च: रोटेशन के बाद भी बुलाया जाना चाहिए


2
स्विफ्ट 4.0 भी में काम करता है ... परिवर्तन पिछले दो पंक्ति के बाद: चलो चौड़ाई = मंजिल ((frame.width - insetSpace - InnerSpace) / itemsInRow) layout.itemSize = CGSize (चौड़ाई: चौड़ाई, ऊँचाई: चौड़ाई)
g212gs

8

स्विफ्ट 3 को अपडेट किया गया:

फ्लो लेआउट के बजाय, मैं विशिष्ट कॉलम नंबर और पंक्ति संख्या के लिए कस्टम लेआउट का उपयोग करना पसंद करता हूं। इसलिये:

  1. यदि स्तंभ संख्या बहुत बड़ी है, तो इसे क्षैतिज रूप से खींचा जा सकता है।
  2. यह स्तंभ और पंक्ति का उपयोग करने के कारण तार्किक रूप से अधिक स्वीकार्य है।

सामान्य सेल और हैडर सेल: (अपने xib में एक IBOutlet के रूप में UILabel जोड़ें):

class CollectionViewCell: UICollectionViewCell {

@IBOutlet weak var label: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    self.backgroundColor = UIColor.black
    label.textColor = UIColor.white
}
}

class CollectionViewHeadCell: UICollectionViewCell {

@IBOutlet weak var label: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    self.backgroundColor = UIColor.darkGray
    label.textColor = UIColor.white
}
}

कस्टम लेआउट:

let cellHeight: CGFloat = 100
let cellWidth: CGFloat = 100

class CustomCollectionViewLayout: UICollectionViewLayout {
    private var numberOfColumns: Int!
    private var numberOfRows: Int!

    // It is two dimension array of itemAttributes
    private var itemAttributes = [[UICollectionViewLayoutAttributes]]()
    // It is one dimension of itemAttributes
    private var cache = [UICollectionViewLayoutAttributes]()

override func prepare() {
    if self.cache.isEmpty {

        self.numberOfColumns = self.collectionView?.numberOfItems(inSection: 0)
        self.numberOfRows = self.collectionView?.numberOfSections

        // Dynamically change cellWidth if total cell width is smaller than whole bounds
        /* if (self.collectionView?.bounds.size.width)!/CGFloat(self.numberOfColumns) > cellWidth {
         self.cellWidth = (self.collectionView?.bounds.size.width)!/CGFloat(self.numberOfColumns)
         }
         */
        for row in 0..<self.numberOfRows {
            var row_temp = [UICollectionViewLayoutAttributes]()
            for column in 0..<self.numberOfColumns {

                let indexPath = NSIndexPath(item: column, section: row)

                let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath as IndexPath)
                attributes.frame = CGRect(x: cellWidth*CGFloat(column), y: cellHeight*CGFloat(row), width: cellWidth, height: cellHeight)

                row_temp.append(attributes)

                self.cache.append(attributes)
            }
            self.itemAttributes.append(row_temp)
        }
    }
}
override var collectionViewContentSize: CGSize {
    return CGSize(width: CGFloat(self.numberOfColumns)*cellWidth, height: CGFloat(self.numberOfRows)*cellHeight)
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

    var layoutAttributes = [UICollectionViewLayoutAttributes]()

    for attributes in cache {
        if attributes.frame.intersects(rect) {
            layoutAttributes.append(attributes)
        }
    }
    return layoutAttributes
}
}

CollectionView:

let CellIdentifier = "CellIdentifier"
let HeadCellIdentifier = "HeadCellIdentifier"

class CollectionView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {

init() {
    let layout = CustomCollectionViewLayout()

    super.init(frame: CGRect.zero, collectionViewLayout: layout)

    self.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: CellIdentifier)
    self.register(UINib(nibName: "CollectionViewHeadCell", bundle: nil), forCellWithReuseIdentifier: HeadCellIdentifier)

    self.isDirectionalLockEnabled = true
    self.dataSource = self
    self.delegate = self
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func updateCollectionView() {
    DispatchQueue.main.async {
        self.reloadData()
    }
}

// MARK: CollectionView datasource
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 20
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 20
}
override func numberOfItems(inSection section: Int) -> Int {
    return 20
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let column = (indexPath as NSIndexPath).row
    let row = (indexPath as NSIndexPath).section

    if column == 0 {
        let cell : CollectionViewHeadCell = collectionView.dequeueReusableCell(withReuseIdentifier: HeadCellIdentifier, for: indexPath) as! CollectionViewHeadCell

        cell.label.text = "\(row)"

        return cell
    }
    else if row == 0 {
        let cell : CollectionViewHeadCell = collectionView.dequeueReusableCell(withReuseIdentifier: HeadCellIdentifier, for: indexPath) as! CollectionViewHeadCell

        cell.label.text = "\(column)"

        return cell
    }
    else {
        let cell : CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: CellIdentifier, for: indexPath) as! CollectionViewCell

        cell.label.text = String(format: "%d", arguments: [indexPath.section*indexPath.row])

        return cell
    }
}

// MARK: CollectionView delegate
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    let column = (indexPath as NSIndexPath).row
    let row = (indexPath as NSIndexPath).section

    print("\(column)  \(row)")
}
}

ViewController से CollectionView का उपयोग करें:

class ViewController: UIViewController {
let collectionView = CollectionView()

override func viewDidLoad() {
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(collectionView)
    self.view.backgroundColor = UIColor.red

    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[collectionView]|", options: [], metrics: nil, views: ["collectionView": collectionView]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[collectionView]|", options: [], metrics: nil, views: ["collectionView": collectionView]))
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    collectionView.updateCollectionView()
}
}

अंत में आपके पास फैंसी कलेक्शन व्यू हो सकता है!

यहां छवि विवरण दर्ज करें


इस समाधान के साथ समस्या आपकी स्थिर ऊंचाई और चौड़ाई है
rd_

2
@rd_Custom लेआउट का अर्थ है कि आप वह कर सकते हैं जो आप कभी भी करना चाहते हैं! मेरा कोड सिर्फ सबसे सरल मामला दिखा रहा है ......
brianLikeApple

7

क्योंकि UICollectionViewयह बहुत लचीला है, ऐसे कई तरीके हैं जिनसे आप स्तंभों की संख्या बदल सकते हैं, आपके द्वारा उपयोग किए जाने वाले लेआउट के आधार पर।

UICollectionViewFlowLayoutसीधे कॉलम की एक संख्या नहीं बताता (क्योंकि यह दृश्य आकार / अभिविन्यास पर निर्भर करता है) (जो संभव है कि आप के साथ काम कर रहे हैं)। इसे बदलने का सबसे आसान तरीका itemSizeसंपत्ति और / या minimumInteritemSpacing/ सेट करना होगा minimumLineSpacing


4

स्विफ्ट 3.0। दोनों क्षैतिज और ऊर्ध्वाधर स्क्रॉल दिशाओं और चर रिक्ति के लिए काम करता है

कॉलम की संख्या निर्दिष्ट करें

let numberOfColumns: CGFloat = 3

flowLayoutनिर्दिष्ट करने के लिए कॉन्फ़िगर करेंnumberOfColumns

if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
    let horizontalSpacing = flowLayout.scrollDirection == .vertical ? flowLayout.minimumInteritemSpacing : flowLayout.minimumLineSpacing
    let cellWidth = (collectionView.frame.width - max(0, numberOfColumns - 1)*horizontalSpacing)/numberOfColumns
    flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)
}

हर जगह उन सभी लंबे उत्तर और कोड की 5 पंक्तियों के साथ काम करता है :)
जे डो

1
बढ़िया कोशिश। लेकिन यह काम नहीं करेगा यदि आप collectionViewLayout पर एक सेक्शन का उपयोग करते हैं। इसे ठीक करने के लिए, (1) सेल चौड़ाई लेकर और उससे घटते flowLayout.sectionInset.left और flowLayout.sectionInset.right को घटाकर उपलब्ध चौड़ाई की गणना करें। (2) जहाँ आप सेलविद की गणना करते हैं, (1) परिकलित मान के साथ 'view.frame. उपलब्धता' को बदलें। इसके अलावा, याद रखें कि लोड करने के बाद ही व्यू का फ्रेम फाइनल किया जाएगा, और बदल सकता है, इसलिए आपको आवश्यकतानुसार लेआउट का पुनर्निर्माण करना होगा।
वम्बल

4

5+ iOS 13 को स्विफ्ट करने के लिए अपडेट किया गया

संग्रह का अनुमान आकार कोई नहीं होना चाहिए

यहां छवि विवरण दर्ज करें

सेल के लिए मार्जिन घोषित करें

let margin: CGFloat = 10

देखने में minimumInteritemSpacing, कॉन्फ़िगर करें minimumLineSpacing,sectionInset

 guard let collectionView = docsColl, let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }

    flowLayout.minimumInteritemSpacing = margin
    flowLayout.minimumLineSpacing = margin
    flowLayout.sectionInset = UIEdgeInsets(top: margin, left: margin, bottom: margin, right: margin)

UICollectionViewDataSource विधिsizeForItemAt

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

    let noOfCellsInRow = 2   //number of column you want
    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)
}

2

यह सब आपके द्वारा खींचे जाने वाले लेआउट के बारे में है। आप UICollectionViewFlowLayout से विरासत में मिली कस्टम क्लास बना सकते हैं। वर्तमान में कॉलम सेट करने के लिए कोई प्रत्यक्ष तरीका नहीं है। यदि आप इस प्रकार की कार्यक्षमता प्राप्त करना चाहते हैं, तो आपको इसे मैन्युअल रूप से करने की आवश्यकता है। आपको इसे अपने कस्टम फ्लो लेआउट क्लास में संभालना होगा।

अब सवाल उठेगा कि आप इसे कैसे करेंगे? यदि आप सेल फ्रेम को परेशान नहीं करना चाहते हैं तो आप समायोजित कर सकते हैं

 collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
 collectionView:layout:minimumLineSpacingForSectionAtIndex:

एक और तरीका आपको कोशिकाओं के अपने स्थान प्रदान करता है। दो तरीकों से नीचे ओवरराइड करके, जो आपके लेआउट गठन के दौरान कहा जाएगा।

  - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
  - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path

UICollectionViewLayoutAttributes वर्ग है जो सेल स्थिति, फ्रेम, Zindex आदि से निपटेगा


2

यह उत्तर स्विफ्ट 3.0 -> के लिए है

पहले प्रोटोकॉल के अनुरूप:

 UICollectionViewDelegateFlowLayout

फिर इन विधियों को जोड़ें:

    //this method is for the size of items      
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width/3
        let height : CGFloat = 160.0
        return CGSize(width: width, height: height)
    }
    //these methods are to configure the spacing between items

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

    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
    }

1

मैं सिर्फ इमानो पेटिट के उत्तर # 2 पर संलग्न करना चाहता था। यह सुनिश्चित करने के लिए कि स्क्रीन चौड़ाई की परवाह किए बिना मार्जिन सटीक है, मैं वांछित मार्जिन के साथ पुनरावृत्त सॉल्वर का उपयोग करता हूं, और इनपुट के रूप में कॉलम का #। मैंने एक दिशात्मक ध्वज भी जोड़ा जहां उनके अंतिम मार्जिन की तुलना उनके लक्ष्य से की जाएगी।

पुनरावृत्त सॉल्वर नीचे दिखाया गया है और सेलविद और मार्जिन लौटाता है।

private func iterativeCellSpacing(targetMargins : CGFloat,
                                  cellsPerRow : Int,
                                  isMinTarget : Bool) -> (CGFloat, CGFloat)
{
    var w : CGFloat = 0
    var m : CGFloat = targetMargins
    let cols : CGFloat = CGFloat(cellsPerRow)

    let numMargins : CGFloat = cols + 1.0
    let screenWidth : CGFloat = collectionView!.bounds.size.width


    var delta = CGFloat.greatestFiniteMagnitude
    while abs(delta) > 0.001
    {
        let totalMarginSpacing = numMargins * m
        let totalCellSpacing = screenWidth - totalMarginSpacing

        if (isMinTarget)
        {
            w = floor(totalCellSpacing / cols)
            m = ceil((screenWidth - cols * w) / numMargins)
        }
        else
        {
            w = ceil(totalCellSpacing / cols)
            m = floor((screenWidth - cols * w) / numMargins)
        }

        delta = screenWidth - w * CGFloat(cellsPerRow) - m * numMargins
    }

    return (w, m)
}

मैं इसे इस प्रकार कहता हूं:

fileprivate var margin: CGFloat = 20
fileprivate var cellWidth : CGFloat = 80
fileprivate let cellsPerRow = 4

override func viewDidLoad()
{
    super.viewDidLoad()

    (cellWidth, margin) = iterativeCellSpacing(targetMargins: margin, cellsPerRow: 4, isMinTarget: true)
    ...
}

मैं तब सेलविद और मार्जिन मान को फ्लो लेआउट पर लागू करता हूं जैसे:

extension MyCollectionController : UICollectionViewDelegateFlowLayout

{func collectionView (_ collectionView: UICollectionView, लेआउट संग्रहदृश्य दृश्य: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {रिटर्न को प्रमाणित करें (चौड़ाई: cellWidth, height: cellWidth)}

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    collectionView?.collectionViewLayout.invalidateLayout()
    super.viewWillTransition(to: size, with: coordinator)
}

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

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

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

}

उम्मीद है की यह मदद करेगा। शायद यह सुनिश्चित करने का एक आसान तरीका है कि मार्जिन सटीक है, लेकिन यह एक तरीका है। इसके अलावा, इस कोड को उन उपकरणों के लिए परीक्षण नहीं किया गया है जो संग्रह साक्षात्कार को घुमाने की अनुमति देते हैं।

धन्यवाद,


0

सही समाधान UICollectionViewDelegateFlowLayout का उपयोग करना है, लेकिन आप आसानी से सेल की चौड़ाई की गणना कर सकते हैं और इच्छित कॉलम की संख्या पर विभाजित कर सकते हैं।

ट्रिकी को बिना किसी अंश के साथ चौड़ाई बनाना है

(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{
 CGFloat screenWidth = self.view.frame.size.width;
   CGFloat marginWidth = (screenWidth - collectionView.frame.size.width);


   CGFloat cellWith = (collectionView.frame.size.width - marginWidth )/3;
   cellWith= floorf(cellWith);




  CGSize retval = CGSizeMake(cellWith,cellWith);


  return retval;}

0

मैंने एक संग्रह लेआउट बनाया।

विभाजक को दृश्यमान बनाने के लिए, संग्रह दृश्य की पृष्ठभूमि का रंग ग्रे पर सेट करें। प्रति खंड एक पंक्ति।

उपयोग:

let layout = GridCollectionViewLayout()
layout.cellHeight = 50 // if not set, cellHeight = Collection.height/numberOfSections
layout.cellWidth = 50  // if not set, cellWidth = Collection.width/numberOfItems(inSection)
collectionView.collectionViewLayout = layout

लेआउट:

import UIKit

class GridCollectionViewLayout: UICollectionViewLayout {


var cellWidth : CGFloat = 0
var cellHeight : CGFloat = 0
var seperator: CGFloat = 1

private var cache = [UICollectionViewLayoutAttributes]()



override func prepare() {

    guard let collectionView = self.collectionView else {
        return
    }

    self.cache.removeAll()



        let numberOfSections = collectionView.numberOfSections

        if cellHeight <= 0
        {
            cellHeight = (collectionView.bounds.height - seperator*CGFloat(numberOfSections-1))/CGFloat(numberOfSections)
        }

        for section in 0..<collectionView.numberOfSections {

            let numberOfItems = collectionView.numberOfItems(inSection: section)

            let cellWidth2 : CGFloat
            if cellWidth <= 0
            {
                cellWidth2 = (collectionView.bounds.width - seperator*CGFloat(numberOfItems-1))/CGFloat(numberOfItems)
            }
            else
            {
                cellWidth2 = cellWidth
            }


            for row in 0..<numberOfItems {


                let indexPath = NSIndexPath(row: row, section: section)

                let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath as IndexPath)
                attributes.frame = CGRect(x: (cellWidth2+seperator)*CGFloat(row),
                                          y: (cellHeight+seperator)*CGFloat(section),
                                          width: cellWidth2,
                                          height: cellHeight)

                //row_temp.append(attributes)

                self.cache.append(attributes)
            }
            //self.itemAttributes.append(row_temp)
        }

}

override var collectionViewContentSize: CGSize {

    guard let collectionView = collectionView else
    {
        return CGSize.zero
    }

    if (collectionView.numberOfSections <= 0)
    {
        return collectionView.bounds.size
    }

    let width:CGFloat
    if cellWidth <= 0
    {
        width = collectionView.bounds.width
    }
    else
    {
        width = cellWidth*CGFloat(collectionView.numberOfItems(inSection: 0))
    }

    let numberOfSections = CGFloat(collectionView.numberOfSections)
    var height:CGFloat = 0
    height += numberOfSections * cellHeight
    height += (numberOfSections - 1) * seperator



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

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

    var layoutAttributes = [UICollectionViewLayoutAttributes]()

    for attributes in cache {
        if attributes.frame.intersects(rect) {
            layoutAttributes.append(attributes)
        }
    }
    return layoutAttributes
}

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
    return cache[indexPath.item]
}
}

0

यह कोशिश करो, यह मेरे लिए एकदम सही काम कर रहा है,

नीचे दिए गए चरणों का पालन करें:

1. .h फ़ाइल में मानों को परिभाषित करें।

     #define kNoOfColumsForCollection 3
     #define kNoOfRowsForCollection 4
     #define kcellSpace 5
     #define kCollectionViewCellWidth (self.view.frame.size.width - kcellSpace*kNoOfColumsForCollection)/kNoOfColumsForCollection
     #define kCollectionViewCellHieght (self.view.frame.size.height-40- kcellSpace*kNoOfRowsForCollection)/kNoOfRowsForCollection

या

  #define kNoOfColumsForCollection 3
  #define kCollectionViewCellWidthHieght (self.view.frame.size.width - 6*kNoOfColumsForCollection)/kNoOfColumsForCollection

2. संग्रह में कोड नीचे के रूप में लेआउट डेटा स्रोत तरीकों देखें,

 #pragma mark Collection View Layout data source methods
// collection view with autolayout

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 4;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
 {
 return 1;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(4, 4, 4, 4);
}
- (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout
   sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
 return 
 CGSizeMake(kCollectionViewCellWidth,kCollectionViewCellHieght);
 // CGSizeMake (kCollectionViewCellWidthHieght,kCollectionViewCellWidthHieght);
}

उम्मीद है कि यह किसी एक के लिए मदद होगी।


0

पहले प्रोटोकॉल के रूप में UICollectionViewDelegateFlowLayout जोड़ें ।

फिर:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
        var columnCount = 3
        let width  = (view.frame.width - 20) / columnCount
        return CGSize(width: width, height: width)
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.