Lollipop UITableView highlight effect in iOS

A small UITableViewCell subclass in swift for this radial animation... Have fun :-)

GitHub Link:

https://github.com/raegtime/lollipopMeetsIOS

Create an UIImage from String in Swift / Erstelle ein UIImage aus einem String in Swift

Swift Source Code:

1 2 3 4 5 6 7 8 9 10 11 12

func imageFromText(#text:String,font:UIFont,color:UIColor)->UIImage { let size : CGSize = (text as NSString).sizeWithAttributes([NSFontAttributeName: font]) UIGraphicsBeginImageContextWithOptions(size, false, 0.0) (text as NSString).drawAtPoint(CGPointMake(0.0, 0.0), withAttributes: [NSFontAttributeName: font, NSForegroundColorAttributeName:color]) let image : UIImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image }

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  
   }  

Horizontaler UITableView (Trick)

Einleitung
Wer hat sich als iOS Entwickler noch nicht gefragt warum die UITableView nur vertikal scrollt?! ...
Es wäre doch super wenn sie das auch horizontal könnte. Ein kleiner Trick den ich im Netz gefunden habe macht die UITableView auch horizontal Scrollbar.

Funktionsweise
Die Tabelle wird um 90 Grad gedreht (auf die Seite gekippt), damit die Zellen aber nicht auch auf der Seite liegen werden diese wieder zurück gedreht.

Schritt 1:
Normalen ViewController anlegen der von UITableViewController erbt.

Schritt 2:
in der ViewDidLoad folgende zeilen eintragen um die Tabelle zu drehen

- (void)viewDidLoad

{

    [super viewDidLoad];

    

    const CGFloat k90DegreesCounterClockwiseAngle = (CGFloat) -(90 * M_PI / 180.0);

    CGRect frame = tableV.frame;

    tableView.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesCounterClockwiseAngle);

    tableView.frame = frame; 

}

Schritt 3:
In der Methode in der die UITableCellView erzeugt und konfiguriert wird die Zelle drehen

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    

    if (!cell) 

    {

        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

    }    

    CGFloat k90DegreesClockwiseAngle = (CGFloat) (90 * M_PI / 180.0);    

    cell.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesClockwiseAngle);

    

   //your cell init here

    //.....................

    

    return cell;

}

Die Zellenbreite kann über die folgende Methode (die eigentlich für die Höhe zuständig ist) konfiguriert werden. In dem Codebeispiel gebe ich die Breite des Bildschirms zurück... so ist die Cell immer genau so breit wie eine Bildschirmbreite...

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return self.view.bounds.size.width;

}