Ошибка автоматической компоновки с заголовком раздела UITableView

Ответ 1

Кажется, что когда ваш раздел перезагружается, UITableView в какой-то момент имеет ссылку как на старый заголовок раздела, так и на новый. И если это та же точка зрения, появляются некоторые проблемы. Поэтому вы всегда должны предоставлять другое представление из метода tableView:viewForHeaderInSection:.

Иногда очень полезно, чтобы один экземпляр был представлен в заголовке раздела. Для этого вам нужно создать новое представление каждый раз, когда вас просят заголовок раздела и помещают в него свой пользовательский вид, соответствующим образом настраивая ограничения. Вот пример:

@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;
}

Ответ 2

Я создал репозиторий GitHub для этого сообщения здесь: https://github.com/bilobatum/AnimatedTableHeaderDemo

Это решение реализует представление заголовка таблицы, т.е. self.tableView.tableHeaderView, вместо заголовков разделов для представления таблицы с одним разделом.

Просмотр заголовка таблицы и ее подпункты окрашены для целей тестирования. Для целей тестирования выбирается произвольная высота заголовка таблицы.

Заголовок таблицы лениво создается и создается на месте, когда представление таблицы переходит в режим редактирования. Анимация скрывает заголовок таблицы, когда представление таблицы выходит из режима редактирования.

В общем, вы не должны устанавливать фреймы при использовании автоматического макета. Однако заголовок таблицы является особым случаем в некотором смысле. Не используйте Auto Layout для размера или размещения заголовка таблицы. Вместо этого вы должны установить кадр заголовка таблицы (на самом деле вам нужно только установить высоту прямоугольника). В свою очередь, система переведет кадр заголовка таблицы в ограничения.

Однако, хорошо использовать Auto Layout в подзаголовках заголовка таблицы. Некоторые из этих ограничений устанавливаются в виде заголовка таблицы.

@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

Ответ 3

Достаточно то время, когда вы задали вопрос, но, может быть, ответ вам полезен (или другим).

Autolayout (автоматически) добавляет ограничение для ширины заголовка всего раздела (последний в списке ограничений ограничений отладки). Это, конечно, не должно быть проблемой, так как ширина учитывается при расчете кадров подзонов. Но иногда, по-видимому, возникают ошибки округления при расчете кадров...

Просто добавьте более низкий приоритет к одному из значений ширины подпункта, чтобы решить проблему:

... @ "| - [deleteAllButton ([email protected])] - [currSizeText] - |"

Если ширина кнопки не постоянна, используйте... deleteAllButton ( >= 30 @999)...

Ответ 4

Обходной путь, который я пытался использовать, - пропустить заголовок раздела и перейти непосредственно к tableHeaderView. Я заменил свойство editing следующим образом:

- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
    [super setEditing:editing animated:animated];
    if (editing)
        self.tableView.tableHeaderView = [self headerView];
    else
        self.tableView.tableHeaderView = nil;
}

Он не анимируется так хорошо, как заголовок раздела, но теперь это будет делать.

Это действительно не касается реальной проблемы (следовательно, "обходной путь" ), поэтому я не буду принимать это как решение.