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
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 have two items on the navigation bar. named More on the left and Search on the right. When i run the app on the simulator, two items are moved to 2 top ears of the phone. see below for more detail. this is not happening on none iphone X
This is happening because your constraints are set to superview, not safe area (or not using safe area at all).
In your Storyboard, click on your ViewController, click on your view then go to the Size inspector.
There, make sure that your safe area layout guide is enabled. Then, just bind your view's edges to safe area instead of superview
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 set up a layout where a Map is placed on top of the SceneView. When the app builds, the set up flashes for a second, and then the SceneView takes up the whole screen, completely hiding the other two views.
After moving the SceneView on the left hand menu and moving it back, the text started appearing but not the black background.
(I've got constraints set for the Scene View to take up the whole screen, and some constraints (right and bottom) on the Map too.
Why is it not working?
EDIT: It started working after I deleted the view and added it back in, but not sure why. #El Tomato says SceneViews always overlaps other views. Is this true (i.e. by accidentally getting it to work, am I utilizing a bug)?
It is doable. I'm doing it currently with an app I am using, but the difference is that I didn't set up the ARSceneView in the Interface builder, but I added it to fit the whole screen programmatically. I have some buttons that were added through the interface builder, and I added a label with a background now just to make sure it works similarly to how you want it.
I will post some images:
Here i simply have the view controller with some (bad looking buttons) in the stack View as well as the label with a red background. The ARSceneView is added in the my ViewDidAppear function and takes up the whole frame.
This picture is from the screen while the app is executing (Debugging the UI). As you can see, the Label with the background as well as the buttons I've added all show.
I also have 2 buttons that are showing as well (the white and red circle) and these were added programmatically and were brought to the front.
My suggestion is to try and add the ARSceneView programmatically, maybe it doesn't work otherwise. Or you can try to outlet all your views and bring the Map View and the Label to the front using bringSubviewToFront.
I need to have an iPad app that has a consistent toolbar at the top of the screen. I need it to adjust when switch from landscape to portrait. Essentially what I need is something that acts like a UINavigationController, but allows me to have an arbitrary number of buttons like a UIToolbar. I've seen this done, but I can't figure out how to do it.
Thanks
There is no reason you can't just use a standard UIToolbar at the top of the screen, rather than the bottom. This allows you to add as many buttons as you can squeeze on, and customise their appearance.
In order that it should adjust its size when switching interface orientation, you simply need to adjust its autoresizingMask property. This is easy in Interface Builder - just turn on the horizontal arrow in the middle of the autoresizing box (this makes the width flexible), and maybe make sure that the left, right and top struts are enabled to so as to hold it in the correct position.