iT邦幫忙

2023 iThome 鐵人賽

DAY 18
0
Mobile Development

swift 30天之旅系列 第 18

第十八天:控件和視圖 - UICollectionView

  • 分享至 

  • xImage
  •  

UICollectionView是一個非常強大的UI控件,用於在多列和多行中展示數據。不同於UITableView只能垂直滾動,UICollectionView提供了更大的自由度,允許數據在垂直或水平方向上滾動。今天,我們將著重於UICollectionView的使用和自定義。

UICollectionView基礎

UICollectionView由三個主要部分組成:cells、supplementary views和decoration views。今天我們主要關注cells。

創建UICollectionView

首先,在你的storyboardxib中添加一個UICollectionView。然後,將其與Swift代碼連接:

@IBOutlet weak var collectionView: UICollectionView!

初始化代理和數據源:

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self
    collectionView.dataSource = self
}

UITableView一樣,你需要擴展你的ViewController以實現UICollectionViewDataSourceUICollectionViewDelegate

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    // 實現協議的方法
}

UICollectionViewDataSource

這個協議負責管理數據:

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellIdentifier", for: indexPath) as! CustomCollectionViewCell
    cell.imageView.image = UIImage(named: dataCollectionArray[indexPath.row])
    return cell
}

這裡,dataCollectionArray是存放你的數據(例如圖片名稱)的陣列。

自定義UICollectionViewCell

UITableViewCell類似,你可以使用預設的cell,也可以自定義。

創建一個新的Swift文件,命名為CustomCollectionViewCell.swift,並繼承UICollectionViewCell

class CustomCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
}

在你的storyboardxib中,選擇你的UICollectionView並添加一個自定義的cell。設置其類別為CustomCollectionViewCell並設置重用標識符,例如"customCellIdentifier"。

UICollectionViewFlowLayout

要定義每個cell的大小和間距,你需要使用UICollectionViewFlowLayout

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

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

處理選擇

當用戶選擇一個項目時,你可能希望執行一些操作:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    print("User selected item at \(indexPath.row)")
}

結論

UICollectionView是一個非常強大的控件,它提供了極大的自由度和彈性,允許你呈現數據的方式遠超過傳統的列表。通過自定義和擴展,你可以創建出令人印象深刻的布局和交互效果。在你的開發旅程中,這將是一個必不可少的工具。


上一篇
第十七天:控件和視圖 - UITableView和UITableViewCell
下一篇
第十九天:導航和界面流
系列文
swift 30天之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言