ในแนวตั้งUICollectionView,

มันเป็นไปได้ที่จะมีเซลล์เต็มความกว้างแต่อนุญาตให้สูงแบบไดนามิกจะถูกควบคุมโดยautolayout ?

นี่อาจทำให้ฉันรู้สึกว่าเป็น "คำถามที่สำคัญที่สุดใน iOS ที่ไม่มีคำตอบที่ดีจริงๆ"

สำคัญ:

โปรดทราบว่าใน 99% ของกรณีเพื่อให้ได้เซลล์ที่มีความกว้างเต็ม + การกำหนดค่าความสูงแบบไดนามิกอัตโนมัติเพียงแค่ใช้มุมมองตาราง มันง่ายมาก

ตัวอย่างของตำแหน่งที่คุณต้องการมุมมองคอลเลคชันคืออะไร?

มุมมองคอลเลคชันมีประสิทธิภาพมากกว่าการดูตารางอย่างไม่น่าเชื่อ

ตัวอย่างที่ตรงไปตรงมาอย่างหนึ่งที่คุณต้องใช้มุมมองคอลเลคชันเพื่อให้ได้เซลล์แบบเต็มความกว้าง + ความสูงแบบไดนามิกอัตโนมัติ

หากคุณเคลื่อนไหวระหว่างสองเค้าโครงในมุมมองคอลเลกชัน ตัวอย่างเช่นระหว่างเค้าโครงคอลัมน์ 1 ถึง 2 เมื่ออุปกรณ์หมุน

นั่นเป็นสำนวนทั่วไปและปกติใน iOS น่าเสียดายที่สามารถทำได้โดยการแก้ปัญหาที่เกิดขึ้นใน QA นี้เท่านั้น : - /

1. โซลูชันสำหรับ iOS 13+

ด้วย Swift 5.1 และ iOS 13 คุณสามารถใช้ออบเจ็กต์เค้าโครงองค์ประกอบเพื่อแก้ปัญหาของคุณได้

โค้ดตัวอย่างที่สมบูรณ์ต่อไปนี้แสดงวิธีการแสดงหลายบรรทัดUILabelภายในความกว้างเต็มUICollectionViewCell:

CollectionViewController.swift

import UIKit

class CollectionViewController: UICollectionViewController {

    let items = [
        [
            "Lorem ipsum dolor sit amet.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        ],
        [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        ],
        [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
        ]
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        let size = NSCollectionLayoutSize(
            widthDimension: NSCollectionLayoutDimension.fractionalWidth(1),
            heightDimension: NSCollectionLayoutDimension.estimated(44)
        )
        let item = NSCollectionLayoutItem(layoutSize: size)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)

        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        section.interGroupSpacing = 10

        let headerFooterSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(40)
        )
        let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerFooterSize,
            elementKind: "SectionHeaderElementKind",
            alignment: .top
        )
        section.boundarySupplementaryItems = [sectionHeader]

        let layout = UICollectionViewCompositionalLayout(section: section)
        collectionView.collectionViewLayout = layout
        collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
        collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView")
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return items.count
    }

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

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

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView", for: indexPath) as! HeaderView
        headerView.label.text = "Header"
        return headerView
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        coordinator.animate(alongsideTransition: { context in
            self.collectionView.collectionViewLayout.invalidateLayout()
        }, completion: nil)
    }

}

HeaderView.swift

import UIKit

class HeaderView: UICollectionReusableView {

    let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .magenta

        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

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

}

CustomCell.swift

import UIKit

class CustomCell: 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.topAnchor).isActive = true
        label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
        label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
    }

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

}

การแสดงผลที่คาดหวัง:

2. โซลูชันสำหรับ iOS 11+

