Menambahkan iOS UITableView HeaderView (bukan tajuk bagian)

Saya ingin menambahkan tajuk tabel (bukan tajuk bagian) seperti di aplikasi kontak, misalnya:

persis seperti itu - label di sebelah gambar di atas tabel.

Saya ingin semua tampilan dapat digulir sehingga saya tidak dapat menempatkannya di luar tabel.

Bagaimana saya bisa melakukan itu?

UITableViewmemiliki tableHeaderViewproperti. Tetapkan itu ke tampilan apa pun yang Anda inginkan di sana.

Gunakan yang baru UIViewsebagai wadah, tambahkan label teks dan tampilan gambar ke yang baru UIView, kemudian atur tableHeaderViewke tampilan baru.

Misalnya, dalam 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];
     // ...
} 

Anda dapat melakukannya dengan cukup mudah di Interface Builder. Cukup buat tampilan dengan tabel dan letakkan tampilan lain di atas meja. Ini akan menjadi tampilan header tabel. Tambahkan label dan gambar Anda ke tampilan itu. Lihat gambar di bawah untuk hierarki tampilan.

Dalam Swift :

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
}

Anda juga bisa membuat HANYA UIView di Interface builder dan drag & drop ImageView dan UILabel (untuk membuatnya tampak seperti header yang Anda inginkan) dan kemudian gunakan itu.

Setelah UIView Anda terlihat seperti yang Anda inginkan juga, Anda dapat secara inisialisasi memprogramnya dari XIB dan menambahkannya ke UITableView Anda. Dengan kata lain, Anda tidak perlu mendesain tabel SELURUH DI IB. Hanya headerView (dengan cara ini tampilan header dapat digunakan kembali di tabel lain juga)

Misalnya saya punya UIView khusus untuk salah satu header tabel saya. Tampilan dikelola oleh file xib yang disebut "CustomHeaderView" dan dimuat ke header tabel menggunakan kode berikut di subkelas UITableViewController saya:

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

}