使用带有滚动视图的 Xib - Swift

Question

我尝试将Xib 文件与UIScrollView 一起使用。我设置了约束（顶部、底部、前导、尾随。宽度和高度相等（priority 250））。

我添加了xibs 以查看UIScrollView 的内部。并使用greaterThanOrEqualTo 设置最后一个元素底部锚点。

但滚动视图不滚动。问题出在哪里？

提前致谢。

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var scrollViewSubView: UIView!

var campaignCollectionView:UICollectionView!
var pageControl:UIPageControl!
var winGiftVoucherCode:WinGiftVoucherView!
var lastCallDiscountView : LastCallDiscountView!

var lastCallDiscountView2 : LastCallDiscountView!
var lastCallDiscountView3 : LastCallDiscountView!

override func viewDidLoad() {
    super.viewDidLoad()

    setupNavigationBarItems()
    setCollectionView()
    setPageControl()
    winGiftVoucherCodeFunc()
    lastCallDiscountFunc()

    lastCallDiscountFunc2()
    lastCallDiscountFunc3()

}



func setCollectionView(){

    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let cCV = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
    campaignCollectionView = cCV
    campaignCollectionView.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(campaignCollectionView)

    campaignCollectionView.dataSource = self
    campaignCollectionView.delegate = self
    campaignCollectionView.backgroundColor = .white
    campaignCollectionView.isPagingEnabled = true
    campaignCollectionView.isScrollEnabled = true
    campaignCollectionView.showsHorizontalScrollIndicator = false

    if #available(iOS 11.0, *) {
        campaignCollectionView.topAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
    } else {
        campaignCollectionView.topAnchor.constraint(equalTo: self.scrollViewSubView.topAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        campaignCollectionView.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
    } else {
        campaignCollectionView.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        campaignCollectionView.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        campaignCollectionView.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        campaignCollectionView.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        campaignCollectionView.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

    campaignCollectionView.register(UINib(nibName: "CampaignCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CampaignCollectionViewCell")

}


func setPageControl(){
    let pC = UIPageControl()
    pageControl = pC
    pageControl.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(pageControl)

    if #available(iOS 11.0, *) {
        pageControl.topAnchor.constraint(equalTo: campaignCollectionView.bottomAnchor , constant: 10).isActive = true
    } else {
        pageControl.topAnchor.constraint(equalTo: campaignCollectionView.bottomAnchor , constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        pageControl.heightAnchor.constraint(equalToConstant: 10).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
    } else {
        pageControl.heightAnchor.constraint(equalToConstant: 10).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        pageControl.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        pageControl.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        pageControl.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        pageControl.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

    //pageControl.backgroundColor = .black
    //pageControl.tintColor = .white
    pageControl.pageIndicatorTintColor = .lightGray
    pageControl.currentPageIndicatorTintColor = .black

    pageControl.numberOfPages = 3
    pageControl.currentPage = 0
    //pageControl.hidesForSinglePage = true
}

func winGiftVoucherCodeFunc(){

    let wGVC : WinGiftVoucherView = UIView.fromNib()
    winGiftVoucherCode = wGVC
    winGiftVoucherCode.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(winGiftVoucherCode)

    if #available(iOS 11.0, *) {
        winGiftVoucherCode.topAnchor.constraint(equalTo: pageControl.bottomAnchor , constant: 10).isActive = true
    } else {
        winGiftVoucherCode.topAnchor.constraint(equalTo: pageControl.bottomAnchor , constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        winGiftVoucherCode.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
    } else {
        winGiftVoucherCode.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        winGiftVoucherCode.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        winGiftVoucherCode.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        winGiftVoucherCode.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        winGiftVoucherCode.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

    let rate : CGFloat = 0.85

    let mainRect = winGiftVoucherCode.frame
    let rec = winGiftVoucherCode.progressX.frame
    let aa = ProgressView(frame: CGRect(x: 0, y: 0, width: ( mainRect.size.width - 100 ) * rate , height: rec.size.height) )
    aa.backgroundColor = UIColor.black
    self.winGiftVoucherCode.progressX.addSubview(aa)

    winGiftVoucherCode.voucherRemainderViewLeftConstraint.constant = ( winGiftVoucherCode.frame.width - 100 ) * rate - 20


}

func lastCallDiscountFunc(){

    let lCDV : LastCallDiscountView = UIView.fromNib()
    lastCallDiscountView = lCDV
    lastCallDiscountView.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(lastCallDiscountView)

    if #available(iOS 11.0, *) {
        lastCallDiscountView.topAnchor.constraint(equalTo: winGiftVoucherCode.bottomAnchor , constant: 10).isActive = true
    } else {
        lastCallDiscountView.topAnchor.constraint(equalTo: winGiftVoucherCode.bottomAnchor , constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
    } else {
        lastCallDiscountView.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        lastCallDiscountView.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        lastCallDiscountView.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

}

func lastCallDiscountFunc2(){

    let lCDV : LastCallDiscountView = UIView.fromNib()
    lastCallDiscountView2 = lCDV
    lastCallDiscountView2.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(lastCallDiscountView2)

    if #available(iOS 11.0, *) {
        lastCallDiscountView2.topAnchor.constraint(equalTo: lastCallDiscountView.bottomAnchor , constant: 10).isActive = true
    } else {
        lastCallDiscountView2.topAnchor.constraint(equalTo: lastCallDiscountView.bottomAnchor , constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView2.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
    } else {
        lastCallDiscountView2.heightAnchor.constraint(equalToConstant: 150).isActive = true
        // campaignCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView2.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        lastCallDiscountView2.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView2.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        lastCallDiscountView2.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

}

func lastCallDiscountFunc3(){

    let lCDV : LastCallDiscountView = UIView.fromNib()
    lastCallDiscountView3 = lCDV
    lastCallDiscountView3.translatesAutoresizingMaskIntoConstraints = false
    self.scrollViewSubView.addSubview(lastCallDiscountView3)

    if #available(iOS 11.0, *) {
        lastCallDiscountView3.topAnchor.constraint(equalTo: lastCallDiscountView2.bottomAnchor , constant: 10).isActive = true
    } else {
        lastCallDiscountView3.topAnchor.constraint(equalTo: lastCallDiscountView2.bottomAnchor , constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView3.heightAnchor.constraint(equalToConstant: 150).isActive = true
    } else {
        lastCallDiscountView3.heightAnchor.constraint(equalToConstant: 150).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView3.leadingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    } else {
        lastCallDiscountView3.leadingAnchor.constraint(equalTo: self.scrollViewSubView.leadingAnchor, constant: 10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView3.trailingAnchor.constraint(equalTo: scrollViewSubView.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    } else {
        lastCallDiscountView3.trailingAnchor.constraint(equalTo: self.scrollViewSubView.trailingAnchor, constant: -10).isActive = true
    }

    if #available(iOS 11.0, *) {
        lastCallDiscountView3.bottomAnchor.constraint(greaterThanOrEqualTo: self.scrollViewSubView.safeAreaLayoutGuide.bottomAnchor, constant: 10).isActive = true
    } else {
        lastCallDiscountView3.bottomAnchor.constraint(greaterThanOrEqualTo: self.scrollViewSubView.bottomAnchor, constant: 10).isActive = true
    }

}

Answer 1

首先，我强烈敦促您在 XIB/故事板中设置所有 UI。比以编程方式添加视图要容易得多。

如果滚动视图不滚动，则可能意味着它的contentSize 小于它的frame。这也可能意味着您阻止了对它的触摸，这可能是由您的UICollectionView 引起的。在可滚动视图中嵌入可滚动视图会让人头疼。

如果您想使用自动布局正确设置滚动视图，我建议您关注this article。核心原则是：

1. 将滚动视图添加到 VC 的视图并设置其约束以匹配安全区域的边缘（前导/尾随/顶部/底部）。
2. 添加一个内容视图 (UIView)，其约束与滚动视图的边缘相匹配。
3. 设置内容视图的width以匹配safeArea的width（假设你想要垂直滚动，否则匹配heights）。
4. 将所有视图添加到内容视图，并确保它们的约束为其提供固定高度（再次假设您要进行垂直滚动）。这意味着至少有 1 个视图对 内容视图 的顶部有约束，至少有 1 个在其底部有约束，其间有设定的高度和垂直空间。

学习如何正确执行此操作需要一段时间，因此请耐心等待。