自定义 UI UITableViewCell 选定的背景色 swift

Custom UI TableViewCell selected backgroundcolor swift

我正在尝试使用 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
    }

您已经有了正确的方法: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()
}

我有相似度问题。在您的 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
}

当您点击一个单元格时,实际上会更改子视图的背景颜色。该子视图是 '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
}

将颜色更改为您喜欢的任何颜色。


对于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()
    }

对于 CollectionView==

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()
    }

为了保持代码整洁,您应该考虑将单元格的屏幕设计相关代码从 UITableViewController 移动到 UITableViewCell class。

您的 UITableViewController` 只需按如下方式设置单元格的 selected 状态:

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 中实现。使用此解决方案,您甚至可以为每个单元格设置不同的 select 颜色。

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
                }
            }
        }
    }
}

Update for 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
}

我的两分钱:正确的做法(也是视觉上的)是在 (tableView) 单元格中使用指定的视图,即 selectedBackgroundView 属性。但是,您需要先使用 UIView()

对其进行初始化

SWIFT 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 函数中。看看吧。

正确的(更自然和自然的)方法:

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

为什么其他方法是错误的:

  1. 高亮解决办法:高亮不是select。突出显示不像选择那样具有动画效果。感觉不像普通选择那样自然
  2. 不需要在setSelected方法中改变selectedBackgroundView的颜色,因为iOS为我们处理了动画。
  3. 设置 backgroundColor 的行为也与 iOS 的行为不同

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
}

然后执行 didHighlightRowAtdidUnhighlightRowAt 方法:

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
    }
}

None 上面的答案有效,所以我尝试了我的并且有效: 这是:-

  1. 在你的单元格中创建这样的函数。
func reloadcell() {
    if isSelected {
        conView.backgroundColor = .yellow
    } else if isHighlighted {
        conView.backgroundColor = .yellow
    } else {
        conView.backgroundColor = .clear
    }
}

并在布局子视图和您的 didselect 方法中调用该函数

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..
}

在您的 cellForRowAtIndexPath 方法中设置:

cell.selectionStyle = .none

然后像这样设置 didHighlightRowAtIndexPath...

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