CenteredCollectionView 使用教程

CenteredCollectionView 使用教程

CenteredCollectionViewA lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift项目地址:https://gitcode.com/gh_mirrors/ce/CenteredCollectionView

项目介绍

CenteredCollectionView 是一个轻量级的 UICollectionViewFlowLayout 扩展，用于实现页面分页和居中显示的“轮播效果”。它可以帮助开发者快速实现类似 Instagram 或 Apple Music 的滚动体验。该项目由开发者 @BenEmdon 贡献，支持 iOS 9.0 及以上版本，并且兼容 CocoaPods、Carthage 和 Swift Package Manager 三种安装方式。

项目快速启动

安装

使用 CocoaPods

在 Podfile 中添加以下行：

pod 'CenteredCollectionView'

然后运行 pod install。

使用 Swift Package Manager

在 Xcode 中添加包依赖，输入以下 URL：

https://github.com/BenEmdon/CenteredCollectionView

或者在 Package.swift 中添加依赖：

dependencies: [
    .package(url: "https://github.com/BenEmdon/CenteredCollectionView", from: "2.2.2")
]

初始化

在你的视图控制器中，导入 CenteredCollectionView：

import CenteredCollectionView

然后初始化 CenteredCollectionView：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var centeredCollectionView: CenteredCollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 初始化 CenteredCollectionView
        centeredCollectionView = CenteredCollectionView()
        centeredCollectionView.dataSource = self
        centeredCollectionView.delegate = self

        // 注册 cell
        centeredCollectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: "cell")

        // 添加到视图中
        view.addSubview(centeredCollectionView)
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCollectionViewCell
        cell.configure(with: "Item \(indexPath.item)")
        return cell
    }
}

应用案例和最佳实践

图片展示

在图片浏览或摄影应用中，通过 CenteredCollectionView 可以打造流畅的轮播界面：

class PhotoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var photoCollectionView: CenteredCollectionView!
    var photos: [UIImage] = [UIImage(named: "photo1")!, UIImage(named: "photo2")!, UIImage(named: "photo3")!]

    override func viewDidLoad() {
        super.viewDidLoad()

        photoCollectionView = CenteredCollectionView()
        photoCollectionView.dataSource = self
        photoCollectionView.delegate = self

        photoCollectionView.register(PhotoCell.self, forCellWithReuseIdentifier: "photoCell")

        view.addSubview(photoCollectionView)
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "photoCell", for: indexPath) as! PhotoCell
        cell.imageView.image = photos[indexPath.item]
        return cell
    }
}

内容推荐

新闻、音乐、视频等应用的首页推荐内容可以通过平滑翻页的方式呈现：

class ContentViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var contentCollectionView: CenteredCollectionView!
    var contents: [Content] = [Content(title: "News 1"), Content(title: "Music 1"), Content(title

CenteredCollectionViewA lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift项目地址:https://gitcode.com/gh_mirrors/ce/CenteredCollectionView