ด้วย Swift 5.1 และ iOS 11 คุณสามารถซับคลาสUICollectionViewFlowLayoutและตั้งค่าestimatedItemSizeคุณสมบัติเป็นUICollectionViewFlowLayout.automaticSize(สิ่งนี้จะบอกระบบว่าคุณต้องการจัดการกับการปรับUICollectionViewCellขนาดอัตโนมัติ) จากนั้นคุณจะต้องลบล้างlayoutAttributesForElements(in:)และlayoutAttributesForItem(at:)กำหนดความกว้างของเซลล์ สุดท้ายคุณจะต้องลบล้างpreferredLayoutAttributesFitting(_:)เมธอดของเซลล์และคำนวณความสูงของเซลล์

โค้ดที่สมบูรณ์ต่อไปนี้แสดงวิธีการแสดงหลายบรรทัดUILabelภายในแบบเต็มความกว้างUIcollectionViewCell(จำกัด โดยUICollectionViewพื้นที่ปลอดภัยและสิ่งUICollectionViewFlowLayoutที่ใส่เข้าไป):

CollectionViewController.swift

import UIKit

class CollectionViewController: UICollectionViewController {

    let items = [
        [
            "Lorem ipsum dolor sit amet.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        ],
        [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        ],
        [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
        ]
    ]
    let customFlowLayout = CustomFlowLayout()

    override func viewDidLoad() {
        super.viewDidLoad()

        customFlowLayout.sectionInsetReference = .fromContentInset // .fromContentInset is default
        customFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        customFlowLayout.minimumInteritemSpacing = 10
        customFlowLayout.minimumLineSpacing = 10
        customFlowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        customFlowLayout.headerReferenceSize = CGSize(width: 0, height: 40)

        collectionView.collectionViewLayout = customFlowLayout
        collectionView.contentInsetAdjustmentBehavior = .always
        collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
        collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView")
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return items.count
    }

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

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

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView", for: indexPath) as! HeaderView
        headerView.label.text = "Header"
        return headerView
    }

}

CustomFlowLayout.swift

import UIKit

final class CustomFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let layoutAttributesObjects = super.layoutAttributesForElements(in: rect)?.map{ $0.copy() } as? [UICollectionViewLayoutAttributes]
        layoutAttributesObjects?.forEach({ layoutAttributes in
            if layoutAttributes.representedElementCategory == .cell {
                if let newFrame = layoutAttributesForItem(at: layoutAttributes.indexPath)?.frame {
                    layoutAttributes.frame = newFrame
                }
            }
        })
        return layoutAttributesObjects
    }

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

        layoutAttributes.frame.origin.x = sectionInset.left
        layoutAttributes.frame.size.width = collectionView.safeAreaLayoutGuide.layoutFrame.width - sectionInset.left - sectionInset.right
        return layoutAttributes
    }

}

HeaderView.swift

import UIKit

class HeaderView: UICollectionReusableView {

    let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .magenta

        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

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

}

CustomCell.swift

import UIKit

class CustomCell: 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.topAnchor).isActive = true
        label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
        label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
    }

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

    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        let layoutAttributes = super.preferredLayoutAttributesFitting(layoutAttributes)
        layoutIfNeeded()
        layoutAttributes.frame.size = systemLayoutSizeFitting(UIView.layoutFittingCompressedSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
        return layoutAttributes
    }

}

นี่คือการใช้งานทางเลือกบางอย่างสำหรับpreferredLayoutAttributesFitting(_:):

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    let targetSize = CGSize(width: layoutAttributes.frame.width, height: 0)
    layoutAttributes.frame.size = contentView.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
    return layoutAttributes
}

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

การแสดงผลที่คาดหวัง:

ปัญหา

คุณกำลังมองหาความสูงอัตโนมัติและต้องการมีความกว้างเต็มจึงไม่สามารถใช้ทั้งสองUICollectionViewFlowLayoutAutomaticSizeอย่างได้

คุณต้องการทำโดยใช้UICollectionViewด้านล่างนี้เป็นทางออกสำหรับคุณ

สารละลาย

ขั้นตอนที่ 1 : คำนวณความสูงที่คาดหวังของเซลล์

