Problème de mise en page automatique avec un en-tête de section UITableView

Je travaille avec un UITableViewController. J'ai un tableau d'objets que l'utilisateur peut supprimer si il va en modifier d'autres. Quand il passe en mode edit, je veux afficher un en-tête qui donne une option pour supprimer tous les éléments. Dans le même temps, il doit afficher une étiquette donnant des informations sur la quantité d'espace utilisé. Je veux ce pour redimensionner automatiquement si l'appareil passe en mode paysage. À partir de ce que je peux dire, j'ai besoin d'utiliser la mise en page automatique pour ce faire.

J'aurais aimé configurer l'en-tête dans un UIView conçu dans le Storyboard, mais le Storyboard permet uniquement de visualiser les contrôleurs, pas vues. Je sais que je pourrais avoir un fichier XIB tenir, mais je préfère éviter que si je le pouvais.

Pour commencer, j'ai remplacé la editing de la propriété, de sorte que je peux redessiner le tableau de la section lorsqu'en mode d'édition.

- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
    [super setEditing:editing animated:animated];
    NSIndexSet *set = [NSIndexSet indexSetWithIndex:0];
    [self.tableView reloadSections:set withRowAnimation:UITableViewRowAnimationAutomatic];
}

- Je utiliser ce code à insérer l'en-tête de section, le cas échéant:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    if (self.isEditing)
        return [self headerView];
    else
        return nil;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    if (self.isEditing)
        return [self headerView].frame.size.height;
    else
        return 0;
}

La magie qui se passe dans le - headerView méthode. Elle renvoie une UIView *l'obtenir à partir d'une cache si nécessaire. Il ajoute un bouton et de l'étiquette, puis se met dans la les contraintes. J'ai utilisé ces mêmes contraintes dans le Storyboard et je n'ai pas eu de problèmes.

