Benutzerdefinierte UITableViewCell mit Drop-Down in Swift

Question

Ich möchte benutzerdefinierte UITableViewCell mit XIB implementieren. Here ist die Zeichnung. Der Knopf auf der rechten Seite der Hauptansicht zeigt/versteckt zusätzliche Ansicht. Ich habe zwei Fragen:

1. Wie kann ich die weitere Ansicht verbergen? Ich denke, dass eine Möglichkeit wäre, die Höhe im Rahmen der zusätzlichen UIView auf Null zu setzen. Gibt es bessere Möglichkeiten?

2. Die Schaltflächen in zusätzliche Ansicht (in diesem Fall 1-5) sollte dynamisch angezeigt werden. Es gibt zwei Datensätze: einen für die linke Seite (Tasten 1-3) und einen für die rechte Seite (Tasten 4-5). Die Höhe für die linken Tasten ist fest, sagen wir mal 70px. Die Höhe der Tasten auf der rechten Seite sollte so eingestellt werden, dass die Gesamthöhe der Tasten auf der rechten Seite der Gesamthöhe auf der linken Seite entspricht. Wie können die Schaltflächen unter Berücksichtigung dieser Regeln dynamisch hinzugefügt werden?

Die Schaltflächen werden zur Laufzeit hinzugefügt. Zum Beispiel gibt es zwei Arrays:

var leftButtons:[String] = ["button1label", “button2label“, "button3label"]

var rightButtons:[String] = ["button4label", "button5label"].

Nehmen wir an, ich füge "button6label" zu leftButtons später zur Laufzeit hinzu. Die Größe für die leftView/rightView sowie die Größe für die Schaltflächen in diesen Ansichten sollte angepasst werden. Auch hier ist die Höhe jeder Taste auf der linken Seite festgelegt.

Answer 1