1.ถ้าคุณมีเพียงUILabel ในCollectionViewCellกว่ากำหนดnumberOfLines=0และคำนวณความสูงที่คาดว่าจะUIlableผ่านทั้งสามพารามิเตอร์

func heightForLable(text:String, font:UIFont, width:CGFloat) -> CGFloat {
    // pass string, font, LableWidth  
    let label:UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: width, height: CGFloat.greatestFiniteMagnitude))
     label.numberOfLines = 0
     label.lineBreakMode = NSLineBreakMode.byWordWrapping
     label.font = font
     label.text = text
     label.sizeToFit()

     return label.frame.height
}

2.ถ้าCollectionViewCellมีของคุณเท่านั้นUIImageViewและถ้ามันควรจะเป็นแบบไดนามิกในความสูงมากกว่าที่คุณต้องการเพื่อให้ได้ความสูงUIImage (คุณUIImageViewต้องมีAspectRatioข้อ จำกัด )

// this will give you the height of your Image
let heightInPoints = image.size.height
let heightInPixels = heightInPoints * image.scale

3. หากมีทั้งความสูงมากกว่าที่คำนวณไว้ให้บวกเข้าด้วยกัน

STEP-II : คืนขนาดของCollectionViewCell

1.เพิ่มUICollectionViewDelegateFlowLayoutผู้รับมอบสิทธิ์ใน viewController ของคุณ

2.ใช้วิธีการมอบหมาย

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

    // This is just for example, for the scenario Step-I -> 1 
    let yourWidthOfLable=self.view.size.width
    let font = UIFont(name: "Helvetica", size: 20.0)

    var expectedHeight = heightForLable(array[indePath.row], font: font, width:yourWidthOfLable)


    return CGSize(width: view.frame.width, height: expectedHeight)
}

ฉันหวังว่านี่จะช่วยคุณได้

มีสองวิธีที่คุณสามารถจัดการกับปัญหานี้ได้

วิธีหนึ่งคือคุณสามารถให้เค้าโครงโฟลว์มุมมองคอลเลกชันขนาดโดยประมาณและคำนวณขนาดเซลล์ได้

หมายเหตุ: ตามที่กล่าวไว้ในความคิดเห็นด้านล่างใน iOS 10 คุณไม่จำเป็นต้องระบุและขนาดโดยประมาณเพื่อเรียกใช้การโทรไปยังเซลล์ func preferredLayoutAttributesFitting(_ layoutAttributes:)อีกต่อไป ก่อนหน้านี้ (iOS 9) ต้องการให้คุณระบุขนาดโดยประมาณหากคุณต้องการสอบถามเซลล์ prefferedLayoutAttributes

(สมมติว่าคุณใช้สตอรีบอร์ดและมุมมองคอลเลคชันเชื่อมต่อผ่าน IB)

override func viewDidLoad() {
    super.viewDidLoad()
    let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
    layout?.estimatedItemSize = CGSize(width: 375, height: 200) // your average cell size
}

สำหรับเซลล์ธรรมดานั้นมักจะเพียงพอ หากขนาดยังคงไม่ถูกต้องในเซลล์มุมมองคอลเลกชันคุณสามารถแทนที่func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributesได้ซึ่งจะทำให้คุณสามารถควบคุมขนาดของเซลล์ได้อย่างละเอียดมากขึ้น หมายเหตุ: คุณยังคงต้องกำหนดขนาดโดยประมาณให้กับเค้าโครงโฟลว์

จากนั้นแทนที่func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributesเพื่อส่งคืนขนาดที่ถูกต้อง

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    let autoLayoutAttributes = super.preferredLayoutAttributesFitting(layoutAttributes)
    let targetSize = CGSize(width: layoutAttributes.frame.width, height: 0)
    let autoLayoutSize = contentView.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: UILayoutPriorityRequired, verticalFittingPriority: UILayoutPriorityDefaultLow)
    let autoLayoutFrame = CGRect(origin: autoLayoutAttributes.frame.origin, size: autoLayoutSize)
    autoLayoutAttributes.frame = autoLayoutFrame
    return autoLayoutAttributes
}

