With the new iPhone X coming, are there any UI or UI Api changes required to fully support the iPhone X?
Are there any API changes that might affect the UIStatusBarStyle / UINavigationBar / UINavigationItem / UITabBar etc.
The only significant change I see is the larger display of 145pt longer.
The only information I could find is the Apple: Human Interface Guidelines
located here:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
For native IOS app the support is already given and all the info is available on full screen(18:9). Lots of app instead still need to fully support the new format so info available on 16:9 ratio
In order to get full-screen applications you will need to recompile your apps with IOS 11 / Xcode 9.
If you use Standard UI controls you should be safe. If you use Autolayout you can utilise the new "safeAreaLayoutGuide" which will then basically help your ui design to respect the iPhoneX view port.
I found this Transcript from Apple located here: https://developer.apple.com/videos/play/fall2017-801/?time=126
"On iPhone X, people access the app switcher (indicated by the red arrow) and the Home screen by swiping up anywhere along the bottom edge of the display. An indicator at the bottom of the screen offers a hint about this interaction.
This indicator is displayed over your app's interface. You'll need to account for this when designing your app. If your app uses UIKit controls and auto-layout, designing and developing for iPhone X and our other devices should be straightforward. Standard UIKit elements such as navigation bars, tables, and collection views, automatically adjust when viewed on iPhone X. Navigation bars, tab bars, and toolbars are positioned and scaled appropriately on all iOS devices. The navigation bar's background material is extended to the display's top edge, and the background material of the tab bar and toolbar is extended to the bottom, while the elements they contain are positioned to prevent underlapping or clipping by other elements."
Basically if you use standard UIKit you have nothing to worry about.
Although Apple recommends: "Make sure that your UI displays correctly and no elements are mispositioned, overlapping, incorrectly scaled, or clipped"
If you discover issues, use the safe area guides and layout margins to correctly position UI elements.
Related
I am 2 days into iOS app development, I am quite new. The very first thing I wanted to implement in my app is a Launch Screen using Storyboards (I heard there are other ways but I found this the easier). I have a vector-based PDF file (image) because I wanted to implement a gradient background without a loss in quality that supports all device resolutions.
I created an Image View in the Interface-Builder (IB) but it does not automatically stretch vertically and horizontally to fill the device length.
I simulate my results on an iPhone 14, only thin white margins appear, but on a large iPad, the majority of the screen is white. It's like as if the the image resolution is fixed across all devices.
No matter what resizing I try, I can't get it to work.
I come from an Android app development background so something like this is very easy to implement (we have fill_parent / match_parent to stress the view to its containing parent view dimensions). Is such a behavior possible on iOS ?
You have to apply constraint on the image in launch screen.
Is is possible to have buttons clickable outside safe area (btw how is it called? nonsafe area?)? I have buttons like in screenshot and highlight area where my app doesn't recognize touch (it's screenshot from simulator iPhone XR, there is notch but it's not visible in screenshot):
I know that some systems buttons are clickable in that area but I don't know why mine isn't.
From my experience, buttons do not respond to touches outside of the safe area. And this is for a good reason. Areas outside of the safe area are reserved for iOS system user interface, like displaying the time, battery level, and your cellular signal strength.
Apple advises to account for safe area insets when laying out your UI elements.
Try running this project on a device like iPhone X or iPhone 11 to test it out: https://github.com/ChopinDavid/safearea
I am new to Apple TV apps development. I have designed few views on storyboard, which is looking nice on Apple TV simulator, but some control's edges are cutting when I am running it on HDMI monitor and actual tv.
I want to know, if constraints are needed to manage UI for different sizes of Tvs? If no, is there any standard Apple has introduced to manage this part?
Using Autolayout is recommended, but not required. However, it's a good chance this isn't your issue. If you're developing a tvOS app, be aware that there is a safe area you need to work with. Many TV's (including some new HDTV's) will cut the edges of the screen off (this is called overscan). The safe area is the part of the screen in the centre that you should ensure all of your important content is in.
So, for a tvOS app, you should set up your views with the dimensions of 1920x1080, but keep all of your important content, buttons, text etc, inside the centre 1740x960 region. This leaves 90px borders on the sides, and 60px borders on the top and bottom. Those borders should of course still have non-important information, such as your background images etc.
See here for more details: https://developer.apple.com/tvos/human-interface-guidelines/visual-design/#layout
Constraints are not mandatory, but they can save you a lot of trouble. Furthermore, actually constraints(auto layout) are how Apple wants developers to manage the app for different resolutions.
Take a look at: https://developer.apple.com/library/tvos/documentation/AppKit/Reference/NSLayoutConstraint_Class/index.html
If you are new to constraints, I also found this tutorial helpful: http://code.tutsplus.com/tutorials/an-introduction-to-tvos-development--cms-24848
Autolayout is not mandatory for any kind of development whether is ios, tvos or watchos. we have option in file inspector to disable autolayout that means it is not necessary. But if you use autolayout it can make your task too much easy.
Not using autolayout does make the assumption that your app will never run at any other resolution, but more importantly, autolayout is very helpful when it comes down to dealing with things other than overall screen size, such as localization of text and buttons etc.
If you use autolayout then it can help you in future release of tvos of different screensize.
Hope this will help :)
I have just submitted my iOS 7 compatible app using the Xcode 5 GM and iOS 7 SDK GM. My base SDK is set at iOS 7 GM and my Deployment Target is set at 6.0, I am wanting my app to support iOS versions 6.0 and up. I know that those settings are correct, however I am wondering if there is anything extra I need to do so that when the app goes live it says "Optimized for iOS 7" or whatever phrasing Apple is going to use for this. Just like they did with the iPhone 5 "This app is optimized for the iPhone 5". Anybody have an idea on this?
There is nothing else you have to, or can, do. I don't know if the App Store will display something like "Optimized for iOS 7". If it does show that once iOS 7 is released to the general public, then having built against the 7.0 SDK will probably be how Apple determines whether it's optimized or not.
App icons:
- For iPhone, iOS 7 app icons have grown to 120×120 pixels, compared to 114×114 pixels in iOS 6.
- For iPad, iOS 7 app icons should measure in at 152×152 pixels, instead of the 144×144 pixels in iOS 6.
Notes: IOS 7 & 6 UI are different. You still need to support iOS 6.
All details are in iOS 7 UI Transition Guide
Things Every App Should Do
Make sure that app content is discernible through translucent UI elements—such as bars and keyboards—and the transparent status bar. In iOS 7, view controllers use full-screen layout (to learn more, see Using View Controllers).
Redesign custom bar button icons. In iOS 7, bar button icons are lighter in weight and have a different style. For some design guidance, see “Bar Button Icons”.
Prepare for borderless buttons by reassessing the utility of button background images and bezels in your layout.
Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required. (If you’re new to Auto Layout, learn about it by reading Auto Layout Guide.)
Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner. For more information on specific UI elements, see Bars and Bar Buttons, Content Views, Controls, and Temporary Views.
Adopt Dynamic Type. In iOS 7, users can adjust the text size they see in apps. When you adopt Dynamic Type, you get text that responds appropriately to user-specified size changes. For more information, see Using Fonts.
Expect users to swipe up from the bottom of the screen to reveal Control Center. If iOS determines that a touch that begins at the bottom of the screen should reveal Control Center, it doesn’t deliver the gesture to the currently running app. If iOS determines that the touch should not reveal Control Center, the touch may be slightly delayed before it reaches the app.
Revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 aesthetic is smooth and layered—with much less emphasis on using visual effects to make UI elements look physical—you may want to rethink these effects.
If necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app doesn’t use deprecated APIs.
I am working on an app and have come into some graphical problems when designing my app.
First off, my app is only support by iPhone. My current storyboard is using the iPhone 5 as the screen size, so everything screws up when I try to run in iPhone 4 and 4S. Is there a way to make multiple storyboards for each different screen size? Or do you all have another solution?
Thanks!
- Brad
There is a way to make different storyboards for separate screen sizes, but another way to do it is like this:
Whenever you add objects to your views, be sure to have them aligned to something (using constraints). If all items are relative to other items, then most likely the layout will be fine on all devices. Also, if you find that your controls start overlapping, then perhaps you ran out of room. In that case simply add a scroll view to your layout, and then put the controls on top of it. Then, it won't scroll on the larger screens because all controls are shown, but on smaller devices it will allow you to scroll down to see the rest of the objects.
Good luck.
There is a small button in the lower right hand corner that lets you toggle between 3.5" and 4" screen sizes so you can see how it will look on different devices. By using Auto Layout introduced in iOS 6 you can make sure to set up your constraints so that your UI looks good on both older and newer iPhones.