Freitag, 23. Januar 2015

iOS UITableViewCell Custom Highlight (so gehts richtig/the right way)

English

What is the goal?

A UITableViewCell with custom selected/highlighted background color and text color (screenshot).


Summary

  1. Create new UIViewController, UITableView and UITableViewCell (don't forget reuseIdentifier) in storyboard.
  2. Create class for viewController and connect them with the viewController in the storyboard.
  3. Conect the tabele dataSource and delegate  with the viewController.
  4. Place UILabels in storyboard and choose the "Color" and "Highlighted" property.

  5. Add "numberOfRowsInSection" and "cellForRowAtIndexPath" method in viewController class (and protocols).
  6. In "cellForRowAtIndexPath" -> get a cell instance from your tableView and set the "selectedBackgroundView" property by using a new UIView with e.g. green backgroundColor 
Code: (Swift):

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  
   {  
     var cellIdentifier = "resultCell"  
     var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as UITableViewCell  
     var bgView : UIView = UIView()  
     bgView.backgroundColor = UIColor(red: 123.0/255.0, green: 156.0/255.0, blue: 210.0/255.0, alpha: 1.0)  
     cell.selectedBackgroundView = bgView  
     return cell  
   }  




Deutsch

Was will ich erreichen?

Eine UITableViewCell die beim Touch Event eine beliebige Farbe als Hintergrund erhält und dessen Textinhalte eine andere beliebige Farbe einnehmen (Siehe Screenshot).


Welche Motivation hatte ich dies zu schreiben?

Im Internet z.B. auf StackOverflow, gibt es viele Varianten wie man dieses Problem löst. Oftmals sind diese sehr abenteuerliche Konstruktionen die viel Mühe mit sich bringen. Dabei geht es eigentlich ganz einfach.

Was wird benötig?

Wird ein Storyboard genutzt, braucht man zunächst ein ViewController mit einer UITableView. Der TableView wird eine UITableViewCell hinzugefügt die wir unseren Bedürfnissen anpassen wollen. 
Nun platzieren wir in der Content View der UITableViewCell unsere UILabels. 

Voilà! Wir haben unsere CustomCell beinahe fertig.

Nun wählt man ein Label aus und klickt im Attribute Inspector auf eine Farbe für sein Label. Das macht man unter "Color". Etwas weiter unten findet man "Highlighted". Hier wählt man eine Farbe aus die angezeigt werden soll wenn die Zelle selektiert wurde. Damit sie jetzt noch eine andere Hintergrundfarbe erhält kann man entweder die sehr beschränkte Auswahl unter "Selection" nutzen die einem im Attribute Inspector angezeigt wird wenn man auf die Zelle klickt oder man wählt seine eigene Farbe in dem man der Zelle eine selectedBackgroundView spendiert. Dazu geht man im Quellcode in die Methode: "cellForRowAtIndexPath" und erstellt eine neue View. Dieser View gebt ihr eine Hintergrundfarbe, z.B. grün. Nun setzt ihr der aktiven Zelle die Eigenschaft selectedBackgroundView mit der grünen View.

Zusammenfassung:



  1. UIViewController mit UITableView und einer UITableViewCell (reuseIdentifier nicht vergessen) im Storyboard anlegen.
  2. Klasse für den ViewController und im Storyboard für den Controller eintragen.
  3. Tabellen DataSource und Delegate mit dem ViewController verknüpfen.
  4. UILabels im Storyboard platzieren und "Color" und "Highlighted" Farben setzen.

  5. In der ViewController Klasse die "numberOfRowsInSection" und "cellForRowAtIndexPath" Methode hinzufügen.
  6. In der "cellForRowAtIndexPath" Methode eine Zelle aus der TableView instanzieren und die Eigenschaft "selectedBackgroundView" mit einer neuen View setzten die z.B. eine grüne Hintergrundfarbe besitzt.
Code: (Swift):

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  
   {  
     var cellIdentifier = "resultCell"  
     var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as UITableViewCell  
     var bgView : UIView = UIView()  
     bgView.backgroundColor = UIColor(red: 123.0/255.0, green: 156.0/255.0, blue: 210.0/255.0, alpha: 1.0)  
     cell.selectedBackgroundView = bgView  
     return cell  
   }  

Keine Kommentare:

Kommentar veröffentlichen