web-dev-qa-db-fra.com

Interface utilisateur personnalisée TableViewCell sélectionnée backgroundcolor swift

J'essaie de changer l'apparence d'une TableViewCell sélectionnée personnalisée en utilisant Swift.

Dois-je le faire via le concepteur ou par programme?

J'ai essayé ce qui suit:

 enter image description here

Et voici mon code:

@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
    }
swiftuitableviewselected
11
Peasant coder

Vous avez déjà la bonne méthode: didSelectRowAtIndexPath. Avec cette méthode, vous pouvez appeler tableView.cellForRowAtIndexPath(indexPath) et obtenir votre cellule. Alors vous pouvez définir le fond de la cellule à votre couleur:

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

Ou bien, une meilleure façon serait de vérifier votre méthode cellForRowAtIndexPath, si une cellule est sélectionnée:

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

J'ai un problème de ressemblance. Dans votre cellForRowAtIndexPath ensemble de méthodes: 

cell.selectionStyle = .None

puis définissez didHighlightRowAtIndexPath ...

func tableView(tableView: UITableView, didHighlightRowAtIndexPath indexPath: NSIndexPath) {
    let cell  = tableView.cellForRowAtIndexPath(indexPath)
    cell!.contentView.backgroundColor = .redColor()
}

func tableView(tableView: UITableView, didUnhighlightRowAtIndexPath indexPath: NSIndexPath) {
        let cell  = tableView.cellForRowAtIndexPath(indexPath)
        cell!.contentView.backgroundColor = .clearColor()
}
17
Cao Yong

Mise à jour pour Swift 3

Cette réponse est basée sur Cao Yong answer, et constitue une mise à jour de Swift 3

Pour Swift 3 , utilisez le code suivant dans votre ensemble de méthodes cellForRowAt indexPath :

cell.selectionStyle = .none

Ensuite, définissez-le dans 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
}
13
Ibrahim

Mes deux cents: la manière appropriée de le faire (aussi visuellement) est d'utiliser la vue désignée dans une cellule (tableView), c'est-à-dire la propriété selectedBackgroundView Cependant, vous devez d'abord l'initialiser avec UIView ()

Swift 3.0 

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

Ensuite, vous pouvez l’utiliser dans votre cellule personnalisée comme suit:

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

C'est tout. Bien sûr, vous pouvez également intégrer ce qui précède à vos fonctions UITableView mentionnées ci-dessus. Vérifiez-le.

8
RG128

Pour garder votre code propre, vous devriez envisager de déplacer le code associé à la conception d'écran de vos cellules de UITableViewController dans une classe UITableViewCell. 

Votre UITableViewController` n'a besoin que de définir l'état sélectionné de la cellule comme suit:

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

La personnalisation souhaitée peut être implémentée dans une classe UITableViewCell dérivée en remplaçant var isSelected. Avec cette solution, vous pouvez même choisir des couleurs différentes pour chaque cellule. 

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

Lorsque vous appuyez sur une cellule, la couleur d'arrière-plan des sous-vues est en train d'être modifiée. Cette sous-vue est 'selectedBackgroundView'. Vous pouvez remplacer la vue de chaque cellule dans la méthode déléguée 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
}

Changez la couleur comme bon vous semble. 

4
Eli Whittle

Pour tableView ==

Premier appel Cette méthode- 

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

    }

Et que d'appeler cette méthode 

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

Pour 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()
    }
1
iDeveloper