So imitieren Sie den UITableViewStylePlain-Stil der Abschnittsüberschrift von UITableView

Question

Meine Anwendung verwendet Abkürzungen in UITableView Abschnittsüberschriften, die für VoiceOver schwer auszusprechen sind. Da ich diese Titel für VoiceOver aussprechbar machen muss, muss ich den Titel der Abschnittsüberschrift mit einem accessibilityLabel .

Die einzige Möglichkeit, dies zu tun, scheint darin zu bestehen, eine benutzerdefinierte Abschnittskopfzelle zu zeichnen. Ich möchte den Standard Apple UIKit zur Verfügung gestellten Stil für diese benutzerdefinierten Abschnittsüberschriften zu imitieren, aber ich bin unsicher, wie Apples detailliertes Aussehen dieses Elements zu emulieren.

Was ist der beste Ansatz zur Nachahmung der UITableViewStylePlain Stil der Abschnittsüberschrift?

Aktualisierung: Ich weiß sehr wohl, wie man eine benutzerdefinierte Kopfzelle erstellt. Was ich suche, ist eine Technik, um genau das Aussehen der Kopfzeile Zelle Stil wie von Apple für die einfache UITableView Abschnitt Kopfzellen zur Verfügung gestellt zu imitieren.

Answer 1

Falls es noch jemanden interessiert, ich habe es mit folgendem Code verdammt gut hinbekommen (ich verwende die Bilder von Mark Adams aus dem obigen Kommentar, aber ich habe sie etwas verkleinert, da meine App auch im Querformat läuft):

- (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 2

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 3

Ich habe festgestellt, dass die anderen Antworten entweder nicht funktionieren oder den Standardlook nicht nachahmen. Hier ist meine, die für iOS 5 und 6 funktioniert.

Wenn Sie iOS 6 verwenden, sollten Sie dequeueReusableHeaderFooterViewWithIdentifier Das macht alles viel einfacher und sauberer.

- (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;
    }
}

Wie die Dokumentation sagt, wenn Sie die viewForHeaderInSection müssen Sie auch implementieren heightForHeaderInSection . Implementieren Sie es so, um sicherzustellen, dass es die richtige Größe für jede Anzahl von Zeilen erhält:

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

Answer 4

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

Im UITableViewController können Sie tableView.sectionHeaderHeight einstellen, um die Höhe aller Abschnittsüberschriften anzupassen. Verwenden Sie die Methode UITableViewDelegate:

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 Ihrer benutzerdefinierten UIView mit dem Text label als Überschrift für den Abschnitt zurückgeben.

Fügen Sie dem UILabel einen Schatten hinzu und passen Sie alle Farben an den Standardstil an. Da die Abschnittsüberschriften auch leicht transparent sind, können Sie Ihr UIView-Alpha mit

self.alpha = 0.9f;