Swift - 自定義視圖以顯示空表格單元

Question

我正在使用Swift 3，Xcode 8.2。

我已經能夠創建一個標籤來覆蓋空表格視圖單元格，當沒有顯示。

我的代碼如下，它位於UITableViewController的子類中。

override func numberOfSections(in tableView: UITableView) -> Int { 

    // if there are scans to display... 
    if items.count > 0 { 
     tableView.backgroundView = nil 
     tableView.separatorStyle = .singleLine 
     return 1 
    } 
    else { // otherwise, return 0, remove cell lines, and display a Label 
     let rect = CGRect(x: 0, 
          y: 0, 
          width: tableView.bounds.size.width, 
          height: tableView.bounds.size.height) 
     let noScanLabel: UILabel = UILabel(frame: rect) 

     noScanLabel.text = "No Scans" 
     noScanLabel.textColor = UIColor.gray 
     noScanLabel.font = UIFont.boldSystemFont(ofSize: 24) 

     noScanLabel.textAlignment = NSTextAlignment.center 



     tableView.backgroundView = noScanLabel 
     tableView.separatorStyle = .none 



     return 0 
    } 
} 

這是結果。

看起來不錯。但是，如何做到這樣，我可以將另一行文本包含在向下箭頭中，指向凸起的中心按鈕。就像「點擊這裏開始掃描」？

我已經嘗試在noScanLabel.text字段中添加新的行字符，但這並沒有解決。任何指向正確方向的指針都會有所幫助。

Answer 1

簡單的解決辦法是在noScanLabel上設置numberOfLines爲0。這樣，新的線將顯示。

let noScanLabel: UILabel = UILabel(frame: rect) 

noScanLabel.text = "No Scans" 
noScanLabel.textColor = UIColor.gray 
noScanLabel.font = UIFont.boldSystemFont(ofSize: 24) 
noScanLabel.numberOfLines = 0 

noScanLabel.textAlignment = NSTextAlignment.center 

---

注意，除了在這種情況下，我建議，爲了更好的維護，實際上從UIViewController刪除TableView（因此不能從UITableViewController繼承），並與空視圖替換它，當你發現沒有掃描可用。這將使每個國家更加獨立，並使維護更容易。

Answer 2

有幾種方法可以實現您的目標。有一個叫做DZNEmptyDataSet的着名庫，用於處理空的tableviews和collectionviews。 https://github.com/dzenbot/DZNEmptyDataSet

另一種方法是用您指定的矩形創建一個uview，然後爲該uiview添加兩個標籤。一個是你的noScanLabel，另一個是包含你的箭頭的標籤或圖像。您可以根據需要設置佈局約束，使箭頭朝下。

此代碼似乎運作良好。如果需要的話

let rect = CGRect(x: 0, y: 0, width: tableview.bounds.size.width, height: tableview.bounds.size.height) 
    let noDataView = UIView(frame: rect) 
    let noScanLabel = UILabel() 
    noScanLabel.text = "No Scans" 
    noScanLabel.textColor = UIColor.gray 
    noScanLabel.font = UIFont.boldSystemFont(ofSize: 24) 
    noScanLabel.textAlignment = NSTextAlignment.center 
    let arrowLabel = UILabel() 
    arrowLabel.text = "Add Arrow Image to this label" 
    arrowLabel.textColor = UIColor.gray 
    arrowLabel.font = UIFont.boldSystemFont(ofSize: 24) 
    arrowLabel.textAlignment = NSTextAlignment.center 

    noScanLabel.widthAnchor.constraint(equalToConstant: 100) 
    arrowLabel.widthAnchor.constraint(equalToConstant: 50) 
    noDataView.addSubview(noScanLabel) 
    noDataView.addSubview(arrowLabel) 

    arrowLabel.translatesAutoresizingMaskIntoConstraints = false 
    noDataView.translatesAutoresizingMaskIntoConstraints = false 
    noScanLabel.translatesAutoresizingMaskIntoConstraints = false 


    self.tableview.addSubview(noDataView) 
    noDataView.isHidden = false 
    noDataView.centerXAnchor.constraint(equalTo: self.tableview.centerXAnchor).isActive = true 
    noDataView.centerYAnchor.constraint(equalTo: self.tableview.centerYAnchor).isActive = true 

    noScanLabel.centerXAnchor.constraint(equalTo: noDataView.centerXAnchor).isActive = true 
    noScanLabel.topAnchor.constraint(equalTo: noDataView.centerYAnchor).isActive = true 

    arrowLabel.centerXAnchor.constraint(equalTo: noDataView.centerXAnchor).isActive = true 
    arrowLabel.topAnchor.constraint(equalTo: noScanLabel.bottomAnchor).isActive = true 

另一種選擇是前面已經提到

noScanLabel.numberLines = 0 

Answer 3

你可以採取的UIView並添加UIView的所有的UILabel和箭頭圖像，然後賦值給行數設置爲零改變約束UIView到TableView的backgroundView。

像這樣。

override func numberOfSections(in tableView: UITableView) -> Int { 

    // if there are scans to display... 
    if items.count > 0 { 
     tableView.backgroundView = nil 
     tableView.separatorStyle = .singleLine 
     return 1 
    } 
    else { // otherwise, return 0, remove cell lines, and display a Label 
     let rect = CGRect(x: 0, 
          y: 0, 
          width: tableView.bounds.size.width, 
          height: tableView.bounds.size.height) 
     let messageBaseView = UIView(frame: rect) 

     //Add your first label.. 
     let noScanLabel: UILabel = UILabel() 
     noScanLabel.text = "No Scans" 
     noScanLabel.textColor = UIColor.gray 
     noScanLabel.font = UIFont.boldSystemFont(ofSize: 24) 
     noScanLabel.textAlignment = NSTextAlignment.center 
     messageBaseView.addSubView(noScanLabel) 

     //Add your second label.. and your arrow image here on messageBaseView 

     //Assign messageBaseView to backgroundView of tableView 
     tableView.backgroundView = messageBaseView 
     tableView.separatorStyle = .none 



     return 0 
    } 
}