iOS 10 vs iOS 11 safe area - ios

I have an iPad app written in objective-c that has a tool bar at the bottom of a UIVew.
In ios10, the bar sits at the absolute bottom of the screen, and I then place images, streams, etc above that bar and extending to just above the bar.
In ios11, the bar appears to be about 20px ABOVE the absolute bottom, and therefore, my images encroach upon the top of the bar.
I believe this is the "safe area" that was introduced in ios11.
Is there any way I can account for this and have the same functionality in both ios10 AND ios11/12?
edit: in the attached image, the left simulator is ios12, and the right simulator is ios10.
You can see there is black under the ios12 bar, and the image cuts down into the toolbar. In the right simulator, that is not the case. No mods to the code...

Yes you can achieve this by directly setting bottom constraint 0 to superview instead of bottom constraint to safe area layout. If you are using older version of Xcode ans iOS, then it will be Bottom Layout Guide instead of Bottom Safe Area
In above image you can see space at bottom.
Here it is, what you want. But now I suggest to check once. If you are using Xcode 10 and above, then please enable device bezels and chk what happened.
Now you can see in above image, all messed up. So It is better if you redesign layout and make circle little small, so circle image won't be cut behind toolbar. And if you need to change anything in future then you just need little changes.

Related

iOS/Xib: Easiest way to show a button in the middle of different iPhone

In my iOS app, I just want to have a button located in the middle of screens of multiple devices (like iPhone 6, iPhone SE, iPad Air).
However, surprisingly, it seems not intuitive to do (at least not as Android) in XCode + Xib.
Following shows a trivial example of this problem where I put the button aligned to the middle:
However, unless the "dimension" of the view is set identical to fit the installed device, there is no way to display the button in the middle.
Add horizontal and vertical center constraints as follows and it will always keep your button at center of any screen as shown in the image below
You can also add distance constraints to borders of the screen :
Example

App Content not filling simulator window

Just having an Xcode issue that I'm sure is tied to some setting I can't find. Im my storyboard, my content fills the entire view (i.e a background image), but then when I run my app in the iPhone 6 simulator, the background image and all the content don't fill the entire screen. There is white space to the right of and below the content on the simulated "screen".
When I run the app in the iPhone 5 simulator, this isn't an issue and it fills the entire simulated view.
So, what did I miss? I want to make my app work on all models of the iPhone.
Thanks for any help!
There are several ways to solve this, and I guess you are using View Size as Inferred or iPhone4 Inch in Attribute Inspector.
First way is to use AutoLayout at Storyboard to add Constraint.
If you don't want to use this, you should at least set the Autoresizing at Size Inspector.
"White space to the right of and below the content" sounds like there are scroll bars being displayed in your window. The iPhone 6 simulator is a different size, as well, which would account for them not being there on the iPhone 5 sim.
Have you tried going to the Home Screen (Shift + Command + H) in your simulator, and seeing if the white bars remain? On my computer, the white bars are always visible. Annoying, yes, but they don't cover anything or hide any part of the view. It's just a bit of white padding on two sides.

iOS webview height pin (xamarin or code)