- (UIView *)headerView
{
if (headerView)
return headerView;
float w = [[UIScreen mainScreen] bounds].size.width;
UIButton *deleteAllButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[deleteAllButton setTitle:@"Delete All" forState:UIControlStateNormal];
CGRect deleteAllButtonFrame = CGRectMake(8.0, 8.0, 30.0, 30);   //The autolayout should resize this.
[deleteAllButton setFrame:deleteAllButtonFrame];
deleteAllButton.translatesAutoresizingMaskIntoConstraints = NO;
[deleteAllButton setContentHuggingPriority:252 forAxis:UILayoutConstraintAxisHorizontal];
[deleteAllButton setContentCompressionResistancePriority:751 forAxis:UILayoutConstraintAxisHorizontal];
CGRect textFrame = CGRectMake(47.0, 8.0, 30.0, 30); //The autolayout should resize this.
UILabel *currSizeText = [[UILabel alloc] initWithFrame:textFrame];
currSizeText.text = @"You have a lot of text here telling you that you have stuff to delete";
currSizeText.translatesAutoresizingMaskIntoConstraints = NO;
currSizeText.adjustsFontSizeToFitWidth = YES;
CGRect headerViewFrame = CGRectMake(0, 0, w, 48);
headerView = [[UIView alloc] initWithFrame:headerViewFrame];
//headerView.autoresizingMask = UIViewAutoresizingNone;//UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
//headerView.translatesAutoresizingMaskIntoConstraints = NO;
[headerView addSubview:deleteAllButton];
[headerView addSubview:currSizeText];
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(deleteAllButton, currSizeText);
[headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[deleteAllButton]-[currSizeText]-|"
options:0
metrics:nil
views:viewsDictionary]];
[headerView addConstraint:[NSLayoutConstraint constraintWithItem:deleteAllButton
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:headerView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
[headerView addConstraint:[NSLayoutConstraint constraintWithItem:currSizeText
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:headerView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
return headerView;
}

Droit maintenant, tout fonctionne à merveille. Le bouton conserve une taille constante (parce que la tendresse et de la résistance à la compression sont plus élevés que le label) et le label va modifier son texte pour l'adapter à l'espace disponible. Il redimensionne quand j'ai faites pivoter l'appareil. Le centrage vertical semble désactivé sur l'étiquette, mais je suis prêt à oublier pour l'instant.

Cependant, lorsque j'ai d'abord configuration de l'en-tête de section, je reçois un ennuyeux de mise en page automatique d'avertissement.

2014-02-07 11:25:19.770 ErikApp[10704:70b] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
"<NSLayoutConstraint:0xb9a4ad0 H:|-(NSSpace(20))-[UIButton:0xb99e220]   (Names: '|':UIView:0xb9a4680 )>",
"<NSLayoutConstraint:0xb9a4bf0 H:[UIButton:0xb99e220]-(NSSpace(8))-[UILabel:0xb99f530]>",
"<NSLayoutConstraint:0xb9a4c20 H:[UILabel:0xb99f530]-(NSSpace(20))-|   (Names: '|':UIView:0xb9a4680 )>",
"<NSAutoresizingMaskLayoutConstraint:0xa2d1680 h=--& v=--& H:[UIView:0xb9a4680(0)]>"
)
Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0xb9a4bf0 H:[UIButton:0xb99e220]-(NSSpace(8))-[UILabel:0xb99f530]>
Break on objc_exception_throw to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

Ma première pensée a été de changer le retourné UIView propriété translatesAutoresizingMaskIntoConstraints à NO. Quand je fais ça, j'ai eu un crash au lieu d'un avertissement. Pas exactement une amélioration.

2014-02-07 10:49:13.041 ErikApp[10597:70b] *** Assertion failure in -[UITableView layoutSublayersOfLayer:], /SourceCache/UIKit_Sim/UIKit-2903.23/UIView.m:8540
2014-02-07 10:49:13.383 ErikApp[10597:70b] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Auto Layout still required after executing -layoutSubviews. UITableView's implementation of -layoutSubviews needs to call super.'

Quelqu'un a une suggestion que faire pour se débarrasser de l'avertissement?

source d'informationauteur Erik Allen

Il semble que, lorsque votre article est de rechargement, la UITableView à un certain moment a une référence à l'ancien en-tête de section et le nouveau. Et si c'est le même point de vue, certains problèmes apparaissent. Donc, vous devez toujours fournir un point de vue différent de la tableView:viewForHeaderInSection: méthode.

Parfois, il est vraiment utile d'avoir une seule instance pour être présenté dans un en-tête de section. Pour ce faire, vous devez créer un nouveau point de vue chaque fois que vous êtes invité pour un en-tête de section et de mettre votre affichage personnalisé à l'intérieur, la configuration de contraintes de manière appropriée. Voici un exemple:

@property (strong, nonatomic) UIView *headerContentView;
- (void)viewDidLoad {
//Create the view, which is to be presented inside the section header
self.headerContentView = [self loadHeaderContentView];
//Note that we have to set the following property to NO to prevent the unsatisfiable constraints
self.headerContentView.translatesAutoresizingMaskIntoConstraints = NO;
}
- (UIView *)loadHeaderContentView {
//Here you instantiate your custom view from a nib
//or create it programmatically. Speaking in terms
//of the OP, it should look like the following. (Note:
//I have removed all the frame-related code as your are
//not supposed to deal with frames directly with auto layout.
//I have also removed the line setting translatesAutoresizingMaskIntoConstraints property
//to NO of the headerContentView object as we do it explicitly in viewDidLoad.
UIButton *deleteAllButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[deleteAllButton setTitle:@"Delete All" forState:UIControlStateNormal];
deleteAllButton.translatesAutoresizingMaskIntoConstraints = NO;
[deleteAllButton setContentHuggingPriority:252 forAxis:UILayoutConstraintAxisHorizontal];
[deleteAllButton setContentCompressionResistancePriority:751 forAxis:UILayoutConstraintAxisHorizontal];
UILabel *currSizeText = [[UILabel alloc] init];
currSizeText.text = @"You have a lot of text here telling you that you have stuff to delete";
currSizeText.translatesAutoresizingMaskIntoConstraints = NO;
currSizeText.adjustsFontSizeToFitWidth = YES;
UIView *headerContentView = [[UIView alloc] init];
[headerContentView addSubview:deleteAllButton];
[headerContentView addSubview:currSizeText];
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(deleteAllButton, currSizeText);
//In the original post you used to have an ambigious layout
//as the Y position of neither button nor label was set.
//Note passing NSLayoutFormatAlignAllCenterY as an option
[headerContentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[deleteAllButton]-[currSizeText]-|"
options:NSLayoutFormatAlignAllCenterY
metrics:nil
views:viewsDictionary]];
[headerContentView addConstraint:[NSLayoutConstraint constraintWithItem:deleteAllButton
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:headerContentView
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0]];
//Here setting the heights of the subviews
[headerContentView addConstraint:[NSLayoutConstraint constraintWithItem:deleteAllButton
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:headerContentView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
[headerContentView addConstraint:[NSLayoutConstraint constraintWithItem:currSizeText
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:headerContentView
attribute:NSLayoutAttributeHeight
multiplier:0.5
constant:0]];
return headerContentView;
}
- (UIView *)headerView {
UIView *headerView = [[UIView alloc] init];
[headerView addSubview:self.headerContentView];
NSDictionary *views = @{@"headerContentView" : self.headerContentView};
NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[headerContentView]|" options:0 metrics:nil views:views];
NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[headerContentView]|" options:0 metrics:nil views:views];
[headerView addConstraints:hConstraints];
[headerView addConstraints:vConstraints];
return headerView;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
if (self.isEditing)
return [self headerView];
return nil;      
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
//You need to return a concrete value here
//and not the current height of the header.
if (self.isEditing)
return 48;
return 0;
}

J'ai créé un dépôt GitHub pour ce post ici:https://github.com/bilobatum/AnimatedTableHeaderDemo

Cette solution met en oeuvre un tableau d'en-tête de la vue, c'est à dire, self.tableView.tableHeaderViewau lieu de les en-têtes de section pour une vue de la table avec une seule section.

La table d'en-tête de la vue et de ses sous-vues sont de couleur pour des fins de test. L'arbitraire d'un en-tête de table hauteur est choisie pour des fins de test.

La table d'en-tête est paresseusement instancié et anime en place lors de l'affichage de la table entre dans le mode d'édition. Une animation se cache la table d'en-tête lors de l'affichage de la table quitte le mode d'édition.

En général, vous n'êtes pas censé ensemble d'images lors de l'utilisation de l'Auto Mise en page. Cependant, un tableau d'en-tête est un cas particulier, dans un sens. N'utilisez pas de Mise en page Automatique de la taille ou de la position d'un en-tête de table. Au lieu de cela, vous devez définir un tableau d'en-tête de l'image (en fait, vous avez seulement besoin de définir le rectangle de hauteur). À son tour, le système sera de traduire la table d'en-tête de l'image dans les contraintes.

Cependant, il est correct d'utiliser la Mise en page Automatique sur la table d'en-tête du sous-vues. Certaines de ces contraintes sont installés sur la table d'en-tête de la vue.

@interface ViewController ()
@property (nonatomic, strong) NSArray *mockData;
@property (nonatomic, strong) UIButton *deleteAllButton;
@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) UIView *headerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"Fruit";
self.mockData = @[@"Orange", @"Apple", @"Pear", @"Banana", @"Cantalope"];
self.navigationItem.rightBarButtonItem = self.editButtonItem;
}
- (UIButton *)deleteAllButton
{
if (!_deleteAllButton) {
_deleteAllButton = [[UIButton alloc] init];
_deleteAllButton.backgroundColor = [UIColor grayColor];
[_deleteAllButton setTitle:@"Delete All" forState:UIControlStateNormal];
_deleteAllButton.translatesAutoresizingMaskIntoConstraints = NO;
[_deleteAllButton addTarget:self action:@selector(handleDeleteAll) forControlEvents:UIControlEventTouchUpInside];
}
return _deleteAllButton;
}
- (UILabel *)label
{
if (!_label) {
_label = [[UILabel alloc] init];
_label.backgroundColor = [UIColor yellowColor];
_label.text = @"Delete all button prompt";
_label.translatesAutoresizingMaskIntoConstraints = NO;
}
return _label;
}
- (UIView *)headerView
{
if (!_headerView) {
_headerView = [[UIView alloc] init];
//WARNING: do not set translatesAutoresizingMaskIntoConstraints to NO
_headerView.backgroundColor = [UIColor orangeColor];
_headerView.clipsToBounds = YES;
[_headerView addSubview:self.label];
[_headerView addSubview:self.deleteAllButton];
[_headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_deleteAllButton]-[_label]-|" options:NSLayoutFormatAlignAllCenterY metrics:0 views:NSDictionaryOfVariableBindings(_label, _deleteAllButton)]];
[_headerView addConstraint:[NSLayoutConstraint constraintWithItem:self.deleteAllButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:_headerView attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]];
}
return _headerView;
}
- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
[super setEditing:editing animated:animated];
if (self.editing) {
self.tableView.tableHeaderView = self.headerView;
[self.tableView layoutIfNeeded];
}
[UIView animateWithDuration:1.0 animations:^{
CGRect rect = self.headerView.frame;
if (editing) {
rect.size.height = 60.0f; //arbitrary; for testing purposes
} else {
rect.size.height = 0.0f;
}
self.headerView.frame = rect;
self.tableView.tableHeaderView = self.headerView;
[self.tableView layoutIfNeeded];
} completion:^(BOOL finished) {
if (!editing) {
self.tableView.tableHeaderView = nil;
}
}];
}
- (void)handleDeleteAll
{
NSLog(@"handle delete all");
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.mockData count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
cell.textLabel.text = self.mockData[indexPath.row];
return cell;
}
@end