หรือคุณสามารถใช้เซลล์ปรับขนาดเพื่อคำนวณขนาดของเซลล์ในไฟล์ UICollectionViewDelegateFlowLayout.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.frame.width
    let size = CGSize(width: width, height: 0)
    // assuming your collection view cell is a nib
    // you may also instantiate a instance of our cell from a storyboard
    let sizingCell = UINib(nibName: "yourNibName", bundle: nil).instantiate(withOwner: nil, options: nil).first as! YourCollectionViewCell
    sizingCell.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    sizingCell.frame.size = size
    sizingCell.configure(with: object[indexPath.row]) // what ever method configures your cell
    return sizingCell.contentView.systemLayoutSizeFitting(size, withHorizontalFittingPriority: UILayoutPriorityRequired, verticalFittingPriority: UILayoutPriorityDefaultLow)
}

แม้ว่าสิ่งเหล่านี้จะไม่ใช่ตัวอย่างที่พร้อมสำหรับการผลิตที่สมบูรณ์แบบ แต่ก็ควรช่วยให้คุณเริ่มต้นไปในทิศทางที่ถูกต้อง ฉันไม่สามารถพูดได้ว่านี่เป็นแนวทางปฏิบัติที่ดีที่สุด แต่วิธีนี้ใช้ได้ผลกับฉันแม้จะมีเซลล์ที่ค่อนข้างซับซ้อนซึ่งมีป้ายกำกับหลายป้ายซึ่งอาจหรือไม่รวมกันเป็นหลายบรรทัดก็ได้

ฉันพบวิธีแก้ปัญหาที่ค่อนข้างง่ายสำหรับปัญหานั้น: ภายใน CollectionViewCell ของฉันฉันได้รับ UIView () ซึ่งเป็นเพียงพื้นหลังเท่านั้น เพื่อให้ได้ความกว้างเต็มฉันเพียงแค่ตั้งจุดยึดต่อไปนี้

bgView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.size.width - 30).isActive = true // 30 is my added up left and right Inset
bgView.topAnchor.constraint(equalTo: topAnchor).isActive = true
bgView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
bgView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
bgView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

"เวทมนตร์" เกิดขึ้นในบรรทัดแรก ฉันตั้งค่า widthAnchor แบบไดนามิกเป็นความกว้างของหน้าจอ สิ่งสำคัญคือการลบสิ่งที่ใส่เข้าไปใน CollectionView ของคุณ มิฉะนั้นเซลล์จะไม่ปรากฏขึ้น หากคุณไม่ต้องการให้มีมุมมองพื้นหลังแบบนี้ให้มองไม่เห็น

FlowLayout ใช้การตั้งค่าต่อไปนี้

layout.itemSize = UICollectionViewFlowLayoutAutomaticSize
layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize

ผลลัพธ์คือเซลล์ขนาดความกว้างเต็มที่มีความสูงแบบไดนามิก

ทำงาน !!! ทดสอบบน IOS: 12.1 Swift 4.1

ฉันมีวิธีง่ายๆที่ใช้งานได้โดยไม่มีการทำลายข้อ จำกัด

ViewControllerClass ของฉัน

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    let cellId = "CustomCell"

    var source = ["nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,","nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,","nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,"]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView.delegate = self
        self.collectionView.dataSource = self
        self.collectionView.register(UINib.init(nibName: cellId, bundle: nil), forCellWithReuseIdentifier: cellId)

        if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        }

    }

}


extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as? CustomCell else { return UICollectionViewCell() }
        cell.setData(data: source[indexPath.item])
        return cell
    }


}

คลาส CustomCell:

class CustomCell: UICollectionViewCell {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var widthConstraint: NSLayoutConstraint!

