Cara Menerapkan Header dan Footer Bagian Tampilan Tabel Khusus dengan Storyboard

Tanpa menggunakan storyboard, kita cukup menyeretnya UIViewke kanvas, meletakkannya dan meletakkannya di metode tableView:viewForHeaderInSectionatau tableView:viewForFooterInSectiondelegasikan.

Bagaimana kita mencapai ini dengan StoryBoard di mana kita tidak bisa menyeret UIView ke kanvas

Aku tahu pertanyaan ini adalah untuk iOS 5, tapi untuk kepentingan pembaca masa depan, catatan bahwa iOS efektif 6 kita dapat sekarang menggunakan dequeueReusableHeaderFooterViewWithIdentifierbukan dequeueReusableCellWithIdentifier.

Jadi viewDidLoad, telepon salah registerNib:forHeaderFooterViewReuseIdentifier:atau registerClass:forHeaderFooterViewReuseIdentifier:. Lalu masuk viewForHeaderInSection, panggil tableView:dequeueReusableHeaderFooterViewWithIdentifier:. Anda tidak menggunakan prototipe sel dengan API ini (ini adalah tampilan berbasis NIB atau tampilan yang dibuat secara program), tetapi ini adalah API baru untuk header dan footer yang dequeued.

Cukup gunakan sel prototipe sebagai header dan / atau footer bagian Anda.

• tambahkan sel ekstra dan masukkan elemen yang Anda inginkan di dalamnya.
• setel pengidentifikasi ke sesuatu yang spesifik (dalam kasus saya SectionHeader)
• menerapkan tableView:viewForHeaderInSection:metode atau tableView:viewForFooterInSection:metode tersebut
• gunakan [tableView dequeueReusableCellWithIdentifier:]untuk mendapatkan header
• mengimplementasikan tableView:heightForHeaderInSection:metode.

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    static NSString *CellIdentifier = @"SectionHeader"; 
    UITableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (headerView == nil){
        [NSException raise:@"headerView == nil.." format:@"No cells with matching CellIdentifier loaded from your storyboard"];
    }
    return headerView;
}  

Sunting: Cara mengubah judul tajuk (pertanyaan yang dikomentari):

1. Tambahkan label ke sel header
2. atur tag label ke nomor tertentu (mis. 123)
3. Dalam tableView:viewForHeaderInSection:metode Anda, dapatkan label dengan menelepon:

    UILabel *label = (UILabel *)[headerView viewWithTag:123]; 

4. Sekarang Anda dapat menggunakan label untuk menetapkan judul baru:

    [label setText:@"New Title"];

Di iOS 6.0 dan di atasnya, banyak hal telah berubah dengan dequeueReusableHeaderFooterViewWithIdentifierAPI baru .

Saya telah menulis panduan (diuji pada iOS 9), yang dapat diringkas seperti:

1. Subkelas UITableViewHeaderFooterView
2. Buat Nib dengan tampilan subclass, dan tambahkan 1 tampilan kontainer yang berisi semua tampilan lain di header / footer
3. Daftarkan Nib di viewDidLoad
4. Terapkan viewForHeaderInSectiondan gunakan dequeueReusableHeaderFooterViewWithIdentifieruntuk mendapatkan kembali header / footer

Saya membuatnya bekerja di iOS7 menggunakan sel prototipe di storyboard. Saya memiliki tombol di tampilan tajuk bagian kustom saya yang memicu segue yang diatur di storyboard.

Mulailah dengan solusi Tieme

Seperti yang ditunjukkan oleh pedro.m, masalah dengan ini adalah mengetuk header bagian menyebabkan sel pertama di bagian tersebut dipilih.

Seperti yang ditunjukkan Paul Von, ini diperbaiki dengan mengembalikan konten sel, bukan seluruh sel.

Namun, seperti yang ditunjukkan oleh Hons, penekanan yang cukup lama pada header bagian tersebut akan merusak aplikasi.

Solusinya adalah dengan menghapus gestureRecognizers dari contentView.

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
     static NSString *CellIdentifier = @"SectionHeader";
     UITableViewCell *sectionHeaderView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

     while (sectionHeaderView.contentView.gestureRecognizers.count) {
         [sectionHeaderView.contentView removeGestureRecognizer:[sectionHeaderView.contentView.gestureRecognizers objectAtIndex:0]];
     }

     return sectionHeaderView.contentView; }

Jika Anda tidak menggunakan gerakan dalam tampilan tajuk bagian Anda, retasan kecil ini sepertinya menyelesaikannya.

Jika Anda menggunakan storyboard, Anda dapat menggunakan sel prototipe di tampilan tabel untuk tata letak tampilan header Anda. Menyetel id unik dan viewForHeaderInSection Anda bisa membuat sel dengan ID itu dan melemparkannya ke UIView.

