> For the complete documentation index, see [llms.txt](https://frost.gitbook.io/iosbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://frost.gitbook.io/iosbook/ios/ios-book/ios-uitableview-and-uicollectionview.md).

# \[iOS] UITableView & UICollectionView

## UITableView

**Initialization:**

```swift
@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
   super.viewDidLoad()
   self.initTableView()
}

private func initTableView() {
   self.tableView.delegate = self
   self.tableView.dataSource = self
   self.tableView.tableFooterView = UIView(frame: .zero) //設定Tableview 的cells下方為空白而不會有格線
   self.tableView.register(UINib(nibName: "MyTableViewCell", bundle: nil), forCellReuseIdentifier: "MyTableViewCell")
   self.tableView.addSubview(self.refreshControl)
}
```

**RefreshControl:**

```swift
lazy var refreshControl: UIRefreshControl = {
   let refreshControl = UIRefreshControl()
    refreshControl.addTarget(self, action: #selector(ViewController.handleRefresh(_:)), for: UIControlEvents.valueChanged)
    refreshControl.tintColor = UIColor.blue   
    return refreshControl
}()

func handleRefresh(_ refreshControl: UIRefreshControl) {
    //TODO
    self.tableView.reloadData()
    refreshControl.endRefreshing()
}

self.tableView.addSubview(self.refreshControl)
```

**常用的UITableViewDelegate:**

```swift
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
}
```

**必要的UITableViewDataSource:**

```swift
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}
    
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MyTableViewCell", for: indexPath) as! MyTableViewCell
    return cell
}
```

**Insert rows:**

```swift
dataArray.insert(contentsOf: ["aaa", "bbb"], at: 1) 

tableView.beginUpdates() 
let indexPaths = [IndexPath(row: 1, section: 0), IndexPath(2, section: 0)]
tableView.insertRows(at: indexPaths, with: UITableViewRowAnimation.automatic)
tableView.endUpdates()
```

## UICollectionView

**Initialization:**

```swift
 @IBOutlet weak var collectionView: UICollectionView!
  
 override func viewDidLoad() {
     super.viewDidLoad()
     self.initClooectionView()
 }

private func initClooectionView() {
   self.collectionView.dataSource = self
   self.collectionView.delegate = self
   self.collectionView.register(UINib(nibName: "MyCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCollectionViewCell")
}
```

**layout: UICollectionViewFlowLayout**

```swift
override func viewWillAppear(_ animated: Bool) {
   super.viewWillAppear(animated)
   self.initClooectionViewLayout()
}

func initClooectionViewLayout() {
   self.view.layoutIfNeeded() // this line let you can access it's frame and it will have the same value as you print in viewDidAppear
   let edgeIinset:CGFloat = 20 //邊界的間距
   let gap:CGFloat = 10 //Cell與Cell之間的間距
   self.collectionView.contentInset = UIEdgeInsets(top: edgeIinset, left: edgeIinset, bottom: edgeIinset, right: edgeIinset)
   let cellWidth = (self.view.frame.size.width - (2 * edgeIinset) - (2 * gap))/3.0
   //cellWidth為一橫排3個Cell的寬度

   let flowLayout = UICollectionViewFlowLayout()
   flowLayout.scrollDirection = .vertical //垂直scroll
   flowLayout.minimumLineSpacing = gap //The minimum spacing to use between lines of items in the grid.
   flowLayout.minimumInteritemSpacing = gap //The minimum spacing to use between items in the same row.
   flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)
   self.collectionView.collectionViewLayout = flowLayout
   self.collectionView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
 }

```

**常用的UICollectionViewDelegate:**

```swift
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
     //TODO 
}
```

**必要的UICollectionViewDataSource:**

```swift
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
}
    
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionViewCell", for: indexPath as IndexPath) as! MyCollectionViewCell
    return cell
}
```