UITableViewのUITableViewStylePlainセクションのヘッダースタイルを模倣する方法

Question

私のアプリケーションでは、UITableViewセクションのヘッダータイトルで、VoiceOverが発音しにくい略語を使用しています。これらのタイトルをVoiceOverで発音可能にする必要があるので、セクションヘッダのタイトルにaccessibilityLabelを付ける必要があります。

これを行う唯一の方法は、カスタムセクションヘッダーセルを描画することです。これらのカスタムセクションヘッダーの標準のApple UIKitスタイルを模倣したいと思いますが、この要素のAppleの詳細な外観をエミュレートする方法は不明です。

UITableViewStylePlainセクションのヘッダースタイルを模倣する最良の方法は何ですか？

更新：私はカスタムヘッダーセルを作成する方法をよく知っています。私が探しているのは、プレーンなUITableViewセクションヘッダーセル用にAppleが提供するヘッダーセルスタイルの外観を模倣するテクニックです。

Answer 1

カスタムのUIViewクラスを作成し、セクション見出しのテキストとしてUILabelを追加します。背景については、UIImageViewを使用し、セクションヘッダーの背景に適切なイメージをロードします。このUIImageViewにUIViewのaddSubView：メソッドを割り当てます。

UITableViewControllerでは、tableView.sectionHeaderHeightを設定して、すべてのセクションヘッダーの高さをカスタマイズできます。 UITableViewDelegateメソッドを使用すると：

tableView:viewForHeaderInSection: 

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

あなたはセクションの見出しなどのテキストラベルでカスタムのUIViewのインスタンスを返す必要があります。

UILabelに影を付けて、デフォルトのスタイルに合わせてすべての色を調整する必要があります。セクションヘッダもやや透明なので、誰もがまだ興味を持っている場合は、私は上記のコメントから、マーク・アダムスの画像を使用して、次のコード（とかなり気に近い見てそれを持って、

self.alpha = 0.9f; 

Answer 2

であなたのUIViewのアルファを設定することができます、私のアプリはまた、風景モードを持っているとしてではなく、私は少しそれらをリサイズ）：

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

ここではプログラム的背景を模倣UILabelサブクラスの実装です：

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

私は他の回答が動作しないか、標準の外観を模倣していないいずれかのことがわかりました。ここにはiOS 5と6で動作するものがあります。

iOS 6を使用している場合は、dequeueReusableHeaderFooterViewWithIdentifierを使用する必要があります。これにより作業がはるかに簡単になり、きれいになります。ドキュメントとして

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

あなたもheightForHeaderInSectionを実装する必要がありviewForHeaderInSectionあなたが実装した場合、と言います。

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