    override func awakeFromNib() {
        super.awakeFromNib()
        self.widthConstraint.constant = UIScreen.main.bounds.width
    }

    func setData(data: String) {
        self.label.text = data
    }

    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        return contentView.systemLayoutSizeFitting(CGSize(width: self.bounds.size.width, height: 1))
    }

}

ส่วนผสมหลักเป็นsystemLayoutSizeFittingฟังก์ชั่นใน Customcell และเราต้องกำหนดความกว้างของมุมมองภายในเซลล์ด้วยข้อ จำกัด

คุณต้องเพิ่มข้อ จำกัด ด้านความกว้างให้กับ CollectionViewCell

class SelfSizingCell: UICollectionViewCell {

  override func awakeFromNib() {
      super.awakeFromNib()
      contentView.translatesAutoresizingMaskIntoConstraints = false
      contentView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true
  }
}

1. ชุดestimatedItemSizeเค้าโครงโฟลว์ของคุณ:

   collectionViewLayout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize

2. กำหนดข้อ จำกัด ด้านความกว้างในเซลล์และกำหนดให้เท่ากับความกว้างของ superview:

   class CollectionViewCell: UICollectionViewCell {
       private var widthConstraint: NSLayoutConstraint?
   
       ...
   
       override init(frame: CGRect) {
           ...
           // Create width constraint to set it later.
           widthConstraint = contentView.widthAnchor.constraint(equalToConstant: 0)
       }
   
       override func updateConstraints() {
           // Set width constraint to superview's width.
           widthConstraint?.constant = superview?.bounds.width ?? 0
           widthConstraint?.isActive = true
           super.updateConstraints()
       }
   
       ...
   }

ตัวอย่างเต็ม

ทดสอบบน iOS 11

โดยส่วนตัวแล้วฉันพบวิธีที่ดีที่สุดในการมี UICollectionView โดยที่ AutoLayout กำหนดขนาดในขณะที่แต่ละเซลล์สามารถมีขนาดที่แตกต่างกันคือการใช้ฟังก์ชัน UICollectionViewDelegateFlowLayout sizeForItemAtIndexPath ในขณะที่ใช้ Cell จริงเพื่อวัดขนาด

ฉันได้พูดถึงเรื่องนี้ในบล็อกโพสต์ของฉัน

หวังว่าสิ่งนี้จะช่วยให้คุณบรรลุสิ่งที่คุณต้องการ ฉันไม่แน่ใจ 100% แต่ฉันเชื่อว่าแตกต่างจาก UITableView ตรงที่คุณสามารถมีความสูงอัตโนมัติของเซลล์ได้โดยใช้ความไม่ต่อเนื่องของโครงร่างอัตโนมัติกับ

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 44

UICollectionView ไม่มีวิธีให้ AutoLayout กำหนดขนาดเนื่องจาก UICollectionViewCell ไม่จำเป็นต้องเติมเต็มความกว้างทั้งหมดของหน้าจอ

แต่นี่เป็นคำถามสำหรับคุณ : หากคุณต้องการเซลล์ความกว้างเต็มหน้าจอทำไมคุณถึงต้องใช้ UICollectionView กับ UITableView แบบเก่าที่ดีซึ่งมาพร้อมกับเซลล์ปรับขนาดอัตโนมัติ

ตามความคิดเห็นของฉันเกี่ยวกับคำตอบของ Eric วิธีการแก้ปัญหาของฉันคล้ายกับของเขามาก แต่ฉันต้องเพิ่มข้อ จำกัด ใน recommendedSizeFor ... เพื่อ จำกัด มิติคงที่

    override func systemLayoutSizeFitting(
        _ targetSize: CGSize, withHorizontalFittingPriority
        horizontalFittingPriority: UILayoutPriority,
        verticalFittingPriority: UILayoutPriority) -> CGSize {

        width.constant = targetSize.width

        let size = contentView.systemLayoutSizeFitting(
            CGSize(width: targetSize.width, height: 1),
            withHorizontalFittingPriority: .required,
            verticalFittingPriority: verticalFittingPriority)

        print("\(#function) \(#line) \(targetSize) -> \(size)")
        return size
    }

