🎨 2025 最新 Swift UICollectionView 完整教學 | 網格排列圖片 🎨

在 iOS 開發中，UICollectionView 是一個強大的工具，可以讓開發者輕鬆地將圖片或其他元素排列成網格樣式，使 App 的界面更加美觀。在這篇文章中，我們將深入探討如何使用 Swift 來建立一個 UICollectionView，並將圖片排列成網格樣式，包含最新的語法與最佳實踐。

建立 UICollectionView

首先，我們需要建立一個 UICollectionView，並將它放置在我們的 View Controller 中。這個過程有幾個步驟：

1. 建立 UICollectionViewFlowLayout
2. 設定 UICollectionView 的框架與大小
3. 設定每個 cell 的大小
4. 添加 UICollectionView 到 View Controller
5. 設定 delegate 和 dataSource

以下是具體的實作步驟：

let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 100, height: 100) // 每個 cell 的大小
let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)

// 設定背景顏色
collectionView.backgroundColor = .white

// 添加到 View Controller
self.view.addSubview(collectionView)

// 設定 delegate 和 dataSource
collectionView.delegate = self
collectionView.dataSource = self

// 註冊 UICollectionViewCell
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")

加入圖片

接著，我們需要將圖片加入到 UICollectionView 中。首先，建立一個圖片陣列，然後將圖片載入到這個陣列中。

var images: [UIImage] = [
    UIImage(named: "image1")!,
    UIImage(named: "image2")!,
    UIImage(named: "image3")!
]

接下來，我們需要實作 UICollectionView 的 delegate 和 dataSource 方法，以便將圖片顯示在 UICollectionView 中：

extension YourViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        
        // 確保 cell 有一個 UIImageView
        let imageView = cell.viewWithTag(1) as? UIImageView ?? UIImageView(frame: cell.bounds)
        imageView.image = images[indexPath.item]
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        
        cell.contentView.addSubview(imageView)
        return cell
    }
}

錯誤排除與最佳實踐

在實作 UICollectionView 時，可能會遇到以下常見問題：

1. **圖片未顯示**：確保圖片名稱正確且已正確載入到專案中。
2. **cell 大小不正確**：請檢查 `layout.itemSize` 的設定，確保它符合你的需求。
3. **滑動不流暢**：如果 UICollectionView 包含大量圖片，考慮使用 lazy loading 或圖片壓縮技術來優化效能。

延伸應用

UICollectionView 不僅限於顯示圖片，你可以使用它來展示多種資料型態，例如：

– 商品列表
– 聯絡人資訊
– 自訂的 UI 元素

這使得 UICollectionView 成為一個非常靈活的 UI 元件。

結論

在本文中，我們介紹了如何使用 Swift 來建立一個 UICollectionView，並將圖片排列成網格樣式。我們從建立 UICollectionViewFlowLayout 開始，設定 UICollectionView 的大小和每個 cell 的大小，然後建立了一個圖片陣列並實作 UICollectionView 的 delegate 和 dataSource 方法。這樣，你就能輕鬆地展示圖片，讓你的 App 更具吸引力。

Q&A（常見問題解答）

Q1: UICollectionView 和 UITableView 有什麼區別？

A1: UICollectionView 允許自由排列元素，適合顯示多維度的資料，而 UITableView 則是單維度的列表顯示。

Q2: 如何在 UICollectionView 中使用不同大小的 cell？

A2: 可以透過實作 `sizeForItemAt` 方法來設定每個 cell 的大小，根據需要動態調整。

Q3: UICollectionView 的性能優化有什麼建議？

A3: 使用 image caching、減少 cell 的複雜度、並確保使用自訂的 cell 來提高性能。

—