Posts mit dem Label example werden angezeigt. Alle Posts anzeigen
Posts mit dem Label example werden angezeigt. Alle Posts anzeigen

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  
   }  

Donnerstag, 15. März 2012

Flash Builder, Mobile und der SplashScreen

Seit Flash Builder 4.6 gibt es die Möglichkeit für Mobile Apps eine SplashScreenImage  anzulegen...
Leider waren die Beispiele von Adobe für meine Zwecke nicht ausreichend... wer z.B. iPad, iPhone 3GS, iPhone 4S, Android Smartphone und Android Tablet abdecken will hat mehr Probleme mit dem Splashscreen als man sich vorstellen kann... hier meine Lösung die alle Varianten Abdeckt:



<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
[Embed(source="assets/imgs/Default.png")] //320x480
[Bindable]
public var ios160p:Class;
[Embed(source="assets/imgs/DefaultLandscape.png")]  //480x320
[Bindable]
public var ios160l:Class;
[Embed(source="assets/imgs/Default@2x.png")]  //640x960
[Bindable]
public var ios320p:Class;
[Embed(source="assets/imgs/Default@2xLandscape.png")] //960x640
[Bindable]
public var ios320l:Class;
[Embed(source="assets/imgs/Default-Landscape~ipad.png")] //1024x748
[Bindable]
public var iosTablettL:Class;
[Embed(source="assets/imgs/Default-Portrait~ipad.png")] //768x1004
[Bindable]
public var iosTablettP:Class;
[Embed(source="assets/imgs/logoTabletPortraitDefault.png")] //800x1232
[Bindable]
public var andTablettP:Class;
[Embed(source="assets/imgs/logoTabletLandscapeDefault.png")] //1280x752
[Bindable]
public var andTablettL:Class;
[Embed(source="assets/imgs/logo160PortraitDefault.png")] //320x480
[Bindable]
public var and160p:Class;
[Embed(source="assets/imgs/logo160LandscapeDefault.png")] //480x320
[Bindable]
public var and160l:Class;
[Embed(source="assets/imgs/logo240PortraitDefault.png")] // 480x800
[Bindable]
public var and240p:Class;
[Embed(source="assets/imgs/logo240LandscapeDefault.png")] //800x480
[Bindable]
public var and240l:Class;
[Embed(source="assets/imgs/logo320PortraitDefault.png")] //640x960
[Bindable]
public var and320p:Class;
[Embed(source="assets/imgs/logo320LandscapeDefault.png")] //960x640
[Bindable]
public var and320l:Class;
// Override getImageClass() to return an image for iOS.
override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class
{
// Is the application running on iOS?
var isIOS:Boolean = (Capabilities.version.indexOf("IOS") == 0 ? true:false);
if(aspectRatio == StageAspectRatio.PORTRAIT) //Portrait
{
if(dpi == 160 && resolution<1000)//real 160
return (isIOS==true?ios160p:and160p);
else if(dpi == 160 && resolution>1000)//tablett
return (isIOS==true?iosTablettP:andTablettP);
else if(dpi == 240) return and240p;
else if(dpi == 320)
return (isIOS==true?ios320p:and320p);
}
else //Landscape
{
if(dpi == 160 && resolution<1000) //real 160
return (isIOS==true?ios160l:and160l);
else if(dpi == 160 && resolution>1000)//tablett
return (isIOS==true?iosTablettL:andTablettL);
else if(dpi == 240) return and240l;
else if(dpi == 320)
return (isIOS==true?ios320l:and320l);
}
return super.getImageClass(aspectRatio, dpi, resolution);
}
]]>
</fx:Script> </s:SplashScreenImage>