Jika Anda memerlukan Implementasi Swift dari ini, ikuti petunjuk pada jawaban yang diterima dan kemudian di dalam Anda UITableViewController menerapkan metode berikut:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return tableView.dequeueReusableCell(withIdentifier: "CustomHeader")
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 75
}

Solusi yang saya temukan pada dasarnya adalah solusi yang sama yang digunakan sebelum pengenalan storyboard.

Buat file kelas antarmuka baru yang kosong. Seret UIView ke kanvas, tata letak seperti yang diinginkan.

Muat nib secara manual, tetapkan ke bagian header / footer yang sesuai dalam metode delegasi viewForHeaderInSection atau viewForFooterInSection.

Saya berharap Apple menyederhanakan skenario ini dengan storyboard dan terus mencari solusi yang lebih baik atau lebih sederhana. Misalnya header dan footer tabel kustom langsung ditambahkan.

Saat Anda mengembalikan konten sel Anda akan memiliki 2 masalah:

1. Kecelakaan terkait dengan gerakan
2. Anda tidak menggunakan kembali contentView (setiap kali dalam viewForHeaderInSectionpanggilan, Anda membuat sel baru)

Larutan:

Kelas pembungkus untuk header tabel \ footer. Itu hanya wadah, yang diwarisi dari UITableViewHeaderFooterView, yang menyimpan sel di dalamnya

https://github.com/Magnat12/MGTableViewHeaderWrapperView.git

Daftarkan kelas di UITableView Anda (misalnya, dalam viewDidLoad)

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.tableView registerClass:[MGTableViewHeaderWrapperView class] forHeaderFooterViewReuseIdentifier:@"ProfileEditSectionHeader"];
}

Dalam UITableViewDelegate Anda:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    MGTableViewHeaderWrapperView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"ProfileEditSectionHeader"];

    // init your custom cell
    ProfileEditSectionTitleTableCell *cell = (ProfileEditSectionTitleTableCell * ) view.cell;
    if (!cell) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"ProfileEditSectionTitleTableCell"];
        view.cell = cell;
    }

    // Do something with your cell

    return view;
}

Saya biasa melakukan hal berikut untuk membuat tampilan header / footer dengan malas:

• Tambahkan pengontrol tampilan bentuk bebas untuk header bagian / footer ke storyboard
• Tangani semua hal untuk header di controller tampilan
• Di dalam pengontrol tampilan tabel, sediakan sebuah array pengontrol tampilan yang bisa diubah untuk header bagian / footer yang dihuni kembali [NSNull null]
• Di viewForHeaderInSection / viewForFooterInSection jika view controller belum ada, buat dengan storyboard instantiateViewControllerWithIdentifier, ingat dalam array dan kembalikan view controller view

Saya mengalami masalah dalam skenario di mana Header tidak pernah digunakan kembali bahkan melakukan semua langkah yang tepat.

Jadi sebagai catatan tip untuk semua orang yang ingin mencapai situasi acara bagian kosong (0 baris) diingatkan bahwa:

dequeueReusableHeaderFooterViewWithIdentifier tidak akan menggunakan kembali header sampai Anda mengembalikan setidaknya satu baris

Semoga ini bisa membantu

Untuk menindaklanjuti saran Damon , berikut adalah bagaimana saya membuat header dapat dipilih seperti baris normal dengan indikator pengungkapan.

Saya menambahkan Tombol subkelas dari UIButton (nama subkelas "ButtonWithArgument") ke sel prototipe header dan menghapus teks judul (teks "Judul" tebal adalah UILabel lain dalam sel prototipe)

kemudian atur Tombol ke seluruh tampilan tajuk, dan menambahkan indikator pengungkapan dengan trik Avario

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static NSString *CellIdentifier = @"PersonGroupHeader";
    UITableViewCell *headerView = (UITableViewCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(headerView == nil)
    {
        [NSException raise:@"headerView == nil, PersonGroupTableViewController" format:[NSString stringWithFormat:@"Storyboard does not have prototype cell with identifier %@",CellIdentifier]];
    }

    //  https://stackoverflow.com/a/24044628/3075839
    while(headerView.contentView.gestureRecognizers.count)
    {
        [headerView.contentView removeGestureRecognizer:[headerView.contentView.gestureRecognizers objectAtIndex:0]];
    }


    ButtonWithArgument *button = (ButtonWithArgument *)[headerView viewWithTag:4];
    button.frame = headerView.bounds; // set tap area to entire header view
    button.argument = [[NSNumber alloc] initWithInteger:section]; // from ButtonWithArguments subclass
    [button addTarget:self action:@selector(headerViewTap:) forControlEvents:UIControlEventTouchUpInside];

    // https://stackoverflow.com/a/20821178/3075839
    UITableViewCell *disclosure = [[UITableViewCell alloc] init];
    disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    disclosure.userInteractionEnabled = NO;
    disclosure.frame = CGRectMake(button.bounds.origin.x + button.bounds.size.width - 20 - 5, // disclosure 20 px wide, right margin 5 px
          (button.bounds.size.height - 20) / 2,
          20,
          20);
    [button addSubview:disclosure];

    // configure header title text

    return headerView.contentView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 35.0f;
}

