[iOS] UITableView & UICollectionView

UITableView

Initialization:

@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:

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:

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

必要的UITableViewDataSource:

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:

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:

 @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

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:

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

必要的UICollectionViewDataSource:

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
}

Last updated