#74 實作有間距的TableView(多個sections)

日期：

要做出如上圖TableView中cell間有間距 且 以圓角方式呈現，可參考用多個section的方式來實現


如上圖中所示(TableViewcontroller.swift)


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        //return restaurantNames.count //回傳每個section中要顯示陣列中的資料數
        return 1

    }
裡面的return原先是用return restaurantNames.count//計算陣列中的資料數，表示在每個section中要呈現的資料筆數，現在把return值改為1，表示每個section只要顯示1個值就好。


    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return restaurantNames.count //設定表格中只有幾個區塊(section)
    }

這邊設定TableView中要有幾個section，由於現在每筆資料要在單一個section中呈現，故回傳值改為陣列中的資料筆數。


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "Cell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! testTableViewCell

        //cell.nameLabel.text = restaurantNames[indexPath.row]
        cell.nameLabel.text = restaurantNames[indexPath.section]
        //cell.imageview.image = UIImage(named: restaurantPics[indexPath.row])
        cell.imageview.image = UIImage(named: restaurantPics[indexPath.section])
        return cell

    }


接著在設定Cell欄位中的顯示資料，原先因為是在同一個section中顯示，故顯示方式用indexPath.row，現在改成要再多個section中顯示資料，故改成用indexPath.section的計算方式來呈現。



至於圓角的部分則是在cell的attribute設定欄位中，加入layer.cornerRadius，在設定值即可
clipsToBounds = true
layer.cornerRadius = 30
layer.shadowOpacity = 0.5

layer.borderColor =
layer.borderWidth =
 另外在 controller.swift中加入下列程式碼可改變section間的間距
//調整tableview間距
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
    {
        return 10
    }
    
    override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat
    {
        return 10
    }
    
   override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return UIView()
    }
    
   override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        return UIView()

    }



要取消TableView的背景色，點選TableView後，在右側View的Background選項中選取Clear Color即可


---------------------------------------------------------------
在UIViewController中加入TableView的方式能使Storyboard的應用更多元，不過要注意，只能使用ViewController.swift，並且要在class屬性另外宣告

UITableViewDelegate,UITableViewDataSource



另外設定section數、每個section顯示資料筆數，以及cell中資料顯示方式的funn宣告如下

func numberOfSections(in tableView: UITableView) -> Int {
       
            return bgimgArray.count
        }
    

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
let cell = tableView.dequeueReusableCell(withIdentifier: "restaurantCell", for: indexPath) as! eatTableViewCell//設定指定的cell名稱、對應的cell.swift檔
     
     cell.nameLabel.text = nameArray[indexPath.section]
     
     cell.bgimgView.image = UIImage(named: bgimgArray[indexPath.section])
       
        return cell
    }

記得要再另外點選TableView後按ctrl拖拉delegate,source兩個協定到ViewController才能讀得到.swift檔的設定內容

留言

張貼留言