iOS 10 iMessage app extension: how do i calculate the height of the extra tall navbar

Question

I downloaded the Xcode 8 beta and was trying to play around with the iMessages app extension sdk but ran into an issue with their seemingly nonstandard nav bar height

when i transition into the app's expanded view, my image with the following frame CGRect(x: 0, y: 0, width: 100, height: 100) ends up partially hidden behind the nav bar. i would like it to appear below the nav bar.

i tried self.navigationController?.navigationBar.isTranslucent = false but it didn't work, which i guess makes sense since it's out of my app's scope to control.

has anyone played around with this yet? i want to avoid 2 things. simply guessing the appropriate height and moving away from a programmatic solution. thanks for the help

Is it possible to add constraints to the view? If possible, try add a vertical space constraint of -86.0 from the top margin. — Lucas, Jun 17 '16 at 17:20
i'm hoping to avoid using a constant to solve this issue. i'd much prefer to write something like calculating programmatically relative to the nav bar height. — stanley, Jun 17 '16 at 17:25
I've updated my answer with a mini demo on how to get you going with constraints that handle auto-resizing. — Lucas, Jun 17 '16 at 18:01
lol, you provided the 2 approaches i specifically said i wanted to avoid. but thanks for the pointers, i'll add some constraints and let you know — stanley, Jun 17 '16 at 18:11
If you don't add constraints, it will be hard to automatically handle resizing for different devices and also for the compact and expanded modes for each screen size. Your code will quickly become huge! It's a better practice to not hard code the value, instead let Apple handle the resizing for you using Auto Layout. You can read more about Adaptive User Interfaces [here](https://developer.apple.com/design/adaptivity/)! — Lucas, Jun 17 '16 at 18:23
Anyone know of a way to cover them with your view? Apple does it with a UIImagePickerController from the text bar in iOS10 beta iMessage. — user1681673, Aug 16 '16 at 03:55
You've probably added top constraint to superview. Add top constraint to topLayoutGuide instead. This solved exact same problem I had. — sabiland, Oct 19 '16 at 14:48
Nothing works for me. Im using `tableviewController` and the cell starts under navbar — jose920405, Jan 13 '17 at 20:11

score 15 · Accepted Answer · answered Aug 19 '16 at 23:03

15

It may help to have a constraint with the top layout guide like so:

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

answered Aug 19 '16 at 23:03

Jeremy Kelleher

287
3
13

@JosipB. is the accepted answer....!. But not works for me in objective c code. I'm using this equivalent `[self.view.topAnchor constraintEqualToAnchor:self.topLayoutGuide.bottomAnchor constant:8.0].active = YES;` but apparently something is different. – jose920405 Jan 18 '17 at 12:42
@jose920405 check my answer in ObjectiveC – Josip B. Jan 18 '17 at 13:12

score 4 · Answer 2 · answered Aug 04 '16 at 13:21

You can get the height from controller's layout guide:

self.topLayoutGuide.length

The reason why @Dilts's demo works is because the labels' top are constraint to the top layout guide. If they are constraint to the superview, then it will also go behind the bar.

score 4 · Answer 3 · answered Sep 20 '16 at 13:35

If you are like me and still find Auto Layout hard to use, then you can use the viewDidLayoutSubviews method to automatically adjust the view size. I have a table view with the same issue as you, so I used this simple method to change the table view's top side content inset:

-(void)viewDidLayoutSubviews {
    [self.tableView setContentInset:UIEdgeInsetsMake(self.topLayoutGuide.length, 0, 0, 0)];
}

So far it works fine (in both portrait and landscape) on all iDevices.

score 2 · Answer 4 · edited Jun 20 '20 at 09:12

2

To answer your question: "what is the height of the extra tall navbar":

It's 86px.

UPDATE

About the Navbar hiding your UI. I did a quick demo and I had no problems.

I added a couple of labels to the top of the view (just under the status bar, at y-point value 20). Next I added 2 constraints: Leading space and Top Space for the left label and Trailing space and Top Space for the right label.

This was my result, both in compact mode and also expanded. So just make sure you put your components below y-point-value 20 and have some constraints, that way Apple will hand the view resizing for you!

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 17 '16 at 17:19

Lucas

880
7
12

@stanley I also tried this with a `UIImageView ` (with Clip Subviews enabled and Aspect Fill mode) with a few simple constraints, and again starting at y-point-value equal to 20 and it worked like a charm! – Lucas Jun 17 '16 at 18:07
1

could you provide the project? I tried following your steps but its not working for me thanks – random_0620 Aug 08 '16 at 19:41
1

I'm constraining to top layout guide and still get hidden – A Tyshka Aug 22 '16 at 00:16
2

if you set top constraint to top layout guide, it will work from compact to expand mode. However, it won't work if a extension starts with expand mode. – REALFREE Aug 24 '16 at 08:24
@Dilts: This only works for `MessageViewController`, which inherits from `MSMessagesAppViewController`. But when we try to do same with our ViewController, which inherit from `UIViewController`, then this will not work. – technerd May 11 '17 at 13:20

score 1 · Answer 5 · edited Sep 29 '16 at 02:58

1

If you set the top layout guide as the top constraint, it works for MSMessagesAppViewController. But it will not work on UIViewControllers, because the layout guides are different.

Unless you really need to use a UIViewController class for some reason (example: MessagesAppViewControllers have trouble containing Obj C++ code), stick to MSMessagesAppViewController.

edited Sep 29 '16 at 02:58

benco

29
9

answered Sep 20 '16 at 04:55

Totoro

3,398
1
24
39

score 0 · Answer 6 · answered Jan 18 '17 at 13:11

0

This is accepted answer in Objective-C

[view.topAnchor constraintEqualToAnchor:[self.topLayoutGuide bottomAnchor]].active = YES;

answered Jan 18 '17 at 13:11

Josip B.

2,434
1
25
30

You could verify that this works ?. Because do not do it. Can you helpe me here http://stackoverflow.com/questions/41707159/how-prevent-view-under-navbar-in-imessage-app-extension – jose920405 Jan 18 '17 at 21:13
You can check my question and verify that I am doing wrong, please – jose920405 Jan 18 '17 at 21:17

score 0 · Answer 7 · answered May 11 '17 at 13:48

As of now with Xcode 8.2, none of the above solution works for me. @Dilts answer will works only for MessageViewController, which inherits from MSMessagesAppViewController. But when we try to do same with our ViewController, which inherit from UIViewController, then this will not work.

I have do this by binding Top Constraint with respect to view rather than Top Layout guide. I set top constraint to zero with respect to view and bind that constraint as topLayout.

@IBOutlet weak var topLayout: NSLayoutConstraint!

And then change value of constraint programatically on changing of presentation style.

override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
        // Called before the extension transitions to a new presentation style.

        if presentationStyle == .compact{
            mediaViewController?.topLayout.constant = 0.0
        }else{

            mediaViewController?.topLayout.constant = 86.0
        }

    }