คำถามนี้มีจำนวนที่ซ้ำกันฉันตอบโดยละเอียดที่นี่และให้ตัวอย่างแอปที่ใช้งานได้ที่นี่

ไม่แน่ใจว่าสิ่งนี้มีคุณสมบัติเป็น "คำตอบที่ดีจริงๆ" หรือไม่ แต่เป็นสิ่งที่ฉันใช้เพื่อทำสิ่งนี้ให้สำเร็จ เค้าโครงโฟลว์ของฉันเป็นแนวนอนและฉันกำลังพยายามปรับความกว้างด้วยการจัดวางอัตโนมัติดังนั้นจึงคล้ายกับสถานการณ์ของคุณ

extension PhotoAlbumVC: UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // My height is static, but it could use the screen size if you wanted
    return CGSize(width: collectionView.frame.width - sectionInsets.left - sectionInsets.right, height: 60) 
  }
}

จากนั้นในตัวควบคุมมุมมองที่มีการแก้ไขข้อ จำกัด การจัดวางอัตโนมัติฉันจะปิดการแจ้งเตือน NSNotification

NotificationCenter.default.post(name: NSNotification.Name("constraintMoved"), object: self, userInfo: nil)

ในคลาสย่อย UICollectionView ของฉันฉันฟังการแจ้งเตือนนั้น:

// viewDidLoad
NotificationCenter.default.addObserver(self, selector: #selector(handleConstraintNotification(notification:)), name: NSNotification.Name("constraintMoved"), object: nil)

และทำให้เค้าโครงไม่ถูกต้อง:

func handleConstraintNotification(notification: Notification) {
    self.collectionView?.collectionViewLayout.invalidateLayout()
}

ซึ่งทำให้sizeForItemAtถูกเรียกอีกครั้งโดยใช้ขนาดใหม่ของมุมมองคอลเลกชัน ในกรณีของคุณควรอัปเดตได้ตามข้อ จำกัด ใหม่ที่มีอยู่ในเค้าโครง

บนของคุณviewDidLayoutSubviewsตั้งค่าเป็นestimatedItemSizeความกว้างเต็ม (เค้าโครงหมายถึงวัตถุ UICollectionViewFlowLayout):

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.bounds.size.width, height: 120)
}

ในเซลล์ของคุณตรวจสอบให้แน่ใจว่าข้อ จำกัด ของคุณสัมผัสทั้งด้านบนและด้านล่างของเซลล์ (รหัสต่อไปนี้ใช้การทำแผนที่เพื่อลดความซับซ้อนของการตั้งค่าข้อ จำกัด แต่คุณสามารถทำได้ด้วย NSLayoutConstraint หรือ IB หากคุณต้องการ):

constrain(self, nameLabel, valueLabel) { view, name, value in
        name.top == view.top + 10
        name.left == view.left
        name.bottom == view.bottom - 10
        value.right == view.right
        value.centerY == view.centerY
    }

Voila ตอนนี้เซลล์ของคุณจะเติบโตสูงโดยอัตโนมัติ!