Zunächst sollten Sie ContainerView Blick auf Ihrer benutzerdefinierten UITableViewCell hinzufügen Jetzt Einschränkungen hinzufügen auf dem ContainerView-leading , trailing, top & bottom to superView mit priority 999 für alle constraints`.

Jetzt sollten Sie zwei Ansichten auf ContainerView hinzufügen, eine ist mainView und andere ist additionView.

und fügen Sie Einschränkungen für die mainView hinzu - was zu superView, top zu superView, nach SuperView und Höhe Beschränkung (sagen wir 70).

jetzt textfield und show/hide button in Seite fügen Sie die Hauptansicht und gelten Einschränkungen für textField und show/hide button.

textfield Zwänge-leading to superView, top to superView, bottom to superView und Horizontal spacing between textField & show/hide button.

Schaltfläche Einblenden/Ausblenden Einschränkungen-top to superView, bottom to superView, trailing to superView und Breitenbeschränkungen.

Hier ist mainView richtig konfiguriert. So, jetzt lassen Sie uns konfigurieren additionView

Sie in additionView zwei neue Ansicht hinzufügen sollte, ist ein leftView und andere rightView & add constraints auf dem leftView & rightView.

leftView Einschränkungen-leading to superView, top to superView, bottom to superView, Horizontal spacing between leftView & rightView, equal width and width constraints of leftView to rightView.

rightView Einschränkungen-trailing to superView, top to superView & bottom to superView Hier Ihre Interface Builder Designing completed so jetzt müssen wir die Tasten links und rechts Ansicht zur Laufzeit verwalten. Um dies zu tun, müssen Sie eine benutzerdefinierte Klassen VerticalContainerView genannt wird, die die vertikale Verteilung der Schaltflächen verwalten wird.

Ich habe die VerticalContainerView mit der KVConstraintExtensionsMaster-Bibliothek zum Anwenden von Einschränkungen, die ich implementiert habe, erstellt.

Code unten in VerticalContainerView.h Header-Datei Put

#import <UIKit/UIKit.h> 

@interface VerticalContainerView : UIView 
-(void)configureButtonsbyNames:(NSArray<__kindof NSString *>*)names isDistribuated:(BOOL)isDistributed; 
@end 

Code unten Put in VerticalContainerView.m Datei

#import "VerticalContainerView.h" 
#import "KVConstraintExtensionsMaster.h" 

@implementation VerticalContainerView 

-(void)configureButtonsbyNames:(NSArray<__kindof NSString *>*)names isDistribuated:(BOOL)isDistributed 
{ 
    /* Just Two steps to Apply\Add constraints by programatically */ 
    /* Step 1 create & configure the view hierarchy for constraint first. */ 
    /* Step 2 Apply the constraints */ 

    CGFloat space = 0.0; 
    CGFloat height = 70.0; 

    UIButton *previousContentButton = nil; 
    NSInteger count = names.count; 

    for (NSInteger i = 0; i < count; i++) 
    { 
     UIButton *contentButton = [UIButton prepareNewViewForAutoLayout]; 
     if (i&1) { 
      [contentButton setBackgroundColor:[UIColor greenColor]]; 
     }else{ 
      [contentButton setBackgroundColor:[UIColor purpleColor]]; 
     } 

     [contentButton setTag:i]; 
     [contentButton setTitle:names[i] forState:UIControlStateNormal]; 
     [self addSubview:contentButton]; 

     [contentButton applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:space]; 

     if (!isDistributed) { 
      [contentButton applyHeightConstraint:height]; 
     } 

     if (i == 0) // for first 
     { 
      [contentButton applyTopPinConstraintToSuperviewWithPadding:space]; 
     } 
     else if (i == count-1) // for last 
     { 
      if (isDistributed) { 
       [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeHeight toAttribute:NSLayoutAttributeHeight ofView:contentButton spacing:space]; 
      } 

      [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:space]; 
      [contentButton applyBottomPinConstraintToSuperviewWithPadding:space]; 
     } 
     else 
     { 
      if (isDistributed) { 
       [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeHeight toAttribute:NSLayoutAttributeHeight ofView:contentButton spacing:space]; 
      } 

      [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:space]; 
     } 

     previousContentButton = contentButton; 
    } 

} 

@end 

nun eine benutzerdefinierte Zelle erstellen wird CustomCell & setzen Code unten in CustomCell.h Header-Datei

genannt

#import "VerticalContainerView.h" 

@interface CustomCell : UITableViewCell 
@property (weak, nonatomic) IBOutlet VerticalContainerView *leftVerticalContainerView; 
@property (weak, nonatomic) IBOutlet VerticalContainerView *rightVerticalContainerView; 
@end 

Geben Sie den folgenden Code in die Datei ein.

#import "CustomCell.h" 

@implementation CustomCell 

-(void)prepareForReuse 
{ 
    // here you have to remove the all the buttons from left and right veiw becuase 
    // Every cell can have distinct number buttons on left and right view. 

    for (UIView *subView in self.leftVerticalContainerView.subviews) { 
     [subView removeFromSuperview]; 
    } 
    for (UIView *subView in self.leftVerticalContainerView.subviews) { 
     [subView removeFromSuperview]; 
    } 

    [super prepareForReuse]; 

} 

@end 

ändert sich nun UITableViewCell Class von unseren CustomCell mit Hilfe von Identity inspector editor von Interface Builder

Auch Änderungen left and right View Class von unseren VerticalContainerView mit Hilfe von Identity inspector editor von Interface Builder

nun die IBOutlet unserer CusromCell verbinden für leftVerticalContainerView & rightVerticalContainerView

Setzen Sie die folgenden c Ode in der viewDidLoad Methode ofyour Viewcontroller ist:

tableView.rowHeight = UITableViewAutomaticDimension; 
/* any estimated height but must be more than 2, but it should be more estimated */ 
tableView.estimatedRowHeight = 210.0; 
tableView.delegate = self; 
tableView.dataSource = self; 

// if you created cell from `.xib` is called CustomCell.xib,then you have to register that cell with table. 
// UINib *nib = [UINib nibWithNibName:@"CustomCell" bundle:nil]; 
// [tableView registerNib:nib forCellReuseIdentifier:@"YouCellIdentifier"]; 

Jetzt UITableView DataSource in Ihrem Viewcontroller

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section{ 
    return 10; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath{ 

    static NSString *cellIdentifier = @"CustomCell"; 
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath]; 

    if (indexPath.row%2 == 0) { 
     // this is fixed height constraints 
     [cell.leftVerticalContainerView configureButtonsbyNames:@[@"button1",@"button2",@"button3"] isDistributed:NO]; 
     // this is distributed height constraints according to left view 
     [cell.rightVerticalContainerView configureButtonsbyNames:@[@"button4",@"button5"] isDistributed:YES]; 
    } 
    else{ 
     // this is fixed height constraints 
     [cell.leftVerticalContainerView configureButtonsbyNames:@[@"button1",@"button2",@"button3",@"button4",@"button5"] isDistributed:NO]; 

     // this is isDistribuated height constraints according to left view 
     [cell.rightVerticalContainerView configureButtonsbyNames:@[@"button6",@"button7",@"button8"] isDistributed:YES]; 
    } 

    return cell; 
} 

Answer 2

Sie können dies mit UITableViewCell s mit automatischer Höhe tun. Damit können Sie Einschränkungen verwenden, um die Höhe der Zelle zu bestimmen.

Um diese Arbeit zu bekommen:

• die folgenden Zeilen hinzufügen auf Automatische Höhe drehen:

  tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 160.0 // eine ungefähre Zellhöhe.

• Verwenden Sie Einschränkungen, um den Inhalt der Zelle Push Push nach außen, so dass der Inhalt die Zellenhöhe bestimmt.
• Fügen Sie der zusätzlichen Ansicht eine Höhenbeschränkung mit einem Code IBOutlet hinzu. Setzen Sie die Eigenschaft constant dieser Einschränkung auf 0, und legen Sie die Eigenschaft .hidden der zusätzlichen Ansicht auf true fest, um die zusätzliche Ansicht auszublenden.
• Für ein schöneres Öffnen/Schließen, ändern Sie die Einschränkungen constant Eigenschaft in einem UIView Animationsblock.