iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
2
Mobile Development

iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 系列 第 8

[Day 7] Swift 新增 tableview+ 客製化 cell

簡要

上方的分類表已經有大概的樣子
接下來下方是一個tableview

https://ithelp.ithome.com.tw/upload/images/20190922/20112271INCRiBUdqP.jpg

裡面的構造極其複雜
在不同的index row裡面
有塞 banner
有塞 collectionview
以及 普通的客製化 tableview cell
今天就要從最簡單的客製化cell先做起

客製化cell

跟上一篇一下要先新增swift+xib檔案
差別只有collectionview celltableview cell
選取不同而已

https://ithelp.ithome.com.tw/upload/images/20190922/20112271Fs0zCMh4fD.png

食物商家封面部分
我目前是這設計這樣
上方圖片cell高度的一半
其他文字平均分配到下半部

https://ithelp.ithome.com.tw/upload/images/20190922/20112271sNwbKVaCPp.png

tableview

這邊也先做addsubview
在原先的initIMUI下面addSubview

override func initIMUI() {
    super.initIMUI()
    self.view.backgroundColor = UIColor.white
    self.view.addSubview(self.collectionView)
    self.view.addSubview(self.tableView)
}

以及設定好你的懶加載tableView
任設有關tableView都設置都在裡面實作
這邊的tableview y設置
因為上方已經有collectionView
只要設置maxY就可以緊貼collectionView下方
至於高度設置 整體高度 - 剛剛的maxY
並且別忘記下方還有tabBar
所以tabBar高度也要扣除
總結就是 KScreenHeight - collectionView.frame.maxY - kTabBarHeight

lazy var tableView: UITableView = {
    //初始化
    let tableView = UITableView()
    //tableview方位設置
    tableView.frame = CGRect(x: 20, y:  collectionView.frame.maxY, width: KScreenWidth - 20*2, height: KScreenHeight - collectionView.frame.maxY - kTabBarHeight)
    //delegat,dataSource設置
    tableView.delegate = self
    tableView.dataSource = self
    //註冊客製化cell
    tableView.register(UINib(nibName:"CoverCell", bundle:nil),
                       forCellReuseIdentifier:"myCell")
    return tableView
}()

設置好以後也別忘記
填入頂部的delegate部分

class HomeViewController: JGBaseViewController,UICollectionViewDataSource,UICollectionViewDelegate,UITableViewDelegate, UITableViewDataSource

以及tableView常用的func

// MARK: - tableview
// tableview count 數量
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10;
}

// 設置 cell 的高度
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 300
}

// 各index rox cell設定
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // 宣告我們自己的客製化cell
    let cell:CoverCell = tableView.dequeueReusableCell(withIdentifier: "myCell")
        as! CoverCell
    return cell
}

大部分就大功告成了
再來看來下成果

是不是越來越有樣子了
/images/emoticon/emoticon12.gif

好拉 還好很多要微調
繼續加油


上一篇
[Day 6] Swift 新增 collectionview + 客製化 cell
下一篇
[Day 8] Swift Label 自適應寬度 NSAttributedString 運用
系列文
iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 31

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-05 10:07:22

手打麵吃到飽 (X

我要留言

立即登入留言