ios swift5 collectionView 瀑布流(两列)

文章目录

  • 1.瀑布流
    • [1.1 demo地址](#1.1 demo地址)
    • [1.2 记得把部署的最低版本由8改成11,13甚至更高。不然编译会报错](#1.2 记得把部署的最低版本由8改成11,13甚至更高。不然编译会报错)
  • 2.动态计算图片和文字的高度

1.瀑布流

1.1 demo地址

CollectionViewWaterfallLayout - github

1.2 记得把部署的最低版本由8改成11,13甚至更高。不然编译会报错

2.动态计算图片和文字的高度

swift 复制代码
//可以正常使用
import UIKit
import SnapKit
class ConcernedVC: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    let cellReuseIdentifier = "WaterfallCell"
    let itemsPerRow: CGFloat = 2
    let sectionInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    let itemSpacing: CGFloat = 10 // Spacing between items in the same column
    var columnHeights: [CGFloat] = [0, 0] // Heights of the two columns

    let sampleData: [(image: UIImage, text: String)] = [
        (UIImage(named: "img_about us_app")!, "Sample Text 1"),
        (UIImage(named: "banner")!, "Sample Text 2adfahdfkajdfiahdofhadoifhaodhfaoihdfhasdifhaidhfapfdhiashf"),
        (UIImage(named: "img_about us_app")!, "Sample Text 1"),
        (UIImage(named: "banner")!, "Sample Text 2adfahdfkajdfiahdofhadoifhaodhfaoihdfhasdifhaidhfapfdhiashf"),
        (UIImage(named: "img_about us_app")!, "Sample Text 1"),
        (UIImage(named: "banner")!, "Sample Text 2adfahdfkajdfiahdofhadoifhaodhfaoihdfhasdifhaidhfapfdhiashf"),
        (UIImage(named: "img_about us_app")!, "Sample Text 1"),
        (UIImage(named: "img_about us_app")!, "Sample Text 1"),

        // Add more sample data here
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        
//        let layout = UICollectionViewFlowLayout() // Create a layout instance
//        collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) // Initialize UICollectionView with the layout
        

        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(WaterfallCell.self, forCellWithReuseIdentifier: cellReuseIdentifier)
        collectionView.backgroundColor = .white
    }

    // MARK: UICollectionViewDataSource

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

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellReuseIdentifier, for: indexPath) as! WaterfallCell
        let data = sampleData[indexPath.item]
        cell.configure(with: data)
        return cell
    }

    // MARK: UICollectionViewDelegateFlowLayout


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
        let availableWidth = collectionView.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        let data = sampleData[indexPath.item]
        let imageAspectRatio = data.image.size.width / data.image.size.height
        let textHeight = data.text.height(withConstrainedWidth: widthPerItem - 16, font: UIFont.systemFont(ofSize: 14))
        let imageHeight = min(200, widthPerItem / imageAspectRatio) // Limit image height
        let totalHeight = imageHeight + textHeight + 16
        return CGSize(width: widthPerItem, height: totalHeight)
    }

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

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return sectionInsets.left
    }
}
class WaterfallCell: UICollectionViewCell {
    let imageView = UIImageView()
    let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.backgroundColor = .yellow
        contentView.addSubview(imageView)
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true

        contentView.addSubview(label)
        label.numberOfLines = 2
        label.font = UIFont.systemFont(ofSize: 14)
    }

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

    func configure(with data: (image: UIImage, text: String)) {
        imageView.image = data.image
        label.text = data.text

        let imageAspectRatio = data.image.size.width / data.image.size.height
        let imageHeight = frame.width / imageAspectRatio
        imageView.frame = CGRect(x: 0, y: 0, width: frame.width, height: imageHeight)

        label.frame = CGRect(x: 0, y: imageHeight + 8, width: frame.width, height: labelHeight)
    }

    private var labelHeight: CGFloat {
        let labelWidth = frame.width - 16
        return label.text?.height(withConstrainedWidth: labelWidth, font: UIFont.systemFont(ofSize: 14)) ?? 0
    }
}
extension String {
    func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
        let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
        let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
        return ceil(boundingBox.height)
    }
}

//使用
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
let vc = ConcernedVC(collectionViewLayout: layout)
相关推荐
FeliksLv17 小时前
iOS 集成mars xlog
ios
2501_9151063219 小时前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
大熊猫侯佩2 天前
在肖申克监狱玩转 iOS 26:安迪的 Liquid Glass 复仇计划
ios·swiftui·swift
非专业程序员2 天前
逆向分析CoreText中的字体级联/Font Fallback机制
前端·ios
库奇噜啦呼2 天前
【iOS】简单的四则运算
macos·ios·cocoa
white-persist3 天前
【burp手机真机抓包】Burp Suite 在真机(Android and IOS)抓包手机APP + 微信小程序详细教程
android·前端·ios·智能手机·微信小程序·小程序·原型模式
恋猫de小郭3 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
2501_915909064 天前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
2501_915918415 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview
感谢地心引力5 天前
iOS26 打开开发者模式
windows·macos·ios·iphone·ios26