iOS - 将视图锚定到屏幕顶部，在状态栏后面答案

【问题标题】：iOS - anchor view to the top of the screen, behind status bariOS - 将视图锚定到屏幕顶部，在状态栏后面
【发布时间】：2017-05-23 14:06:38
【问题描述】：

我有一个带有默认状态栏的 CollectionViewController，它全部嵌入在 NavigationController 中。

我正在尝试重现一种效果，其中我有一个视图锚定到屏幕顶部，因为我的 navController 是完全透明的，我的状态栏也是透明的，但是当我将视图锚定到 @987654325 时不知何故@ 它一直被裁剪到 NavigationController bottomAnchor，因为它“认为”屏幕的顶部是 navController 的底部。

在将视图锚定到顶部后，我设法绕过了这个，我给了它一个负的 topPadding，现在它就是我想要的位置。

我知道有一种方法可以将布局扩展到顶部屏幕，但我想不通。

你能给我一个提示吗？

我正在尝试这个：

我明白了：

空白为状态栏高度+NavigationController高度

谢谢

【问题讨论】：

您是否在 Interface Builder / Storyboard 中添加约束？还是通过代码？
我不使用故事板，一切都是手工编码的
由于 CollectionView 嵌入在 NavController 中，并且我将 NavController 和状态栏设置为透明，我想知道是否可以将 collectionView 的开始位置设置在屏幕正上方

标签： ios swift3 uinavigationcontroller nslayoutconstraint nslayoutanchor

【解决方案1】：

嗯，这会将我的UIImageView 固定在屏幕顶部...在导航栏和状态栏下方。与集合视图应该没有什么不同：

NSLayoutConstraint *top = [NSLayoutConstraint
                           constraintWithItem:imageView
                           attribute:NSLayoutAttributeTop
                           relatedBy:NSLayoutRelationEqual
                           toItem:self.view
                           attribute:NSLayoutAttributeTop
                           multiplier:1
                           constant:0];

编辑：对不起，在一个 Obj-C 项目中工作......这里是 Swift：

    let img = UIImage(named: "Man")
    let imageView = UIImageView(image: img)
    imageView.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(imageView)

    imageView.widthAnchor.constraint(equalToConstant: 200.0).isActive = true
    imageView.heightAnchor.constraint(equalToConstant: 200.0).isActive = true

    imageView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true

    imageView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

而且...这里也有一个集合视图（用普通的屏幕帽很难分辨）：

    self.view.backgroundColor = .white

    let img = UIImage(named: "Man")
    let imageView = UIImageView(image: img)
    imageView.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(imageView)

    imageView.widthAnchor.constraint(equalToConstant: 200.0).isActive = true
    imageView.heightAnchor.constraint(equalToConstant: 200.0).isActive = true

    imageView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true

    imageView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

    let layout = UICollectionViewFlowLayout()
    let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
    cv.backgroundColor = .clear

    cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "defaultCell")
    cv.dataSource = self

    cv.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(cv)

    cv.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.9).isActive = true
    cv.heightAnchor.constraint(equalToConstant: 300.0).isActive = true

    cv.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true

    cv.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

【讨论】：

我只是将它转换为 Swift。让我试一试:)

【解决方案2】：

如果您不希望 ViewControllers 内容视图在顶部/底部栏下扩展，您可以使用 Interface Builder 中的 Extend Edges Under Top Bars/Under Bottom Bars 设置。

试试这个

目标 C：

self.edgesForExtendedLayout = UIRectEdgeNone;

Swift3：

self.edgesForExtendedLayout = []

希望这对你有帮助:)

【讨论】：

hmm.. 即使我不知道这是可能的，感谢您的提示。但这不是我想要达到的目标。我正在尝试的结果类似于集合视图的滚动视图从屏幕顶部开始，而不是从导航控制器的底部开始

【解决方案3】：

class DetailsPage : UIViewController {

    let topView:UIView = UIView()
    let topSliderImage:UIImageView = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setUI()
    }

    override func viewWillAppear(_ animated: Bool) { 
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationController?.navigationBar.shadowImage = UIImage() 
    }

    func setUI(){

        self.view.addSubview(topSliderImage)
        topSliderImage.image = UIImage(named: "img-1")
        topSliderImage.contentMode = .scaleAspectFit
        topSliderImage.translatesAutoresizingMaskIntoConstraints = false
        topSliderImage.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
        topSliderImage.heightAnchor.constraint(equalToConstant: 300).isActive = true
        topSliderImage.widthAnchor.constraint(equalToConstant: view.frame.width).isActive = true
    }
}

【讨论】：