Cách bắt chước kiểu tiêu đề phần UITableViewStylePlain của UITableView

Question

Ứng dụng của tôi sử dụng các từ viết tắt trong UITableView tiêu đề phần tiêu đề mà VoiceOver khó phát âm. Vì tôi cần phải làm cho các tiêu đề này được phát âm bởi VoiceOver, tôi cần phải đặt tiêu đề cho phần tiêu đề là accessibilityLabel.

Dường như cách duy nhất để thực hiện việc này là vẽ ô tiêu đề phần tùy chỉnh. Tôi muốn bắt chước tiêu chuẩn của Apple UIKit cung cấp phong cách cho các tiêu đề phần tùy chỉnh nhưng tôi không chắc chắn về cách mô phỏng cái nhìn chi tiết của Apple về yếu tố này.

Cách tiếp cận tốt nhất để bắt chước kiểu tiêu đề phần UITableViewStylePlain là gì?

Cập nhật: Tôi biết rõ cách tạo ô tiêu đề tùy chỉnh. Những gì tôi đang tìm kiếm là một kỹ thuật để bắt chước chính xác giao diện của ô tiêu đề được cung cấp bởi Apple cho các ô tiêu đề phần UITableView đơn giản.

Answer 1

Tôi sẽ tạo lớp UIView tùy chỉnh và thêm UILabel vào nó cho phần văn bản tiêu đề. Đối với nền, hãy sử dụng UIImageView và tải hình ảnh thích hợp cho nền của tiêu đề phần. Chỉ định UIImageView này với phương thức addSubView: cho UIView của bạn.

Trong UITableViewController bạn có thể đặt tableView.sectionHeaderHeight để tùy chỉnh chiều cao của tất cả các tiêu đề phần. Sử dụng phương pháp UITableViewDelegate:

tableView:viewForHeaderInSection: 

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

Bạn nên trả về một thể hiện của UIView tùy chỉnh của bạn với các nhãn văn bản như tiêu đề cho phần này.

Bạn nên thêm bóng vào nhãn UILabel và điều chỉnh tất cả các màu để phù hợp với kiểu mặc định. Kể từ khi phần tiêu đề cũng hơi trong suốt, bạn có thể thiết lập UIView alpha của bạn với

self.alpha = 0.9f; 

Answer 2

Nếu ai vẫn còn quan tâm, tôi đã có nó nhìn đẹp, damn chặt chẽ với đoạn mã sau (sử dụng hình ảnh Mark Adams từ những nhận xét trên , nhưng tôi thay đổi kích cỡ chúng nhẹ như ứng dụng của tôi cũng có chế độ nằm ngang):

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

Dưới đây là một thực hiện của một lớp con UILabel mà bắt chước nền programatically:

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

tôi thấy rằng các câu trả lời khác hoặc là không làm việc hoặc không bắt chước giao diện chuẩn. Đây là của tôi, hoạt động cho iOS 5 và 6.

Lưu ý rằng nếu bạn đang sử dụng iOS 6, bạn nên sử dụng dequeueReusableHeaderFooterViewWithIdentifier, điều này giúp mọi thứ trở nên dễ dàng hơn và sạch hơn.

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

Như các tài liệu nói rằng, nếu bạn thực hiện viewForHeaderInSection bạn cũng phải thực hiện heightForHeaderInSection.Triển khai thực hiện như thế này để đảm bảo rằng nó có kích thước phù hợp với bất kỳ số lượng dòng nào:

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