I'm trying to compile my app to work correctly with the iPhone X, using all the available screen space and accommodating the new home indicator at the bottom of the screen. My app has a bottom toolbar, and I notice that Apple's apps extend the height of the bottom toolbar to give extra room for the home indicator. I give my toolbar extra height, but the buttons themselves want to position toward the bottom instead of the top. Is it possible to force them to align toward the top of the toolbar instead of toward the bottom?
Thanks.
In the app for which I asked the question, I am positioning views on the screen using coordinates. (In a constraint based app, one would need to pin the bottom constraint of a bottom toolbar to the safe area rather than the superview; if you are using the built-in bottom toolbar belonging to the navigation controller, the position of the toolbar and its content will take care of itself). Surprisingly, the solution turned out to be simply lifting the bottom toolbar up using its y coordinate, no more than 34 pts, and the area below the toolbar and near the home indicator will simply assume the color of the bottom toolbar, making it appear as though that area is part of a taller-than-normal bottom toolbar. The buttons on the toolbar will no longer appear squished.
Related
Whenever I run my iOS app on a device that has a home bar, the bottom of a UIScrollView or one of its descendants will render too low.
My app has a bottom navigation. I made the scroll view constrained to the safe area on the Y axis. It contains a container view (Cv For Home) in which I load a subview:
The container view is constrained to the superview (scroll view), though.
In my child storyboard's subview I have a collection view, that I have to constrain a lot from the bottom of the superview away, oddly enough. Otherwise it will not display entirely on the devices:
That's weird, but it works, unless I run the app on a device with home bar. I think this might be related, but I'm pretty new to constrains and I can't get it right for some reason.
The result, then, looks like this:
As you can see the last cells are hidden below the bottom navigation on the middle and right device. Both have a home bar, the left device does not. How can I fix this?
EDIT: The bottom navigation looks like this:
I also tried to set the bottom constraint of the scroll view to the top of the bottom navigation, but that was resulting in the same issue.
EDIT 2: Taking a look at the Debug View Hierarchy reveals in fact, my Safe Area is too long, so it seems that it has a fixed height and using a bottom constraint on the bottom edge of the Safe Area will break if there is a home bar:
The parent UIView has the correct size.
I want to to delete the top and bottom bar so that my app really uses the full screen.
How do I do that?
iphone simulation
Set your green View constraints to be with respect to the Super View instead of the Safe Area, and the white areas will disappear.
I have a view controller that looks fine on all devices but leaves an undesired white padding behind the Home Indicator on iPhone X. I would like my background image to extend all the way to the bottom margin, and be behind the home indicator like, for example, a tab bar does.
I realize that I could use negative margin over the image, but then that means that I am cutting part of it on other devices. I also setting a parameter to "prefer hiding the home indicator" but it simply hides the bar, and does not extend the image to the margin.
Is there a better way to achieve this?
Finally got to a solution!
First of all, you need to either use a "new" View Controller that contains the Safe Area Layout Guides, or activate them on the Document tab of the View Controller:
After this, you need to realize that a safe area is the view from above the Home Indicator up to below the Status Bar. However, once Safe Area Layout Guides are activated, if you set a constraint to the bottom of the superview, it will go beyond the Safe Area and into the actual bottom (or top if so desired) of the View Controller.
Hope this helps!
I'm trying to use a UISegmentedControl as a custom right button bar item. Using Interface Builder, when I drag the control into the navigation bar, it gets sized to be quite wide (too wide, considering the segment contents):
I've tried setting the widths of the segments to something that I think looks good and the overall control resizes, but it is pinned to the left side of the original space it was allocated. I can't seem to find a way of moving it from there. Here's a picture of what this looks like in IB in landscape:
and here's what it looks like running on an iPhone 7 Plus simulator in portrait mode:
As you can see, the segmented control is positioned way too far toward the center.
I tried a hack (suggested in this thread) of embedding the segmented control inside another view, leaving the containing view to be full width of the bar button item and constraining the segmented view to be on the right of it's container. That gets it over to the right, but here's the effect of running that on an iPhone 7 simulator (somewhat narrower than the 7 Plus):
Here the problem is that the title, which is supposed to be centered, has been pushed off to the left. I assume that this is because the (transparent) bar button item is taking up so much more width than what is needed just for the segmented control.
Is there some way of getting the right button area of the navigation bar to simply be smaller?
My steps are below:
1.Drag the segment control to navigationbar:
2.Change the segment width:
3.iPhone7 & iPhone 7Plus all looks good:
I am learning iphone app development and I am using swift. I took the lynda tutorial and I have created a very basic UI which is View Controller > View .
In the View I added a segmented control, two buttons(horizontal, facing each other), three labels, one textarea and two other buttons(horizontal, facing each other).
So I have these UIcomponents arranged vertically and I used 'Reset to suggested constraints' and made all the buttons equal width and equal height and everything is fine in potrait mode but as soon as I go to landscape mode the last two buttons disappear, if I add a constraint from bottom edges the whole UI gets messed up i.e. only one label and part of an upper button appears.
What should I do to make all the UI components visible both in potrait and landscape mode?
There are many ways to go about this. I've set up a github project to show you one way to achieve it.
Short resume of what I did manually without the help of the Interface Builder:
I've pinned the segmented control to the left, top and right of the parent view
The red button below has a vertical constraint to the segmented control and a leading constraint to the parent view. It also als a horizontal space constraint to the green button
The green button has a trailing constraint to the parent view, top aligned to the red button and widths set to equal to the red button.
This setup ensures, that the segmented control is responsible for specifying the distance to the top of the parent view and the red button specifies the width of itself and the green button (test it, by changing the value of the horizontal space constraint)
I've turned the same principle upside down. So the views in the bottom are always pinned to the bottom. But as I said, there are many ways to achieve this. You could also create 3 container views for the elements in the top, center and bottom and pin those to the top, center and bottom.
The running app looks like this:
If you would like to display your content differently in landscape mode, it is possible (and most likely preferable) to create an alternate landscape interface.
Quoting the Apple developer's page on the subject:
"To support an alternate landscape interface, you must do the following:
Implement two view controller objects. One to present a portrait-only
interface, and the other to present a landscape-only interface.
Register for the UIDeviceOrientationDidChangeNotification notification.
In your handler method, present or dismiss the alternate view controller based on the current device orientation."
For more information about this, check out this apple developer page and scroll down to "creating an alternate landscape interface".
https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/RespondingtoDeviceOrientationChanges/RespondingtoDeviceOrientationChanges.html