Wie UITableView UITableViewStylePlain Abschnitt Kopfzeile Stil imitieren

Question

Meine Anwendung verwendet Abkürzungen in UITableView Abschnitt Header-Titel, die schwer für VoiceOver auszusprechen sind. Da ich diese Titel für VoiceOver aussprechbar machen muss, muss ich dem Titel des Abschnittstitels eine accessibilityLabel geben.

Es scheint, dass der einzige Weg, dies zu tun ist, eine benutzerdefinierte Abschnitt Header-Zelle zu zeichnen. Ich möchte den Standard Apple UIKit bereitgestellten Stil für diese benutzerdefinierten Abschnittsheader nachahmen, aber ich bin unsicher, wie Apples detaillierte Aussehen dieses Elements zu emulieren.

Was ist der beste Ansatz, um die UITableViewStylePlain Abschnitt Kopfzeile Stil nachzuahmen?

Update: Ich bin mir bewusst, wie Sie eine benutzerdefinierte Header-Zelle erstellen. Was ich suche, ist eine Technik, die genau das Aussehen des Header-Zellen-Stils nachahmt, wie er von Apple für die einfachen Header-Zellen des UITableView-Abschnitts bereitgestellt wird.

Answer 1

Ich würde eine benutzerdefinierte UIView-Klasse erstellen und ein UILabel für den Abschnittsüberschriftstext hinzufügen. Verwenden Sie für den Hintergrund eine UIImageView und laden Sie das entsprechende Bild für den Hintergrund der Abschnittsüberschrift. Ordnen Sie diese UIImageView mit der addSubView: -Methode für Ihre UIView zu.

Im UITableViewController können Sie tableView.sectionHeaderHeight festlegen, um die Höhe aller Abschnittsüberschriften anzupassen. Mit Hilfe der UITableViewDelegate Methode:

tableView:viewForHeaderInSection: 

http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDelegate_Protocol/Reference/Reference.html#//apple_ref/occ/intf/UITableViewDelegate

Sie sollten eine Instanz des benutzerdefinierten UIView mit der Beschriftung als Überschrift für den Abschnitt zurück.

Sie sollten dem UILabel einen Schatten hinzufügen und alle Farben an den Standardstil anpassen. Da Abschnittsüberschriften auch leicht transparent sind, können Sie Ihre UIView alpha mit

self.alpha = 0.9f; 

Answer 2

gesetzt Wenn jemand noch interessiert ist, ich habe es ziemlich verdammt nah mit dem folgenden Code suchen (mit Mark Adams Bilder aus dem Kommentar oben , aber ich Größe verändern sich leicht wie meine App auch Landscape-Modus hat):

- (UIView *)tableView:(UITableView *)tbl viewForHeaderInSection:(NSInteger)section 
{ 
    UIView* sectionHead = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tbl.bounds.size.width, 18)]; 
    sectionHead.backgroundColor = [UIColor colorWithWhite:0 alpha:0]; 
    sectionHead.userInteractionEnabled = YES; 
    sectionHead.tag = section; 

    UIImageView *headerImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"PlainTableViewSectionHeader.png"]]; 
    headerImage.contentMode = UIViewContentModeScaleAspectFit; 

    [sectionHead addSubview:headerImage]; 
    [headerImage release]; 

    UILabel *sectionText = [[UILabel alloc] initWithFrame:CGRectMake(10, 2, tbl.bounds.size.width - 10, 18)]; 
    sectionText.text = text; 
    sectionText.backgroundColor = [UIColor clearColor]; 
    sectionText.textColor = [UIColor whiteColor]; 
    sectionText.shadowColor = [UIColor darkGrayColor]; 
    sectionText.shadowOffset = CGSizeMake(0,1); 
    sectionText.font = [UIFont boldSystemFontOfSize:18]; 

    [sectionHead addSubview:sectionText]; 
    [sectionText release]; 

    return [sectionHead autorelease]; 
} 

Answer 3

Hier ist eine Implementierung einer UILabel Unterklasse, die den Hintergrund programmatisch nachahmt:

UITableViewStandardHeaderLabel.h

#import <UIKit/UIKit.h> 

@interface UITableViewStandardHeaderLabel : UILabel 

@property (nonatomic) CGFloat topInset; 
@property (nonatomic) CGFloat leftInset; 
@property (nonatomic) CGFloat bottomInset; 
@property (nonatomic) CGFloat rightInset; 

@end 

UITableViewStandardHeaderLabel.m:

/*! 
* @class UITableViewStandardHeaderLabel 
* @brief Reimplementation of the UILabel used for a standard UITableView's group headers for customization purposes 
*/ 

@implementation UITableViewStandardHeaderLabel 