-(void) headerViewTap:(UIGestureRecognizer *)gestureRecognizer;
{
    NSLog(@"header tap");
    NSInteger section = ((NSNumber *)sender.argument).integerValue;
    // do something here
}

ButtonWithArgument.h

#import <UIKit/UIKit.h>

@interface ButtonWithArgument : UIButton
@property (nonatomic, strong) NSObject *argument;
@end

ButtonWithArgument.m

#import "ButtonWithArgument.h"
@implementation ButtonWithArgument
@end

Anda harus menggunakan solusi Tieme sebagai basis tetapi lupakan tentang viewWithTag:pendekatan mencurigakan dan lainnya, alih-alih mencoba memuat ulang tajuk Anda (dengan memuat ulang bagian itu).

Jadi setelah Anda mengatur tampilan tajuk sel kustom Anda dengan semua AutoLayoutbarang mewah , cukup dequeue dan kembalikan contentView setelah pengaturan Anda, seperti:

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
 static NSString *CellIdentifier = @"SectionHeader"; 

    SettingsTableViewCell *sectionHeaderCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    sectionHeaderCell.myPrettyLabel.text = @"Greetings";
    sectionHeaderCell.contentView.backgroundColor = [UIColor whiteColor]; // don't leave this transparent

    return sectionHeaderCell.contentView;
}  

Bagaimana dengan solusi di mana header didasarkan pada view array:

class myViewController: UIViewController {
    var header: [UILabel] = myStringArray.map { (thisTitle: String) -> UILabel in
        let headerView = UILabel()
            headerView.text = thisTitle
    return(headerView)
}

Selanjutnya dalam delegasi:

extension myViewController: UITableViewDelegate {
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return(header[section])
    }
}

1. Tambahkan sel StoryBoard, dan aturreuseidentified

   

2. Kode

   class TP_TaskViewTableViewSectionHeader: UITableViewCell{
   }
   

   dan

   

3. Menggunakan:

   func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
       let header = tableView.dequeueReusableCell(withIdentifier: "header", for: IndexPath.init(row: 0, section: section))
       return header
   }
   

Mirip dengan jawaban laszlo tetapi Anda dapat menggunakan kembali sel prototipe yang sama untuk sel tabel dan sel header bagian. Tambahkan dua fungsi pertama di bawah ini ke subClass UIViewController Anda

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "DataCell") as! DataCell
    cell.data1Label.text = "DATA KEY"
    cell.data2Label.text = "DATA VALUE"
    return cell
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 75
}

// Example of regular data cell dataDelegate to round out the example
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "DataCell", for: indexPath) as! PlayerCell

    cell.data1Label.text = "\(dataList[indexPath.row].key)"
    cell.data2Label.text = "\(dataList[indexPath.row].value)"
    return cell
}

Inilah jawaban @Vitaliy Gozhenko , di Swift.
Untuk meringkas Anda akan membuat UITableViewHeaderFooterView yang berisi UITableViewCell. UITableViewCell ini akan menjadi "dequeuable" dan Anda dapat mendesainnya di storyboard Anda.

1. Buat kelas UITableViewHeaderFooterView

   class CustomHeaderFooterView: UITableViewHeaderFooterView {
   var cell : UITableViewCell? {
       willSet {
           cell?.removeFromSuperview()
       }
       didSet {
           if let cell = cell {
               cell.frame = self.bounds
               cell.autoresizingMask = [UIViewAutoresizing.FlexibleHeight, UIViewAutoresizing.FlexibleWidth]
               self.contentView.backgroundColor = UIColor .clearColor()
               self.contentView .addSubview(cell)
           }
       }
   }
   

2. Hubungkan tampilan tabel Anda dengan kelas ini di fungsi viewDidLoad Anda:

   self.tableView.registerClass(CustomHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "SECTION_ID")
   

3. Saat menanyakan, untuk header bagian, keluarkan CustomHeaderFooterView, dan masukkan sel ke dalamnya

   func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
       let view = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("SECTION_ID") as! CustomHeaderFooterView
       if view.cell == nil {
           let cell = self.tableView.dequeueReusableCellWithIdentifier("Cell")
           view.cell = cell;
       }
   
       // Fill the cell with data here
   
       return view;
   }