ios - CollectionViewCell 中的约束动画问题

Question

不幸的是，我继续遇到约束问题......我绝对是我的问题，但我真的无法理解它们......

我创建了一个带有自定义单元格的 UICollectionView。

在单元格内，我插入了一个带有所有约束的 UIView。

Uiview 高度约束默认设置为零，并根据 collectionView 从 NSMutableArray 收集的数据进行更改

在 cellForItemAtIndexPath 方法中增加或减少自定义单元格中的 uiview 高度...

一切正常，数据收集到完美，但我不明白为什么每次滚动 collectionView 时 uiview 高度动画都会继续。

我希望在显示 collectionView 时动画 View 的高度，而不是在我向后或向前滚动时...我创建了一个视频来向您展示

https://streamable.com/d32fy

我不明白我错在哪里，是因为一些我无法理解约束及其动画的问题而陷入困境的日子......

这是我正在使用的代码

主视图 Controller

-(void)setupCollectionView {

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.minimumLineSpacing = 2;
    flowLayout.minimumInteritemSpacing = 0;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    _chartCollection = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
    [_chartCollection registerClass:[KPHomeChartCell class] forCellWithReuseIdentifier:kChartCellIdentifier];
    _chartCollection.backgroundColor = [UIColor clearColor];
    _chartCollection.delegate = self;
    _chartCollection.dataSource = self;
    _chartCollection.pagingEnabled = YES;
    _chartCollection.showsHorizontalScrollIndicator = NO;
    _chartCollection.translatesAutoresizingMaskIntoConstraints = NO;
    [self addSubview:_chartCollection];

    self.topChartCollectionAnchor = [self.chartCollection.topAnchor constraintEqualToAnchor:self.customSwitch.bottomAnchor constant:20];
    self.topChartCollectionAnchor.active = YES;
    [self.chartCollection.leftAnchor constraintEqualToAnchor:self.leftAnchor constant:30].active = YES;
    [self.chartCollection.rightAnchor constraintEqualToAnchor:self.rightAnchor].active = YES;
    [self.chartCollection.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-35].active = YES;

    [self buildYAxis];
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    KPHomeChartCell *chartCell = [collectionView dequeueReusableCellWithReuseIdentifier:kChartCellIdentifier forIndexPath:indexPath];

    NSInteger n = [[self returnXAxis][indexPath.item] integerValue];
    UILabel *yLabelValue = (UILabel *)[self viewWithTag:n];

    chartCell.leftBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y;

    chartCell.rightBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y +30;

    return chartCell;
}

自定义 CollectionViewCell

-(void)animateHeightOfBarWithConstant {
  // Crea la linea a tratti per ogni barra
    CAShapeLayer *dashedLine = [CAShapeLayer layer];
    CGMutablePathRef thePath = CGPathCreateMutable();
    CGPathMoveToPoint(thePath, nil, 0, 0);
    CGPathAddLineToPoint(thePath, nil, 0, self.contentView.frame.size.height);

    dashedLine.path = thePath;
    CGPathRelease(thePath);
    dashedLine.lineDashPattern = @[@4];
    dashedLine.strokeColor =  [UIColor colorWithHexString:@"#FFFFFF" setAlpha:.1].CGColor;
    [self.contentView.layer addSublayer:dashedLine];


    // BUILD BAR UIVIEW
    _bar = [[UIView alloc] init];
    _bar.layer.cornerRadius = 4;
    _bar.translatesAutoresizingMaskIntoConstraints = NO;
    CGFloat barWidth = 15;
    [self.contentView addSubview:_bar];

    dispatch_async(dispatch_get_main_queue(), ^{
                dashedLine.frame = CGRectMake(_bar.center.x, 0, self.contentView.frame.size.width , 15);
            });


    [self.bar.bottomAnchor constraintEqualToAnchor:self.contentView.bottomAnchor].active = YES;
    [self.bar.widthAnchor constraintEqualToConstant:barWidth].active = YES;
    [self.bar.centerXAnchor constraintEqualToAnchor:self.contentView.centerXAnchor constant:-13.5].active = YES;

     self.leftBarHeightConstraint = [self.bar.heightAnchor constraintEqualToConstant:0];
     self.leftBarHeightConstraint.active = YES;

     [UIView animateWithDuration:.9 animations:^{
         [self.contentView layoutIfNeeded];
    }];
}

Answer 1

你可以试试这段代码

主视图 Controller

@interface MainViewController () <UITableViewDelegate>

@property (nonatomic, assign) NSUInteger lastCellDisplayedIndex;

@end

@implementation MainViewController

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
  _lastCellDisplayedIndex = indexPath.row;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
  KPHomeChartCell *chartCell = [collectionView dequeueReusableCellWithReuseIdentifier:kChartCellIdentifier forIndexPath:indexPath];

  NSInteger n = [[self returnXAxis][indexPath.item] integerValue];
  UILabel *yLabelValue = (UILabel *)[self viewWithTag:n];

  chartCell.leftBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y;

  chartCell.rightBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y +30;

  if (_lastCellDisplayedIndex >= indexPath) {
    [chartCell updateHeightOfBarAnimated:NO];
  } else {
    [chartCell updateHeightOfBarAnimated:YES];
  }

  return chartCell;
}

@end

自定义 CollectionViewCell

-(void)updateHeightOfBarAnimated:(BOOL)animated {
  // Crea la linea a tratti per ogni barra
  CAShapeLayer *dashedLine = [CAShapeLayer layer];
  CGMutablePathRef thePath = CGPathCreateMutable();
  CGPathMoveToPoint(thePath, nil, 0, 0);
  CGPathAddLineToPoint(thePath, nil, 0, self.contentView.frame.size.height);

  dashedLine.path = thePath;
  CGPathRelease(thePath);
  dashedLine.lineDashPattern = @[@4];
  dashedLine.strokeColor =  [UIColor colorWithHexString:@"#FFFFFF" setAlpha:.1].CGColor;
  [self.contentView.layer addSublayer:dashedLine];


  // BUILD BAR UIVIEW
  _bar = [[UIView alloc] init];
  _bar.layer.cornerRadius = 4;
  _bar.translatesAutoresizingMaskIntoConstraints = NO;
  CGFloat barWidth = 15;
  [self.contentView addSubview:_bar];

  dispatch_async(dispatch_get_main_queue(), ^{
    dashedLine.frame = CGRectMake(_bar.center.x, 0, self.contentView.frame.size.width , 15);
  });


  [self.bar.bottomAnchor constraintEqualToAnchor:self.contentView.bottomAnchor].active = YES;
  [self.bar.widthAnchor constraintEqualToConstant:barWidth].active = YES;
  [self.bar.centerXAnchor constraintEqualToAnchor:self.contentView.centerXAnchor constant:-13.5].active = YES;

  self.leftBarHeightConstraint = [self.bar.heightAnchor constraintEqualToConstant:0];
  self.leftBarHeightConstraint.active = YES;

  if (animated) {
    [UIView animateWithDuration:.9 animations:^{
      [self.contentView layoutIfNeeded];
    }];
  } else {
    [self.contentView layoutIfNeeded];
  }
}

- (void)prepareForReuse {
    if (_bar) {
      [_bar removeFromSuperview];
      _bar = nil;
    }
  }

使用 updateHeightOfBarAnimated仅在 cellForItemAtIndexPath