@synthesize topInset, leftInset, bottomInset, rightInset; 

- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 

    if (self) { 
     self.backgroundColor = [UIColor clearColor]; 
    } 

    return self; 
} 

- (void)drawTextInRect:(CGRect)rect 
{ 
    UIEdgeInsets insets = {self.topInset, self.leftInset, self.bottomInset, self.rightInset}; 

    return [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)]; 
} 

- (void)drawRect:(CGRect)rect 
{ 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGGradientRef backgroundGradient; 
    CGColorSpaceRef rgbColorspace; 
    size_t num_locations = 2; 
    CGFloat locations[2] = { 0.0f, 1.0f }; 
    CGFloat components[8] = { 144.0f/255.0f, 159.0f/255.0f, 171.0f/255.0f, 1.0f, 
           /* start */ 183.0f/255.0f, 192.0f/255.0f, 200.0f/255.0f, 1.0f /* end */ }; 

    rgbColorspace = CGColorSpaceCreateDeviceRGB(); 
    backgroundGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations); 

    CGRect currentBounds = self.bounds; 
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMinY(currentBounds)); 
    CGPoint bottomCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMaxY(currentBounds)); 

    CGContextDrawLinearGradient(context, backgroundGradient, topCenter, bottomCenter, 0); 

    UIColor *topBorderLineColor = [UIColor colorWithRed:113.0f/255.0f green:125.0f/255.0f blue:133.0f/255.0f alpha:1.0]; 
    UIColor *secondLineColor = [UIColor colorWithRed:165.0f/255.0f green:177.0f/255.0f blue:187.0f/255.0f alpha:1.0]; 
    UIColor *bottomBorderLineColor = [UIColor colorWithRed:151.0f/255.0f green:157.0f/255.0f blue:164.0f/255.0f alpha:1.0]; 

    [topBorderLineColor setFill]; 
    CGContextFillRect(context, CGRectMake(0, 0, CGRectGetMaxX(currentBounds), 1)); 

    [bottomBorderLineColor setFill]; 
    CGContextFillRect(context, CGRectMake(0, CGRectGetMaxY(currentBounds)-1, CGRectGetMaxX(currentBounds), 1)); 

    [secondLineColor setFill]; 
    CGContextFillRect(context, CGRectMake(0, 1, CGRectGetMaxX(currentBounds), 1)); 

    [super drawRect:rect]; 
} 

@end 

Answer 4

fand ich, dass die anderen Antworten entweder nicht funktionieren oder imitieren nicht den Standard-Look. Hier ist meins, die für iOS 5 und 6 funktioniert.

Beachten Sie, dass Sie, wenn Sie auf iOS 6 sind, sollten Sie dequeueReusableHeaderFooterViewWithIdentifier verwenden, was die Dinge viel einfacher und sauberer macht.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
{ 
    if ([tableView respondsToSelector:@selector(dequeueReusableHeaderFooterViewWithIdentifier:)]) 
    { 
     static NSString *headerReuseIdentifier = @"TableViewSectionHeaderViewIdentifier"; 
     UITableViewHeaderFooterView *sectionHeaderView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerReuseIdentifier]; 
     if(sectionHeaderView == nil){ 
      sectionHeaderView = [[UITableViewHeaderFooterView alloc] initWithReuseIdentifier:headerReuseIdentifier]; 
     } 

     //customise the label here: 
     //[sectionHeaderView.textLabel setTextColor:[UIColor whiteColor]]; 

     return sectionHeaderView; 
    } 
    else 
    {    
     UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44.0)]; 

     UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0, 10, 290, 0)]; 
     headerLabel.backgroundColor = [UIColor clearColor]; 
     headerLabel.text = [self tableView:tableView titleForHeaderInSection:section]; 
     headerLabel.font = [UIFont boldSystemFontOfSize:17]; 
     headerLabel.textAlignment = NSTextAlignmentLeft; 
     headerLabel.shadowColor = [UIColor clearColor]; 
     headerLabel.numberOfLines = 0; 
     [headerLabel sizeToFit]; 
     [headerView setFrame:CGRectMake(headerView.frame.origin.x, headerView.frame.origin.y, headerView.frame.size.width, headerLabel.bounds.size.height)]; 

     //some customisation: 
     headerLabel.textColor = [UIColor whiteColor]; 

     [headerView addSubview: headerLabel]; 

     return headerView; 
    } 
} 

Da die docs sagen, wenn Sie viewForHeaderInSection implementieren Sie auch heightForHeaderInSection implementieren müssen.Implementieren Sie es wie folgt, um sicherzustellen, dass es die richtige Größe für eine beliebige Anzahl von Zeilen erhält:

-(float)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { 
    return UITableViewAutomaticDimension; 
}