Jak naśladować styl nagłówka UITableViewStylePlain UITableView

Question

Moja aplikacja używa skrótów w tytułach nagłówków sekcji UITableView, które są trudne do wymówienia przez VoiceOver. Ponieważ muszę nadawać te tytuły do ​​wymówienia przez VoiceOver, muszę nadać tytułowi nagłówka sekcji accessibilityLabel.

Wygląda na to, że jedynym sposobem na zrobienie tego jest narysowanie komórki nagłówka sekcji niestandardowej. Chciałbym naśladować standardowy styl dostarczony przez Apple UIKit dla tych niestandardowych nagłówków sekcji, ale nie jestem pewien, jak emulować szczegółowy wygląd tego elementu przez Apple.

Jakie jest najlepsze podejście do naśladowania stylu nagłówka sekcji UITableViewStylePlain?

Aktualizacja: Doskonale wiem, jak utworzyć niestandardową komórkę nagłówka. To, czego szukam, to technika naśladująca dokładnie wygląd stylu komórki nagłówka dostarczonego przez firmę Apple dla komórek nagłówka z nagłówkiem UITableView.

Answer 1

Utworzę niestandardową klasę UIView i dodaję do niej UILabel dla tekstu nagłówka sekcji. W tle użyj UIImageView i załaduj odpowiedni obraz dla tła nagłówka sekcji. Przypisz ten UIImageView za pomocą metody addSubView: dla twojego UIView.

W UITableViewController można ustawić tableView.sectionHeaderHeight, aby dostosować wysokość wszystkich nagłówków sekcji. Stosując metodę UITableViewDelegate:

tableView:viewForHeaderInSection: 

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

Należy zwracać instancję niestandardowego UIView z etykietą jako tytule sekcji.

Powinieneś dodać cień do UILabel i dopasować wszystkie kolory do stylu domyślnego. Ponieważ nagłówki sekcji są również lekko przezroczysty, można ustawić UIView alfa z

self.alpha = 0.9f; 

Answer 2

Jeśli ktoś nadal jest zainteresowany, mam go szuka cholernie blisko z następującego kodu (przy użyciu obrazów Mark Adams z komentarzem powyżej , ale zmieniany je lekko jak moja aplikacja posiada również tryb krajobrazowy):

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

Oto wdrożenie podklasy UILabel który naśladuje tła programowo:

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

znalazłem, że pozostałe odpowiedzi albo nie działa, albo nie naśladować standardowy wygląd. Oto moja, która działa na iOS 5 i 6.

Pamiętaj, że jeśli korzystasz z systemu iOS 6, powinieneś użyć dequeueReusableHeaderFooterViewWithIdentifier, co znacznie ułatwia i usprawnia działanie.

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

Jak docs powiedzieć, jeśli wdrożenie viewForHeaderInSection należy również wdrożyć heightForHeaderInSection.Zastosuj go w ten sposób, aby upewnić się, że uzyska właściwy rozmiar dla dowolnej liczby linii:

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