iOS - anchor view to the top of the screen, behind status bar

Question

I've a CollectionViewController with the default status bar and all it's embedded in a NavigationController.

I'm trying to reproduce an effect in which I have a View anchored to the top of the screen, since my navController is fully transparent and my status bar is also transparent, but somehow when I anchor my view to the topAnchor it stays clipped to the NavigationController bottomAnchor, because it 'thinks' the top of the screen is the navController's bottom.

I managed to bypass this simply after anchoring the view to the top, I gave it a negative topPadding and it now is where I desired it to be.

I know there's a way to extend the layout to the top screen but I can't figure it out.

Can you give me an hint?

I'm trying this:

I'm getting this:

The white space is the status bar height + NavigationController height

Thanks

Are you adding constraints in Interface Builder / Storyboard? Or via code? — DonMag, May 23 '17 at 15:03
Since the CollectionView is embedded in the NavController and I set the NavController and the status bar to be transparent I wondered if I could set the start position maybe of the collectionView to be right on top of the screen — Ivan Cantarino, May 23 '17 at 15:06

score 1 · Answer 1 · answered May 23 '17 at 14:28

1

If you don't want a ViewControllers contents view to extend under the top/bottom bars, you can use the Extend Edges Under Top Bars/Under Bottom Bars settings in Interface Builder.

Try using this

ObjectiveC:

self.edgesForExtendedLayout = UIRectEdgeNone;

Swift3:

self.edgesForExtendedLayout = []

Hope this may help you :)

answered May 23 '17 at 14:28

iOS_MIB

1,885
13
24

hmm.. even though I didn't knew this was possible , thanks for the tip. But this is not what I'm trying to achieve. The result that I'm trying is something like the scrollview of the collection view starts on the top of the screen and not to start at the bottom of the navigation controller – Ivan Cantarino May 23 '17 at 14:34

DonMag · Accepted Answer · 2017-05-23T15:37:56.677

Well, this pins my UIImageView to the Top of the screen... underneath the nav and status bars. Shouldn't be any different with a collection view:

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

Edit: Sorry, was working in an Obj-C project... here it is in 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

and... here it is with a collection view also (kinda hard to tell with a plain screen-cap):

    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

I was just converting it to Swift. Let me give a try :) – Ivan Cantarino May 23 '17 at 15:24 — Ivan Cantarino, May 23 '17 at 15:24

score -1 · Answer 3 · edited Apr 18 '19 at 06:53

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
    }
}

iOS - anchor view to the top of the screen, behind status bar

3 Answers3