การเพิ่ม iOS UITableView HeaderView (ไม่ใช่ส่วนหัวของส่วน)

ฉันต้องการเพิ่มส่วนหัวของตาราง (ไม่ใช่ส่วนหัวของส่วน) เช่นในแอปผู้ติดต่อตัวอย่างเช่น:

แบบนั้น - ฉลากข้างภาพเหนือตาราง

ฉันต้องการให้มุมมองทั้งหมดเลื่อนได้ดังนั้นฉันจึงไม่สามารถวางมุมมองเหล่านั้นไว้นอกตารางได้

ฉันจะทำสิ่งนั้นได้อย่างไร

UITableViewมีtableHeaderViewคุณสมบัติ ตั้งค่าเป็นมุมมองอะไรก็ได้ที่คุณต้องการ

ใช้อันใหม่UIViewเป็นที่บรรจุเพิ่มเลเบลข้อความและมุมมองรูปภาพเป็นที่ใหม่UIViewจากนั้นตั้งค่าtableHeaderViewเป็นมุมมองใหม่

ตัวอย่างเช่นในUITableViewController:

-(void)viewDidLoad
{
     // ...
     UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:imageView];
     UILabel *labelView = [[UILabel alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:labelView];
     self.tableView.tableHeaderView = headerView;
     [imageView release];
     [labelView release];
     [headerView release];
     // ...
} 

คุณสามารถทำได้ง่ายๆใน Interface Builder เพียงสร้างมุมมองด้วยตารางและวางมุมมองอื่นลงบนตาราง นี่จะกลายเป็นมุมมองส่วนหัวของตาราง เพิ่มป้ายกำกับและรูปภาพของคุณในมุมมองนั้น ดูรูปด้านล่างสำหรับลำดับชั้นการดู

ในสวิฟต์ :

override func viewDidLoad() {
    super.viewDidLoad()

    // We set the table view header.
    let cellTableViewHeader = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewHeaderCustomCellIdentifier) as! UITableViewCell
    cellTableViewHeader.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewHeaderCustomCellIdentifier]!)
    self.tableView.tableHeaderView = cellTableViewHeader

    // We set the table view footer, just know that it will also remove extra cells from tableview.
    let cellTableViewFooter = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewFooterCustomCellIdentifier) as! UITableViewCell
    cellTableViewFooter.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewFooterCustomCellIdentifier]!)
    self.tableView.tableFooterView = cellTableViewFooter
}

นอกจากนี้คุณยังสามารถสร้าง UIView ในเครื่องมือสร้างส่วนต่อประสานและลากและวาง ImageView และ UILabel (เพื่อให้ดูเหมือนกับส่วนหัวที่คุณต้องการ) จากนั้นใช้

เมื่อ UIView ของคุณดูเหมือนกับวิธีที่คุณต้องการเช่นกันคุณสามารถกำหนดค่าเริ่มต้นโดยทางโปรแกรมจาก XIB และเพิ่มลงใน UITableView ของคุณ คุณไม่จำเป็นต้องออกแบบตารางทั้งหมดใน IB เพียงแค่ headerView (วิธีนี้สามารถใช้มุมมองส่วนหัวในตารางอื่นได้เช่นกัน)

ตัวอย่างเช่นฉันมี UIView ที่กำหนดเองสำหรับหนึ่งในส่วนหัวของตาราง มุมมองได้รับการจัดการโดยไฟล์ xib ชื่อ "CustomHeaderView" และโหลดลงในส่วนหัวของตารางโดยใช้รหัสต่อไปนี้ในคลาสย่อย UITableViewController ของฉัน:

-(UIView *) customHeaderView {
    if (!customHeaderView) {
        [[NSBundle mainBundle] loadNibNamed:@"CustomHeaderView" owner:self options:nil];
    }

    return customHeaderView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Set the CustomerHeaderView as the tables header view 
    self.tableView.tableHeaderView = self.customHeaderView;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableView.frame.size.width,30)];
    headerView.backgroundColor=[[UIColor redColor]colorWithAlphaComponent:0.5f];
    headerView.layer.borderColor=[UIColor blackColor].CGColor;
    headerView.layer.borderWidth=1.0f;

    UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,100,20)];

    headerLabel.textAlignment = NSTextAlignmentRight;
    headerLabel.text = @"LeadCode ";
    //headerLabel.textColor=[UIColor whiteColor];
    headerLabel.backgroundColor = [UIColor clearColor];


    [headerView addSubview:headerLabel];

    UILabel *headerLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, headerView.frame.size.width-120.0, headerView.frame.size.height)];

    headerLabel1.textAlignment = NSTextAlignmentRight;
    headerLabel1.text = @"LeadName";
    headerLabel.textColor=[UIColor whiteColor];
    headerLabel1.backgroundColor = [UIColor clearColor];

    [headerView addSubview:headerLabel1];

    return headerView;

}