I have a Xamarin iOS app that is created with a storyboard. The storyboard is set to view as iPhone 5. I have a webview as below that fits the screen fine. When run on an iPhone 6 plus, it seems to grow fine and fills the entire iphone 6 plus screen. However when used on an iphone 4, a web page will fall off the bottom of the screen... which indicates to me that the webview is too big.
I don't know why it seems to scale up but not down. I need the bottom of the webview to always pin to the bottom of the screen. How can I do this? I have tried the UI constraint icons but they never seem to work as expected. Can this just be done in code instead? Even in iOS objective-c would help as I can convert it to c#.
Any pointers would be great!!
It works on iPhone 5 and the 6 versions because iPhone6/6+ uses a compatibility mode. Resolution of iPhone 4 is smaller. Try single clicking the web view to switch to constraint mode (you'll see T and H shaped handles).
Drag the T shaped ones to the top, left, right and bottom border of the view controller's view. That will constrain height and with to the parent view's size.

Why is iOS simulator displaying blank screen when I rotate device?

Getting through some introductory swift and playing with Xcode and I basically just have a page with some color squares, background color etc. Doesn't do anything. Problem is when I compile the code it will run in simulator just fine and show everything perfect, BUT when I rotate the device, everything disappears and it only gives me a blank white screen. Rotating right or left does it. The only view that shows it is the original upright view (for all iPhone devices that I tested on through the simulator).
Xcode 6.1.1 and iOS Simulator 8.1 are being used on my MacBook Air with OSX 10.9.5.
In the App general page, I have already checked under Deployment info that Landscape Right and Left are both checked on. Storyboard is set on Any H and Any W.
I'm not sure what I'm doing wrong and it has been pretty difficult searching since I'm still new to iOS development I'm not sure I'm using the right words or whatever because I can't find an answer.
Summary:
App displays properly in iOS Simulator, Portrait View but no other views work and will display blank white screen instead.
In order to see if your views are actually being drawn and just off screen as others have suggested capture the view hierarchy. Go to 'debug' in the menu, then in 'view debugging' click capture view hierarchy. This will pause your app and create a 3D representation of all view on your screen which you can move around by clicking and dragging.
Are your views actually being drawn? If yes are they drawing off screen? If yes then you need to fix your constraints.
It sounds like you haven't set your constraints appropriately. Try setting the top and leading constraints for each of your views to something less than 320 (should cover all device sizes). Fix your warnings, then try again. I believe the views are simply off the screen.
You don't have the correct auto-layout UIConstraints set in interface builder. Check the document outline view in interface builder and ensure that you have appropriate constraints set on each view.
Auto Layout issues occur when you create conflicting constraints, when you don’t provide enough constraints, or when the final layout contains a set of constraints that are ambiguous.
Check this Apple documentation out, it will show you step by step how to resolve your (common) issue.

How to make controls in view not overlap if built by Interface Builder for Xcode 4.5 and iPhone 5?

I am using Xcode 4.5 and iPhone 4 and 5 simulator, and the Interface Builder would add a UIButton in the top half of the screen with a top constraint, and add a UIButton in the bottom half of the screen with a bottom constraint.
It works fine on an iPhone 5 simulator, but on the iPhone 4 simulator, the buttons can overlap, or the bottom button may even get positioned above the top button.
I think it is due to the constraint, such as the bottom button "must be 250 points away from the bottom margin". I can't delete the constraint, and if I change it to "250 points or less", it won't work, if I change it to "250 points or more", it won't work either.
Is there a way to:
1) Make it have no constraint, but just position at absolute x and y? (or what about the spring in the past, so that everything is more spaced out in iPhone 5?)
2) Make the NIB into a one for iPhone 4 and 4S only, so that the app works well on iPhone 4 and 4S and just "black barred" on the iPhone 5.
3) Make it work well on iPhone 5 and work well on iPhone 4 as well?
If you know solutions to only (1), (2), or (3), above, please give it regardless, as it is still a viable solution for the transition period.
It is actually very easy to reproduce: Create a simple Single View app using Xcode 4.5, and drag one button just above the center point of the screen, and another one just below the center point of the screen. Then run it on the Simulator. On iPhone 5, it is:
And now stop the app, and change the Device in the Simulator to iPhone 4S (3.5 inch Retina). If you don't stop the app first, the Simulator can crash. Now run the app again, and the buttons will overlap:
I had the same problem, and it was due to a wrong settings for autosizing. To change the autosizing, click on the control in the interface builder, go to the size inspector.
Notice the bold red I's in the autosizing grid, they control placement when the screen is resized (like when going from iPhone 3GS to iPhone 5.
I think it will work best for you if you make your autosizing look like this:
I'm not sure, since I haven't used constraint-based layout (and won't until we drop support for iOS 5). Traditional NIB-based autoresizing will do absolute coordinates.
You can't do that for just one screen, as far as I know — you can disable it for your whole app by removing Default-568h#2x.png.
I'd go for programmatic layout, or if you want the easy way (which will be a pain to maintain), different nibs for different screen sizes. Note that you'll want to correctly handle the in-call status bar too...
EDIT: Put the two buttons in a container view and make the constraint center the container inside its parent? It won't adjust the spacing between buttons, but should look okay on both devices.
Select your buttons and add "vertical spacing" constraint for them. And set "less than" for top/bottom margins.

Resources