Compact Mode

Expanded Mode

score 0 · Answer 8 · answered Jun 17 '17 at 00:04

    [self.view addConstraints: [NSArray arrayWithObjects:

                            [NSLayoutConstraint constraintWithItem:YourViewHere
                                                         attribute:NSLayoutAttributeTop
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.topLayoutGuide
                                                         attribute:NSLayoutAttributeBottom
                                                        multiplier:1.0
                                                          constant:0.0],

                            [NSLayoutConstraint constraintWithItem:YourViewHere
                                                         attribute:NSLayoutAttributeBottom
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.bottomLayoutGuide
                                                         attribute:NSLayoutAttributeTop
                                                        multiplier:1.0
                                                          constant:0.0],

                            [NSLayoutConstraint constraintWithItem:YourViewHere
                                                         attribute:NSLayoutAttributeLeft
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:[self view]
                                                         attribute:NSLayoutAttributeLeft
                                                        multiplier:1.0
                                                          constant:0.0],

                            [NSLayoutConstraint constraintWithItem:YourViewHere
                                                         attribute:NSLayoutAttributeRight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:[self view]
                                                         attribute:NSLayoutAttributeRight
                                                        multiplier:1.0
                                                          constant:0.0], nil]];

works well for constraining to the expanded mode, for collapsed I just assign the self.view.frame to the frame of the view i'm placing into collapsed mode (minus some offsets I may use for tool bar), but I use multiple views based on the mode it's in, not sure if these constrains will work for collapsed view since the top layout guide remains at the top I think in collapsed view — danchik, Jun 17 '17 at 00:08

iOS 10 iMessage app extension: how do i calculate the height of the extra tall navbar

8 Answers8

UPDATE

Linked

Related