ไม่มีโซลูชันใดที่ใช้ได้ผลสำหรับฉันเนื่องจากฉันต้องการความกว้างแบบไดนามิกเพื่อปรับระหว่างความกว้างของ iPhone

    class CustomLayoutFlow: UICollectionViewFlowLayout {
        override init() {
            super.init()
            minimumInteritemSpacing = 1 ; minimumLineSpacing = 1 ; scrollDirection = .horizontal
        }

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            minimumInteritemSpacing = 1 ; minimumLineSpacing = 1 ; scrollDirection = .horizontal
        }

        override var itemSize: CGSize {
            set { }
            get {
                let width = (self.collectionView?.frame.width)!
                let height = (self.collectionView?.frame.height)!
                return CGSize(width: width, height: height)
            }
        }
    }

    class TextCollectionViewCell: UICollectionViewCell {
        @IBOutlet weak var textView: UITextView!

        override func prepareForReuse() {
            super.prepareForReuse()
        }
    }




    class IntroViewController: UIViewController, UITextViewDelegate, UICollectionViewDataSource, UICollectionViewDelegate, UINavigationControllerDelegate {
        @IBOutlet weak var collectionViewTopDistanceConstraint: NSLayoutConstraint!
        @IBOutlet weak var collectionViewTopDistanceConstraint: NSLayoutConstraint!
        @IBOutlet weak var collectionView: UICollectionView!
        var collectionViewLayout: CustomLayoutFlow!

        override func viewDidLoad() {
            super.viewDidLoad()

            self.collectionViewLayout = CustomLayoutFlow()
            self.collectionView.collectionViewLayout = self.collectionViewLayout
        }

        override func viewWillLayoutSubviews() {
            self.collectionViewTopDistanceConstraint.constant = UIScreen.main.bounds.height > 736 ? 94 : 70

            self.view.layoutIfNeeded()
        }
    }

จาก iOS 10 เรามี API ใหม่เกี่ยวกับเค้าโครงโฟลว์เพื่อทำเช่นนั้น

สิ่งที่คุณต้องทำคือการกำหนดของคุณไปยังคงใหม่flowLayout.estimatedItemSizeUICollectionViewFlowLayoutAutomaticSize

ที่มา

AutoLayout สามารถใช้สำหรับการปรับขนาดเซลล์โดยอัตโนมัติใน CollectionView ได้ใน 2 ขั้นตอนง่ายๆ:

1. การเปิดใช้งานการปรับขนาดเซลล์แบบไดนามิก

flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

2. มีมุมมองคอนเทนเนอร์และตั้งค่า containerView.widthAnchor.constraint จากcollectionView(:cellForItemAt:)เพื่อจำกัดความกว้างของ contentView เป็นความกว้างของ collectionView

class ViewController: UIViewController, UICollectionViewDataSource {
    ...

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! MultiLineCell
        cell.textView.text = dummyTextMessages[indexPath.row]
        cell.maxWidth = collectionView.frame.width
        return cell
    }

    ...
}

class MultiLineCell: UICollectionViewCell{
    ....

    var maxWidth: CGFloat? {
        didSet {
            guard let maxWidth = maxWidth else {
                return
            }
            containerViewWidthAnchor.constant = maxWidth
            containerViewWidthAnchor.isActive = true
        }
    }

    ....
}

เพียงเท่านี้คุณก็จะได้ผลลัพธ์ที่ต้องการ อ้างถึงส่วนสำคัญต่อไปนี้สำหรับรหัสเต็ม:

• SelfSizingCollectionViewCellDemo + UILabel.swift
• SelfSizingCollectionViewCellDemo + UITextView.swift

อ้างอิง / เครดิต:

• บล็อกโพสต์ของV8tr - คอลเลกชันดูเซลล์การปรับขนาดด้วยตนเอง: การสอนทีละขั้นตอน
• คำตอบอื่นของ stackoverflow

ภาพหน้าจอ:

คุณต้องสืบทอดคลาส UICollectionViewDelegateFlowLayout บน collectionViewController ของคุณ จากนั้นเพิ่มฟังก์ชั่น:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width, height: 100)
}

เมื่อใช้สิ่งนั้นคุณจะมีขนาดความกว้างของความกว้างของหน้าจอ

และตอนนี้คุณมี collectionViewController ที่มีแถวเป็น tableViewController

หากคุณต้องการให้ขนาดความสูงของแต่ละเซลล์เป็นแบบไดนามิกคุณควรสร้างเซลล์ที่กำหนดเองสำหรับแต่ละเซลล์ที่คุณต้องการ