自定義 UI TableViewCell 選擇的背景色 swift

Question

我正在嘗試使用 Swift 更改自定義選定 TableViewCell 的外觀。

我需要通過設計器還是以編程方式來完成？

我嘗試了以下方法：

這是我的代碼：

@IBOutlet var tableView: UITableView!


    var tableData: [String] = ["One", "Two", "Three", "Four"]

    override func viewDidLoad() {
        super.viewDidLoad()


        // Register custom cell
        var nib = UINib(nibName: "vwTblCell", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "cell")

    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.tableData.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell     {

        var cell:TblCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as TblCell

        cell.lblCarName.text = tableData[indexPath.row]
        cell.imgCarName.image = UIImage(named: tableData[indexPath.row])

        return cell

    }

    func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
        println("Row \(indexPath.row) selected")
    }

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 70
    }

Answer 1

我有一個肖像問題。 在您的cellForRowAtIndexPath方法集中：

cell.selectionStyle = .None

然后設置didHighlightRowAtIndexPath ...

func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .green
}

func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .clear
}

Answer 2

我的兩分錢：正確的做法（也是在視覺上）是在 (tableView) 單元格中使用指定的視圖，即 selectedBackgroundView 屬性。 但是，您需要先使用 UIView() 對其進行初始化

斯威夫特 3.0

override func awakeFromNib() {
    super.awakeFromNib()
    self.selectedBackgroundView = UIView()
    self.selectionStyle = .default // you can also take this line out
}

然后您可以在您的自定義單元格中使用它，如下所示：

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    self.selectedBackgroundView!.backgroundColor = selected ? .red : nil
}

就是這樣。 當然，您也可以將上述內容集成到上面提到的 UITableView 函數中。 一探究竟。

Answer 3

您已經有了正確的方法： didSelectRowAtIndexPath 。 在該方法中，您可以調用tableView.cellForRowAtIndexPath(indexPath)並獲取您的單元格。 比您可以將單元格背景設置為您的顏色：

 func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
        println("Row \(indexPath.row) selected")
        let cell:YourCustomCell = tableView.cellForRowAtIndexPath(indexPath) as YourCell
        cell.backgroundColor = UIColor.redColor()
    }

或者，如果選擇了一個單元格，更好的方法是檢查您的cellForRowAtIndexPath方法：

if(cell.selected){
  cell.backgroundColor = UIColor.redColor()
}else{
  cell.backgroundColor = UIColor.clearColor()
}

Answer 4

Swift 3更新

此答案基於曹勇的答案，旨在作為Swift 3的更新

對於Swift 3 ，請在cellForRowAt indexPath方法集中使用以下代碼：

cell.selectionStyle = .none

然后，在didHighlightRowAtIndexPath 中設置它

func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .red
}

func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .clear
}

Answer 5

正確（更原生和自然）的方法：

override func awakeFromNib() {
    super.awakeFromNib()
    selectedBackgroundView = UIView()
    selectedBackgroundView?.backgroundColor = .blue
}

為什么其他方法是錯誤的：

1. 高亮解決方案：高亮不是選擇。 突出顯示不像選擇那樣動畫。 感覺不像正常的選擇那樣自然
2. 無需在setSelected方法中更改 selectedBackgroundView 的顏色，因為 iOS 為我們處理動畫。
3. 設置backgroundColor行為也與 iOS 不同

Answer 6

當您點擊一個單元格時，實際上正在更改子視圖背景顏色。 該子視圖是“selectedBackgroundView”。 您可以在 cellForRowAtIndexPath TableView 委托方法中覆蓋每個單元格的視圖。

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

   let cell = tableView.dequeueReusableCellWithIdentifier("identifier", forIndexPath: indexPath) 

   let selectedView = UIView()
   selectedView.backgroundColor = UIColor(red: 250/255, green: 250/255, blue:     250/255, alpha: 1.0)
   cell.selectedBackgroundView = selectedView

   return cell
}

將顏色更改為您喜歡的任何顏色。

Answer 7

為了保持代碼整潔，您應該考慮將單元格的屏幕設計相關代碼從UITableViewController到UITableViewCell類中。

你的 UITableViewController` 只需要設置單元格的選中狀態如下：

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
    guard let cell = tableView.cellForRow(at: indexPath) else { return }
    cell.setSelected(true, animated: true)
}

您可以通過覆蓋var isSelected在派生的UITableViewCell類中實現您想要的自定義。 使用此解決方案，您甚至可以為每個單元格選擇不同的顏色。

class MyTableViewCell: UITableViewCell
{
    @IBOutlet weak var label:UILabel!

    override var isSelected: Bool
    {
        didSet{
            if (isSelected)
            {
                self.backgroundColor = UIColor.red
                if let label = label
                {
                    label.textColor = UIColor.white
                }
            }
            else
            {
                self.backgroundColor = UIColor.white
                if let label = label
                {
                    label.textColor = UIColor.black
                }
            }
        }
    }
}

Answer 8

SWIFT 5 更新

在cellForRowAT方法中將選擇樣式設置為 .none：

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

    return cell
}

然后實現didHighlightRowAt和didUnhighlightRowAt方法：

func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .red
}

func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    // Add timer to be able see the effect
    Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { (_) in
       cell!.contentView.backgroundColor = .white
    }
}

Answer 9

---

對於 tableView==

---

首先調用此方法-

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
        cell.textLabel?.text = "Show Label"
        cell.backgroundColor = UIColor.redColor()

    }

而不是調用這個方法

func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
        cell.backgroundColor = UIColor.clearColor()
    }

對於集合視圖==

1-

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as! DateCollectionViewCell
            cell!.dateLabel.backgroundColor = UIColor.redColor()

 }  

2-

func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as? DateCollectionViewCell
        cell!.dateLabel.backgroundColor = UIColor.clearColor()
    }

Answer 10

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    updateUI(isSelected: selected)
}

private func updateUI(isSelected: Bool){
   label.textColor = isSelected ? .red : .green
   //etc..
}

Answer 11

以上答案都沒有奏效，所以我嘗試了我的，並且奏效了：這是：-

1. 在您的單元格中創建這樣的功能。

func reloadcell() {
    if isSelected {
        conView.backgroundColor = .yellow
    } else if isHighlighted {
        conView.backgroundColor = .yellow
    } else {
        conView.backgroundColor = .clear
    }
}

並在 layoutsubviews 和 didselect 方法中調用該函數

Answer 12

在您的 cellForRowAtIndexPath 方法集中：

cell.selectionStyle = .none

然后像這樣設置 didHighlightRowAtIndexPath ......

func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
    let cell  = tableView.cellForRow(at: indexPath)
    cell!.contentView.backgroundColor = .green
}