添加约束混乱视图 [英] Adding Constraint messed up view

问题描述

我有一个带有 UICollectionView 和一个 UISegmentedControl 的视图。

I have a view with a UICollectionView and a UISegmentedControl.

我想更改约束，以使段控制器不会重叠集合视图，如下图所示：

I want to change constraints so the segment controller won't overlap collection view, like in this picture:

这是我的代码：

override func viewDidLoad()
    {
        super.viewDidLoad()

        self.navigationItem.leftBarButtonItem = nil
        self.tabBarController?.tabBar.isHidden = true


        self.SegmentController.setTitle(SegmentAtext, forSegmentAt: 0)
        self.SegmentController.setTitle(SegmentBtext, forSegmentAt: 1)


        self.view.bringSubview(toFront: SegmentController)

        self.LoadProducts(productsToShow: SegmentAtype)
    }

所以我添加了以下命令：

SO I add this command:

self.ProductsCollection.topAnchor.constraint(equalTo: SegmentController.bottomAnchor, constant: 10).isActive = true

但是结果更糟：

现在，段控制器几乎完全隐藏了！

Now the segment controller is almost completely hidden!

我该如何解决？

编辑：

我的viewDidLayoutSubviews函数：

My viewDidLayoutSubviews function:

override func viewDidLayoutSubviews()
    {
        ProductsCollection.translatesAutoresizingMaskIntoConstraints = false
        let topConstraint = NSLayoutConstraint(item: ProductsCollection, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 20)
        let bottomConstraint = NSLayoutConstraint(item: ProductsCollection, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -50) //leaving space for search field
        let leadingConstraint = NSLayoutConstraint(item: ProductsCollection, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: 0)
        let trailingConstraint = NSLayoutConstraint(item: ProductsCollection, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: 0)

        self.view.addConstraints([topConstraint, bottomConstraint, leadingConstraint, trailingConstraint])
    }

注意：

我的 viewDidLayoutSubviews 在超级视图中实现，该超级视图不包含 UISegmentedControl 。 UISegmentedControl 包含在继承视图中。

my viewDidLayoutSubviews is implemented in the super view, which does not contain a UISegmentedControl. the UISegmentedControl is contained in an inheriting view.

编辑：更新后的视图

推荐答案

如果您需要 UISegmentedControl 放在屏幕中央，在屏幕下方可以看到收藏夹视图

If you would want the UISegmentedControl to be centred on the screen and below it to have your collection view you would do

NSLayoutConstraint.activate([
    segmentedControl.topAnchor.constraint(equalTo: view.topAnchor),
    segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    collectionView.topAnchor.constraint(equalTo: segmentedControl.bottomAnchor),
    collectionView.leftAnchor.constraint(equalTo: view.leftAnchor),
    collectionView.rightAnchor.constraint(equalTo: view.rightAnchor),
    collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

因此，我们将控件划分为视图的顶部，并将其居中，即
然后集合视图的顶部是分段控件的底部（您可以根据需要添加用于填充的常量），并在视图的左，右和底部

So we have segmented controls top be top of the view, and center it, then top of collection view is bottom of segmented control (you can add a constant for padding if needed) and left right and bottom to the view

这篇关于添加约束混乱视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！