2

Tout à fait un moment depuis que vous avez posé la question, mais peut-être que la réponse est jet serviable pour vous (ou d'autres).

Mise en page automatique est automatiquement ajouté une contrainte pour l'ensemble de la section en-tête de la largeur (la dernière de la sortie de débogage contraint la liste). Cela devrait bien sûr pas de problème, comme la largeur est prise en compte lors du calcul de la cadres de la sous-vues.
Mais parfois, il semble y avoir des erreurs d'arrondi dans le calcul des images...

Juste ajouter une moindre priorité à l'un des sous-vues largeur de valeurs pour résoudre le problème:

...@"|-[deleteAllButton(30.0@999)]-[currSizeText]-|"

Si la largeur de bouton n'est pas l'usage constant ...deleteAllButton(>=30@999)...
0

La solution de contournement que j'ai essayé d'utiliser est de passer de l'en-tête de section trucs et aller directement à la tableHeaderView. J'ai remplacé mon editing propriété avec ceci:
```
- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
[super setEditing:editing animated:animated];
if (editing)
self.tableView.tableHeaderView = [self headerView];
else
self.tableView.tableHeaderView = nil;
}
```
Il n'a pas d'animer en tant que bien que l'en-tête de section, mais cela va faire pour l'instant.

Ce n'est pas vraiment aborder le vrai problème (d'où l'expression "solution de contournement") donc je ne vais pas accepter cette solution.

Vous devez vous connecter pour publier un commentaire.