3

In one of my app, i have not used navigation bar for header. I have used UIView which is of 64 height.

I just tried to design one screen app in xCode 9 to support iPhone x.

In storyboard, I have used UIView with 64 fixed height, and a label which is center to UIView

Everything is working fine in iPhone 8 and iPhone 8+, but in iPhone x, design is not looking good.

Fixed view looks small in iPhone x.

Please check below images

iPhone x iPhone 8

As i have start developing for iPhone x for other application, navigation bar gets bigger in iPhone x (around 145 px).

How can i manage design in iPhonex without navigation bar?

Ashley Mills
  • 50,474
  • 16
  • 129
  • 160
Er.Shreyansh Shah
  • 1,482
  • 1
  • 9
  • 29
  • I can't see any wrong with your image, please post some correct design you think. – ovo Oct 03 '17 at 07:23
  • @ovo:- Edited question. – Er.Shreyansh Shah Oct 03 '17 at 07:29
  • How did you previously handle resizable status bar (for example, when in a call)? – Ashley Mills Oct 03 '17 at 07:36
  • 3
    Just for the record, it is for reasons like this that its important to stick with the controls apple give you. Same thing happened with iOS 7, apple changed the UI to allow devs to draw under the status bar. If you stick with the inbuilt controls, apple put in a lot of work to make it as seamless as possible with the new styles being used automatically. Theres nothing in your images that couldn't have been done with a navigation bar – Simon McLoughlin Oct 03 '17 at 08:43
  • Hi Ayaz please follow the instruction here https://stackoverflow.com/questions/44492404/safe-area-of-xcode-9 – Muhammad Noman Oct 12 '17 at 05:58
  • 1
    Please refer my answer on [Make custom navigationbar compatible for iPhoneX](https://stackoverflow.com/questions/46344381/ios-11-layout-guidance-about-safe-area-for-iphone-x/50232592#50232592) – Mehul Sojitra May 08 '18 at 11:54

2 Answers2

1

What you need are safe margins. Official Apple tutorial on iPhone X explains everything about them here in "Human Interface Guidelines iOS" and here in "Designing for iPhone X".

Shebuka
  • 3,148
  • 1
  • 26
  • 43
-1

1. Add subview to ViewController

Let’s get started by adding a subview into the view controller. This subview will be our custom navigation bar. Let’s setup auto layout accordingly. Setting up auto layout constraints on custom navigation bar

NavBar.Height = 44
NavBar.Top = Safe Area.Top
NavBar.Leading = Safe Area.Leading
NavBar.Trailing = Safe Area.Trailing

the constraints are between the custom navigation bar and the safe area

2. Add ImageView as Background

Take an image view that display our background image. This imageview should be behind our custom view for navigation bar Setting up auto layout constraints on image view

Image View.Top = Superview.Top
Image View.Leading = Superview.Leading
Image View.Trailing = Superview.Trailing
Image View.Bottom = NavBar.Bottom (For this drag from imageview to customview and choose last baseline constraint)

Leading and trailing constraints are all between the image view and it’s superview. For the bottom constraint, we will set it between NavBar.Bottom and Image View.Bottom. The purpose of this is to make sure that the image view will cover up the entire custom navigation bar.

3. Final Step

A. Set clear color of custom view B. Set image on imageview C. Make sure the content mode of imageview is “Aspect Fill” and “Clip to Bounds” is checked.

4. Unit Test Test this in all devices from iPhone 5 to iPhone X. In all devices expect iPhone X our custom view with image is 64 pixel, and in iPhone X it is using the safe area also.

Behaving the same way as default navigation bar.

Mayank Jain
  • 5,663
  • 7
  • 32
  • 65