tableView嵌套collectionView

iOS高级控件

字数统计: 836阅读时长: 4 min

 2022/03/31   Share

tableView 嵌套 collectionView

应用场景：评论界面。

使用UICollectionView 布局一个可复选, 自适应宽度的标签选择控件。

步骤：

选用 UICollectionView AutoLayout布局。
外部主控制器传入数据, 刷新, 并加载初始化状态
主控制器刷新layout

UICollectionViewFlowLayout

布局方式, 根据系统返回的[UICollectionViewLayoutAttributes]去动态的计算排列方式 .

import UIKit

class DYOptionTagFlowLayout: UICollectionViewFlowLayout {
		// item space 间距从外部传入或者写死. 用来计算是否换行时使用. 
    private let listItemSpace: CGFloat = 8
    
    override init() {
        super.init()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func prepare() {
        super.prepare()
    }

    // MARK: - Define area to show and item count
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        
        let superElementAttributes = super.layoutAttributesForElements(in: rect)
        
        let array = NSArray(array: superElementAttributes!, copyItems: true)
        
        let attributesToReturn = array as! [UICollectionViewLayoutAttributes]
        
        for attributes in attributesToReturn {
            if nil == attributes.representedElementKind {
                let indexPath = attributes.indexPath
                attributes.frame = self.layoutAttributesForItem(at: indexPath)?.frame ?? .zero
            }
        }
        return attributesToReturn
    }
    
    // MARK: - Define cell layout
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        
        // System calculated attributes
        let currentItemAttributes = super.layoutAttributesForItem(at: indexPath)?.copy() as! UICollectionViewLayoutAttributes
        
        // Set inset
        let currentSystemFlowlayout = self.collectionView!.collectionViewLayout as! UICollectionViewFlowLayout
        let sectionInset = currentSystemFlowlayout.sectionInset
        
        // first item
        if indexPath.item == 0 {
            var frame = currentItemAttributes.frame
            frame.origin.x = sectionInset.left
            currentItemAttributes.frame = frame
            return currentItemAttributes
        }
        
        // Not first item, then need to get one before attributes' frame
        let previousIndexPath = NSIndexPath(item: indexPath.item - 1, section: indexPath.section)
        
        let previousFrame = self.layoutAttributesForItem(at: previousIndexPath as IndexPath)?.frame
        
        // Previous and current item frame adjacent points
        let previousFrameRightPoint = previousFrame!.origin.x + previousFrame!.size.width + self.listItemSpace

        // Current frame
        let currentFrame = currentItemAttributes.frame
        
        let strecthedCurrentFrame = CGRect(x: 0, y: currentFrame.origin.y, width: self.collectionView!.frame.size.width, height: currentFrame.size.height)
        
        // Two frame has same area.
        let intersect = previousFrame!.intersects(strecthedCurrentFrame)
      
        if !intersect {
            // Same line
            var frame = currentItemAttributes.frame
            frame.origin.x = sectionInset.left
            currentItemAttributes.frame = frame
            return currentItemAttributes
        }
        
        // Other line first item
        var frame = currentItemAttributes.frame
        frame.origin.x = previousFrameRightPoint
        currentItemAttributes.frame = frame
        return currentItemAttributes
    }
}

// 以上代码, 粘贴复制即可使用.

注意📢

1 2	let array = NSArray(array: superElementAttributes!, copyItems: true) let attributesToReturn = array as! [UICollectionViewLayoutAttributes]

上面两行代码一定要按照这个格式写, 不然会提示报错, 导致布局失败.

效果图

UICollectionView

下面是对collectionView 做一些处理, 让内部 content 自动撑开, 使用 Autolayout 布局.

open class DYCollectionView: UICollectionView {
    
    public override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
        self.translatesAutoresizingMaskIntoConstraints = false
        let minimumHeight = heightAnchor.constraint(greaterThanOrEqualToConstant: 1)
        minimumHeight.priority = .required
        minimumHeight.isActive = true
        
        setContentHuggingPriority(.required, for: .vertical)
        
    }
    
    public required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    public override var intrinsicContentSize: CGSize {
      return contentSize
    }

    public override var contentSize: CGSize {
      didSet {
        invalidateIntrinsicContentSize()
        setNeedsLayout()
        layoutIfNeeded()
      }
    }
}

// 粘贴复制即可使用

📢注意! 一定要是collectionView设置为内部能自动撑开改变高度, 这样刷新cell的时候就不会有问题 .

外部控制器是一个`tableview` , 自定义`cell`如下, 将`collectionView` 嵌套进去.

    public override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.selectionStyle = .none
        
        contentView.addSubview(baseStack) // base stack里面放着collectionView.
 
        NSLayoutConstraint.activate([
            baseStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            baseStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            baseStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 24),
            baseStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(didSelectPlaceHolder))
        placeholderLabel.addGestureRecognizer(tapGesture)
        
    }

// 外部注册这个cell , 然后设置在cellForItem里面进行赋值, 初始化collectionView的数据即可.

当数据改变, 或者需要动态刷新cell高度的时候, 执行一个回调, 在控制器cellForItem中主线程刷新.

cell.editCallBack = {[weak self] in
    guard let self = self else { return }
    self.viewModel.comment = cell.textView.text.isEmpty ? nil : cell.textView.text
  
    UIView.performWithoutAnimation {
        self.tableView.beginUpdates()
        self.tableView.endUpdates()
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: false)
    }
}