CollectionView中MDCChip选中图片导致标题位移问题求助

看起来你遇到的是MDCChip内部布局因selectedImageView显示/隐藏导致的标题位移问题，本质是布局系统没有预先为选中图片预留空间，导致显示时突然挤压标题的布局空间。下面给你几个可行的解决方案，按推荐程度排序：

1. 使用MDCChip官方布局配置（最推荐） #

Material Design Components的MDCChipView自带了布局配置类MDCChipLayout，可以直接指定选中图片的尺寸和它与标题的间距，这样布局系统会提前预留好空间，避免选中时的布局突变：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifierChips", for: indexPath) as! MDCChipCollectionViewCell 
    let chipView = cell.chipView 
    
    // 配置选中图片
    chipView.selectedImageView.image = UIImage(named: "tickIcon")
    
    // 设置自定义布局
    let chipLayout = MDCChipLayout()
    // 指定选中图片的固定尺寸
    chipLayout.selectedImageSize = CGSize(width: 20, height: 20)
    // 设置标题和选中图片之间的间距
    chipLayout.titleToSelectedImagePadding = 8
    chipView.layout = chipLayout
    
    return cell 
}

这种方式是官方设计的标准用法，能完美适配MDCChip的内部布局逻辑，不会出现奇怪的位移问题。

2. 为selectedImageView添加固定尺寸约束 #

如果不想自定义布局，也可以直接给selectedImageView添加固定宽高约束，让布局系统提前为它分配空间，即使图片隐藏时也会保留这个空间：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifierChips", for: indexPath) as! MDCChipCollectionViewCell 
    let chipView = cell.chipView 
    
    chipView.selectedImageView.image = UIImage(named: "tickIcon")
    
    // 关闭自动布局转换，添加固定尺寸约束
    chipView.selectedImageView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        chipView.selectedImageView.widthAnchor.constraint(equalToConstant: 20),
        chipView.selectedImageView.heightAnchor.constraint(equalToConstant: 20)
    ])
    
    // 可选：调整标题和图片的间距
    chipView.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
    
    return cell 
}

注意要确保在cell复用的时候，这些约束不会重复添加（如果cell是复用的，可以在prepareForReuse方法中重置或者判断约束是否已存在）。

3. 调整ChipView的内容边距 #

如果你之前尝试过UIEdgeInsets但没生效，可能是没有配合titleEdgeInsets一起调整。可以同时设置contentEdgeInsets（整个芯片的内边距）和titleEdgeInsets（标题相对于内容区域的边距），确保标题有足够的空间：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifierChips", for: indexPath) as! MDCChipCollectionViewCell 
    let chipView = cell.chipView 
    
    chipView.selectedImageView.image = UIImage(named: "tickIcon")
    
    // 设置芯片整体内边距，右边预留足够空间放选中图片
    chipView.contentEdgeInsets = UIEdgeInsets(top: 8, left: 12, bottom: 8, right: 32) // 右边预留20（图片）+8（间距）=28，留32更保险
    // 设置标题与左边内容边界的间距，以及与右边图片的间距
    chipView.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 16)
    
    return cell 
}

这种方式需要手动计算边距，不如前两种灵活，但如果只是简单场景也能解决问题。

额外注意：确保选中状态切换时布局稳定 #

在处理collectionView的选中/取消选中事件时，记得及时更新chip的状态并触发布局刷新，避免延迟导致的视觉跳动：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    guard let cell = collectionView.cellForItem(at: indexPath) as? MDCChipCollectionViewCell else { return }
    cell.chipView.isSelected = true
    cell.chipView.layoutIfNeeded()
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    guard let cell = collectionView.cellForItem(at: indexPath) as? MDCChipCollectionViewCell else { return }
    cell.chipView.isSelected = false
    cell.chipView.layoutIfNeeded()
}

你可以先试试第一种官方布局的方案，应该能直接解决你的问题。如果还有疑问，可以检查cell复用逻辑是否正确，确保每次复用chipView的布局配置都被正确设置。

内容的提问来源于stack exchange，提问作者IloneSP