Eigenen Disclosure Indicator zeichnen

In iOS-Apps werden Daten immer wieder in tabellarischer Form angezeigt, wozu gerne die UITableView genutzt wird. Um dem Anwender klar zu machen, dass sich hinter einem Eintrag noch mehr Infos verbergen, wird ein Accessory View genutzt. Dieser Disclosure Indicator View kann unterschiedliche Symbole beinhalten, wie folgt :

Detail (runder Kreis mit einem i)
Checkmark (ein Haken)
Detail Disclosure (ein runder Kreis mit einem i und ein Pfeil nach rechts)
Disclosure Indicator (nur ein Pfeil nach rechts)

Der Disclosure Indicator hat eine Standardfarbe, die von Xcode vorgegeben wird. Diese Farbe ist aber nicht immer passend, womit der Pfeil nicht mehr sichtbar ist. Um den Pfeil dem Design anzupassen, gibt es zwei Möglichkeiten.

1. Möglichkeit

Für den View wird jeweils ein Bild hinterlegt, welches zum Design passend ist. Dieses Bild kann über die folgende Zeile aufgerufen und angezeigt werden :

cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"accessory.png"]];

Anstatt des Standardpfeils wird nun das angegebene Bild accessory.png angezeigt. Nachteil dieser Variante, es muss für jede neue Farbe ein eigenes Bild mit in der App hinterlegt werden. Dieses ist nicht sehr schonend für die Ressourcen und auch sehr unübersichtlich.

2. Möglichkeit

Nun zeige ich Ihnen, wie Sie den View selber zeichnen können in unterschiedlichen Farben. Dazu erstellen Sie einfach die beiden folgenden Dateien :
DisclosureIndicator.h

```
#import &lt;UIKit/UIKit.h&gt;;
```

#import &lt;Foundation/Foundation.h&gt;;

```
 
```
```
@interface DisclosureIndicator : UIView
```
```
 
```

@property(nonatomic, strong) UIColor *color;

```
 
```

- (DisclosureIndicator *)initWithColor:(UIColor *)color;

```
 
```
```
@end
```

DisclosureIndicator.m

```
#import "DisclosureIndicator.h"
```
```
 
```
```
@interface DisclosureIndicator ()
```
```
 
```
```
@property(nonatomic) CGFloat red;
```
```
@property(nonatomic) CGFloat green;
```
```
@property(nonatomic) CGFloat blue;
```
```
@property(nonatomic) CGFloat alpha;
```
```
 
```
```
@end
```
```
 
```
```
@implementation DisclosureIndicator
```
```
 
```
```
- (void)drawRect:(CGRect)rect {
```

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetRGBFillColor(context, self.red, self.green, self.blue, self.alpha);

```
 
```

    CGContextMoveToPoint(context, 6, 3);

    CGContextAddLineToPoint(context, 6, 3);

    CGContextAddLineToPoint(context, 16, 12);

    CGContextAddLineToPoint(context, 6, 21);

    CGContextAddLineToPoint(context, 4, 19);

    CGContextAddLineToPoint(context, 12, 12);

    CGContextAddLineToPoint(context, 4, 5);

    CGContextAddLineToPoint(context, 6, 3);

```
    CGContextFillPath(context);
```
```
}
```
```
 
```

- (DisclosureIndicator *)initWithColor:(UIColor *)color {

    self = [super initWithFrame:CGRectMake(0, 0, 16, 24)];

    self.backgroundColor = [UIColor clearColor];

```
 
```
```
    self.color = color;
```
```
    [self setNeedsDisplay];
```
```
 
```
```
    return self;
```
```
}
```
```
 
```
```
- (void)setColor:(UIColor *)color {
```
```
    _color = color;
```
```
 
```

    [self.color getRed:&amp;_red green:&amp;_green blue:&amp;_blue alpha:&amp;_alpha];

```
 
```
```
    [self setNeedsDisplay];
```
```
}
```
```
@end
```

Mit dieser kleinen Klasse wird der neue Disclosure Indicator gezeichnet. Dieses passiert in der Funktion drawRect. Über den Befehl CGContextAddLineToPoint wird der Pfeil über die Angaben der X und Y Koordinaten entsprechend gezeichnet. Mit der Funktion initWithColor, wird die View erzeugt und die Farbe für den Pfeil übergeben. Der Aufruf um einen Pfeil entsprechend zu zeichnen erfolgt in der UITableView Delegate Methode cellForRowAtIndexPath :

Aufruf zum Zeichnen des Disclosure Indicator

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellIdentifier" forIndexPath:indexPath];

[cell setAccessoryView:[[V_DisclosureIndicator alloc] initWithColor:[UIColor redColor]]];

Damit können Sie nun in jeder UITableViewCell einen Disclosure Indicator in jeder passenden Farbe zu Ihrem Design zeichnen. Hier ein Beispiel :

Das Bild des Disclosure Indicator entspricht dem obenstehenden Beispiel :.

Wenn Sie noch andere Ideen haben oder Ihnen der Beitrag gefallen hat, freue ich mich über ein Kommentar.

Eigenen Disclosure Indicator zeichnen

1. Möglichkeit

2. Möglichkeit

Kommentar absenden Antworten abbrechen

Neueste Beiträge

ARCHIV

KATEGORIEN