TableHeaderView Größe verändern

Hallo Zusammen,

wusstet ihr schon, dass man über und unter einer Tabelle noch zwei Views einfügen kann? Das sind die tableHeaderView und die tableFooterView. Ich zeige euch heute wie man so etwas macht und erkläre außerdem wie man bei einer bereits erstellte tableHeaderView die Größe verändern kann.

TableHeaderView

In dem Beispiel starten wir mit einer leeren Tabelle ohne HeaderView durch einen kleines „+“ in der Navigationsbar wird der HeaderView ausgefahren. Anschließend erhält der Benutzer die Möglichkeit diesen noch zu vergrößern.

Wir erstellen ein neues Projekt und nutzen einen UITableViewController und betten ihn in einen NavigationController ein. Zusätzlich definieren wir die folgenden Propertys.

@property (strong, nonatomic)  UIBarButtonItem  *addButtonButton;
@property (strong, nonatomic)  UIView           *headerView;
@property (assign, nonatomic)  int              expandCounter;

In ViewDidLoad möchte ich das eben definierte UIBarButtonItem erstellen. Die Tabelle wird ja im Moment ohne TableHeaderView erstellt.Ich möchte den HeaderView gerne durch die Betätigung des BarButtonItems erstellen lassen. Außerdem setzten wir noch den expandCounter auf 1.

self.addButtonButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(expandHeaderView:)];
self.navigationItem.rightBarButtonItem = self.addButtonButton;
self.expandCounter = 1;

Natürlich müssen wir die expandHeaderView Methode nun definieren.

-(void)expandHeaderView:(UIBarButtonItem*)sender {    
    if (!self.tableView.tableHeaderView) {      
        // 1
        self.headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, self.tableView.frame.size.height*0.2*self.expandCounter)];

        // 2
        self.navigationItem.rightBarButtonItem = nil;
             
        // 3 
        [UIView beginAnimations:nil context:NULL];
        [UIView animateWithDuration:0.5f animations:^{
            self.tableView.tableHeaderView = self.headerView;
        }];
        [UIView commitAnimations];
        self.expandCounter++;
    } 
}

Zunächst prüfen wir, ob es nicht bereits einen TableHeaderView gibt. Falls dem nicht so ist erstellen wir ihn (1) und entfernen unseren „+“ Button (2). Mit beginAnimation (3) sorgen wir für eine geschmeidige Animation.

Oben habe ich ja geschrieben, dass der Benutzer die HeaderView noch weiter ausfahren kann. Dazu bedienen wir uns eines Buttons. Der folgenden Code ist nach self.navigationItem.rightBarButtonItem = nil einzufügen.

UIButton *expandButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
expandButton.frame = CGRectMake(self.tableView.frame.size.width*0.25, self.headerView.frame.size.height/2, self.tableView.frame.size.width*0.5, self.tableView.frame.size.height*0.05);
[expandButton setTitle:@"expand even more" forState:UIControlStateNormal];
[expandButton setTintColor: [UIColor whiteColor]];
expandButton.backgroundColor = [UIColor colorWithRed:118.0f/255.0f green:194.0f/255.0f blue:175.0f/255.0f alpha:1.0f];
[expandButton addTarget:self
                         action:@selector(expandHeaderView:)
               forControlEvents:UIControlEventTouchDown];
expandButton.tag = 99;
[self.headerView addSubview:expandButton];

Alles ziemlich Standard. Wir erstellen einen Button und lassen ihn die bereits bekannte Methode expandHeaderView aufrufen. Außerdem geben wir dem Button ein Tag, um ihn später wieder im Zugriff zuhaben – das könnte man auch über ein Property lösen, aber so ist es „schlanker“. Da die Methode jedoch als ersten prüft, ob bereits ein TableHeaderView vorhanden ist, macht der Button im Moment gar nichts. Wir brauchen einen else Zweig zur if (!self.tableView.tableHeaderView) Abfrage.

} else if (self.expandCounter == 2) {
    // 1
    self.headerView.frame = CGRectMake(0, 0, self.tableView.frame.size.width, self.tableView.frame.size.height*0.2*self.expandCounter);

    // 2
    self.tableView.tableHeaderView = self.headerView;

    // 3
    UIButton *expandButton = (UIButton*)[self.tableView.tableHeaderView viewWithTag:99];
    [expandButton setTitle:@"collapse table header" forState:UIControlStateNormal];
    self.expandCounter++;
} else {
    // 4
    [self closeHeaderView];  
}

Da wir den expandCounter beim Erstellen der TableHeaderView hochgezählt haben, springen wir nun in den else Zweig ab. Dort vergrößern wir den Frame des HeaderViews (1). Man könnte vermuten, dass dies automatisch den TableHeaderView vergrößert, der das HeaderView property als eben dieser gesetzt ist. Tut es aber nicht. Der vergrößerte HeaderView muss erneut zugewiesen werden (2). Außerdem erhöhen wir erneut den expandCounter. Auf diese Weise springen wir in den zweiten else Zweig, sobald der Button erneut betätigt wird. Dort wird dann closeHeaderView aufgerufen (4).

- (void)closeHeaderView {
    // 1
    self.addButtonButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(expandHeaderView:)];
    self.navigationItem.rightBarButtonItem = self.addButtonButton;

    // 2
    [UIView beginAnimations:nil context:NULL];
    [UIView animateWithDuration:0.5f animations:^{
        CGRect theFrame = CGRectMake(0, 0, self.tableView.frame.size.width, 0);
        self.headerView.frame = theFrame;
        self.tableView.tableHeaderView = self.headerView;
    } completion:^(BOOL finished){
        self.tableView.tableHeaderView = nil;
        self.headerView = nil;
    }];
    [UIView commitAnimations];
    self.expandCounter = 1;
}

Wir erzeugen das UIBarButtonItem erneut (1), damit das Spiel von vorne losgehen kann. Außerdem setzen wir die Größe der TableHeaderView auf die bekannte Weise auf 0 zurück (2). Der expandCounter muss ebenfalls auf den Ursprungswert gesetzt werden.

TableHeaderView

Bis dahin.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.