Auto-dimensionnement des en-têtes UICollectionView

Question

J'essaie de créer un écran de détail pour une liste de choses à faire. Voici ce que l'écran de détail ressemble actuellement:

C'est un UICollectionViewController, avec un en-tête. L'en-tête contient 2 objets UILabel et un objet UITextView. La disposition de ces objets est gérée par un UIStackView vertical. Un UIView est utilisé pour définir un arrière-plan blanc.

J'ai quelques difficultés à définir la hauteur de ce UICollectionReusableView lors de l'exécution. Tout conseil est apprécié.

Answer 1

Voici comment vous pouvez gérer UICollectionViewReusableView personnalisé avec mise en page automatique sans le fichier XIB.

1. Implémentez la méthode de délégation referenceSizeForHeaderInSection.
2. Dans celui-ci, instanciez la vue que vous utilisez comme vue d'en-tête.
3. Définissez sa visibilité sur caché, pour éviter les clignotements.
4. Ajoutez la vue à la vue d'ensemble de la vue de collection.
5. Définissez sa mise en forme à l'aide de la mise en page automatique, pour correspondre au résultat visuel attendu de l'en-tête.
6. Invoke setNeedsLayout et layoutIfNeeded
7. Retirez la vue du superview

ATTENTION: Je ne suis pas un grand fan de cette solution, car il ajoute la vue personnalisée à la superview du CollectionView chaque fois, pour effectuer des calculs . Je n'ai pas remarqué de problèmes de performances. ATTENTION # 2: Je traiterais cela comme une solution temporaire et migrerais vers des vues supplémentaires de dimensionnement une fois publiées. J'utilise PureLayout pour l'autolayout.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 

    let header = CustomHeaderView() 

     header.isHidden = true; 
     self.view.addSubview(header) 
     header.autoPinEdge(toSuperviewEdge: .leading) 
     header.autoPinEdge(toSuperviewEdge: .trailing) 
     header.autoPin(toTopLayoutGuideOf: self, withInset: 0) 
     header.setupHeader(withData: self.data) 
     header.setNeedsLayout() 
     header.layoutIfNeeded() 
     header.removeFromSuperview() 

     return header.frame.size 
} 

Answer 2

Ceci est un peu un hack, mais semble fonctionner.

// showhere to keep a reference 
UICollectionReusableView * _cachedHeaderView; 


- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ 

    if(!_cachedHeaderView){ 
     // dequeue the cell from storyboard 
     _cachedHeaderView = [collectionView dequeueReusableCellWithReuseIdentifier:[NSString stringWithFormat:@"header_cell"] forIndexPath:indexPath]; 

     // set captions/images on the header etc... 

     // tell the collectionview to redraw this section 
     [self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section]]; 
    } 

    return _cachedHeaderView; 
} 


- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{ 

    // once there is a reference ot the view, use it to figure out the height 
    if(_cachedHeaderView){ 
     return [_cachedHeaderView systemLayoutSizeFittingSize:collectionView.bounds.size withHorizontalFittingPriority:UILayoutPriorityRequired verticalFittingPriority:UILayoutPriorityDefaultLow]; 

    } 

    // a placeholder value just to get the dequeueReusableCellWithReuseIdentifier to work 
    return CGSizeMake(collectionView.bounds.size.width, 100); 
}