Swift - UIScrollView 内的 UICollectionView - 自动布局

Posted 2023-02-15

【中文标题】Swift - UIScrollView 内的 UICollectionView - 自动布局

【英文标题】：Swift - UICollectionView inside UIScrollView - Auto Layout

【发布时间】：2021-11-26 03:38:18

【问题描述】：

我有一个滚动视图，其中有一个 containerView，我在上面放置了多个 UI 组件，例如标签、按钮等。

        /* START SCROLL VIEW */
        scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(scrollView)
        
        scrollView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: frame.width * (22 / IPHONE8_SCREEN_WIDTH)).isActive = true
        scrollView.widthAnchor.constraint(equalToConstant: frame.width * (331 / IPHONE8_SCREEN_WIDTH)).isActive = true
        scrollView.topAnchor.constraint(equalTo:self.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        /* END SCROLL VIEW */

        /* START CONTAINER VIEW */
        containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(containerView)
        
        containerView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor).isActive = true
        containerView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor).isActive = true
        containerView.topAnchor.constraint(equalTo: self.scrollView.topAnchor).isActive = true
        containerView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive = true
        containerView.heightAnchor.constraint(equalTo: self.heightAnchor).priority = .defaultLow
        containerView.widthAnchor.constraint(equalTo: self.widthAnchor).priority = .defaultLow
        containerView.layer.borderColor = UIColor.black.cgColor
        containerView.layer.borderWidth = 2
        /* END CONTAINER VIEW */

        ...
        /* START INVITED USERS COLLECTION VIEW */
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        inviteUsersCollectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        
        inviteUsersCollectionView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(inviteUsersCollectionView)

        inviteUsersCollectionView.delegate = self
        inviteUsersCollectionView.dataSource = self
        inviteUsersCollectionView.register(InviteUsersCollectionViewCell.self, forCellWithReuseIdentifier: InviteUsersCollectionViewCell.reuseIdentifier)
        inviteUsersCollectionView.backgroundColor = UIColor.red
        inviteUsersCollectionView.layer.borderWidth = 2
        inviteUsersCollectionView.layer.borderColor = UIColor.red.cgColor
        
        inviteUsersCollectionView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: frame.width * (34 / IPHONE8_SCREEN_WIDTH)).isActive = true
        inviteUsersCollectionView.widthAnchor.constraint(equalToConstant: frame.width * (309 / IPHONE8_SCREEN_WIDTH)).isActive = true
        inviteUsersCollectionView.topAnchor.constraint(equalTo: inviteUsersLabel.bottomAnchor, constant: frame.height * (27 / IPHONE8_SCREEN_HEIGHT)).isActive = true
        inviteUsersCollectionView.bottomAnchor.constraint(equalTo:containerView.bottomAnchor, constant: -95).isActive = true
        /* END INVITED USERS COLLECTION VIEW */

containerView 中的最后一个子视图是 UICollectionView。我可以看到底部有一个空白区域，但是没有显示 inviteUsersCollectionView。

我需要改变什么？

【问题讨论】：

什么叫“inviteUsersLabel”？它与收藏家和其他人是什么关系？

什么是“IPHONE8_SCREEN_WIDTH”，它的用途是什么？你的应用程序只有 iPhone 8 吗？

嗨@ElTomato。基本上我的 containerView 包含多个垂直放置的 UI 组件，以便我可以向下/向上滚动。每个下一个 UI 组件都使用上一个中的约束。这就是为什么我的inviteUsersCollectionView 使用inviteUsersLabel 的底部约束的原因。只是说，除了使inviteUsersCollectionView 可见之外，一切都运行良好。任何其他 UI 组件都放置在它应该在的位置。我可以根据需要向下/向上滚动。在滚动视图的底部，我可以看到我定义的 95 空间，但看不到集合视图

【参考方案1】：

想办法。关于我的收藏视图的约束，缺少一行

  inviteUsersCollectionView.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor).isActive = true
    inviteUsersCollectionView.widthAnchor.constraint(equalToConstant: frame.width * (309 / IPHONE8_SCREEN_WIDTH)).isActive = true
    inviteUsersCollectionView.topAnchor.constraint(equalTo: inviteUsersLabel.bottomAnchor, constant: frame.height * (27 / IPHONE8_SCREEN_HEIGHT)).isActive = true
    inviteUsersCollectionView.heightAnchor.constraint(equalToConstant: 95).isActive = true // was missing
    inviteUsersCollectionView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -5).isActive = true

heightAnchor 未设置。

inviteUsersCollectionView.heightAnchor.constraint(equalToConstant: 95).isActive = true