UITableView: Festlegen der Höhe der Tabellenkopfansicht basierend auf der Bildschirmgröße

Question

Ich habe eine Tabellenansicht mit einer Tabellenkopfansicht, die über den Interface Builder in derselben xib erstellt wurde. Ich möchte die Höhe des Headers basierend auf der Bildschirmgröße festlegen, z. B. 50% der Bildschirmhöhe. Hier

ist, was ich mit einer statischen Höhe auf einem iPhone 4s bekommen:

Und hier ist das, was ich auf einem iPhone erhalten 6:

Beachten Sie, dass Der Inhalt des Headers ist statisch.

Ich kann keine Einschränkungen für die Kopfzeile mit Auto-Layout festlegen. Ich habe versucht, eine Höhenbeschränkung basierend auf der Höhe der Tabellenansicht festzulegen, aber dies scheint im Interface Builder nicht möglich zu sein. Ziehen mit der Maus funktioniert nicht. Ich kann keine Zeile vom Header zur Tabellenansicht oder sogar zum Header ziehen.

Wie kann ich die Höhe des Headers basierend auf der Bildschirmgröße?

Answer 1

Leider können Tabellenkopfansichten nicht mithilfe des automatischen Layouts skaliert werden. Sie können das automatische Layout für Elemente innerhalb der Kopfzeile verwenden, Sie müssen jedoch die Größe der Kopfzeile angeben, indem Sie ihren Rahmen explizit festlegen. Wenn die Höhe des Headers statisch und zum Zeitpunkt der Kompilierung bekannt ist, können Sie IB verwenden. Wenn die Höhe jedoch dynamisch ist oder vom Gerät abhängt (wie in Ihrem Fall), müssen Sie es in Code einstellen.

Eine ziemlich flexible Lösung wäre, eine benutzerdefinierte Unterklasse von UITableView zu erstellen und den Rahmen des Headers in der layoutSubviews-Methode anzupassen. Auf diese Weise wird die Größe des Headers automatisch angepasst, wenn die Größe der Tabelle geändert wird. Sie müssen jedoch darauf achten, den Rahmen des Headers nur dann erneut anzuwenden, wenn eine Änderung tatsächlich erforderlich ist, um eine Endlosschleife zu vermeiden.

Hier ist, was es in Objective-C aussehen würde:

@interface MyTableView : UITableView 
@end 

@implementation MyTableView : UITableView 

- (void)layoutSubviews { 
    [super layoutSubviews]; 

    if (self.tableHeaderView) { 
     UIView *header = self.tableHeaderView; 
     CGRect rect = CGRectMake(0, 0, self.bounds.size.width, 
           self.bounds.size.height/2); 

     // Only adjust frame if needed to avoid infinite loop 
     if (!CGRectEqualToRect(self.tableHeaderView.frame, rect)) { 
      header.frame = rect; 

      // This will apply the new header size and trigger another 
      // call of layoutSubviews 
      self.tableHeaderView = header; 
     } 
    } 
} 

@end 

Die Swift-Version wie folgt aussieht:

class MyTableView: UITableView { 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     if let header = tableHeaderView { 
      let rect = CGRectMake(0, 0, bounds.size.width, bounds.size.height/2) 

      // Only adjust frame if needed to avoid infinite loop 
      if !CGRectEqualToRect(header.frame, rect) { 
       header.frame = rect 

       // This will apply the new header size and trigger 
       // another call of layoutSubviews 
       tableHeaderView = header 
      } 
     } 
    } 

} 

Beachten Sie, dass die oben genannten Schnipsel die Grenzen der Tabellenansicht verwenden, anstatt die Bildschirmgröße, um die Kopfzeilengröße zu berechnen.

Aktualisierung: Beachten Sie, dass nach dem Festlegen der Eigenschaft tableHeaderView manchmal ein zusätzlicher Aufruf von layoutIfNeeded erforderlich ist. Ich stieß auf ein Problem, bei dem Abschnittsüberschriften über die Kopfzeile gezogen wurden, ohne layoutIfNeeded aufzurufen.

Answer 2

Ich habe den folgenden Code ausprobiert und es scheint auf iOS7 und iOS8 zu funktionieren. Es ändert die Höhe des Kopfrahmens auf die Hälfte der Bildschirmhöhe. Möglicherweise möchten Sie die Höhe der Navigations- und Statusleiste von der Bildschirmhöhe vor/2 subtrahieren, wenn die Kopfzeile nur die halbe Größe des Tabellenansichtsbereichs haben muss.

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    // Your other code 

    // Set the table header height 
    CGRect headerFrame = self.tableView.tableHeaderView.frame; 
    headerFrame.size.height = [[UIScreen mainScreen] bounds].size.height/2; 
    self.tableView.tableHeaderView.frame=headerFrame; 
}