I am having severe difficulties finding a clear working world example of auto layout on multiple screen sizes. Most tutorials have basic stuff like a button thats centralised and then after adding constraints in Interface Builder it scales with the device. One button is simple but in my example for the iPhone 4:
There are quite a lot of labels / buttons and some that are not central. The above screen shot is exactly how I want it to look on all devices.
The app is for portrait only but I want to target all devices. I tried slowly adding constraints to items from the bottom up using a multiple of the superview to position and size items and then applying aspect ratio to UI Objects (got as far as the got it button but not the red arrow buttons) but as you can see in the next picture for the iPhone 8 plus... the white space isn't going to perfectly fill like in the iPhone 4 which will leave me with a big gap at the top.
Is there a way I can change just the iPhone 8 plus layout in Interface Builder to build a layout that caters for the extra screen size?
The iPhone 8, SE and X layouts are equally awkward with extra white space.
I tried size classes but that changes it for all phones.
Is there a way to centre what I have done so far?
How do you guys position objects in auto layout that are not centred?
Am I going about it the wrong way by applying X / Y constraints using a multiple of the superview? - same for the width. I'm only specifying widths as a multiple of the superviews width then adding aspect ratio.
I just need a real world working example I can learn the basics from or a system to create for multiple devices that I can follow. I don't want to use a 3rd party library.
I really hope someone can help point me in the right direction!
Krivvenz.
Related
Beginner...
I suppose somewhat related to the question below, I would like the view controller to appear the same on each device with only the size of the graphics changed, (storyboard iPhone 8 vs iPhone 4s)
I've tried my best to read about and understand the Constraints, but with no luck. I add a constraint, then click away from the "Add New Constraints", and when I select the object again to view constraints it appears as if nothing is set anymore, (Constraints added & Constraints gone)
Even if they are sill there, but this isn't how you see them, the image still moves when I check the storyboards or the simulators of two different sized devices.
Any recommendations on how to fix either issue or just somewhere else to look for answers would be well received!
I would like to automatically align all the graphics I've placed in the "View Controller", (Unaligned Storyboard),
and have those graphics resize themselves to maintain their placement when loaded onto a device with a different size screen, (Main Storyboard of two devices)
I've decided I want most of the graphics to only be in the center of the controller.
EDIT
this has been solved
I've discovered how to align the graphics as I desire by clicking the Align "Horizontally in Container"
I'm not sure how or why I didn't see this sooner.
Unfortunately, the graphics still become distorted when on a different sized screen.
I've discovered how to align the graphics as I desire by clicking the Align "Horizontally in Container"
I'm not sure how or why I didn't see this sooner.
Unfortunately, the graphics still become distorted when on a different sized screen.
I'm new to iOS development. I'm trying to add logo on launchscreen in centre. I've a background with gradient colour so I've used a png file and stuck it in the background.
Next is logo which I want to centre for all devices.
I've two part questions
1) Is there anyway I can specify the constraints so that it is applicable to all devices? Example specifying top and bottom constraints in % ?
2) If above is not possible then how do I align logo in centre so that it works on all devices? Do I need to apply constraints separately on all devices?
I tried to set the width and height separately for all devices but it modifies dimensions on other devices. Not sure if this approach will work or I'm doping something wrong?
I'm aware that in worst case that I can just create launchscreens with logo in it as png and stick them for each devices separately which will work. I just wanted to know if it can be done with constraints.
Tx
As you suggested I added constraints to align it in centre horizontally and vertically. It seems to be good on one device but on other it's not. Please see images below.
And then how do I change image size?
One device
2nd device
You do have centerY and centerX constraints.
In storyboard, select the imageView that you have already added to your view. Right-clic drag to the main view (full screen view) in the left panel and choose center horizontally, repeat with center vertically.
You will need to also set the width and height constraints of your logo.
ALTERNATIVELY:
You don't need to clic drag, you can add the center constraints in the "add new alignment constraints" tab.
Finally I manage to solve what I Was looking for thanks to all those who helped. It was good learning period, 2 days in total ;)
Step 1: Align image to centre vertically and horizontally.
Step 2: Scale logo to fill the space. Please follow this video which is bang on point what I was looking for.
http://roadfiresoftware.com/2015/04/how-to-scale-an-image-view-based-on-device-size-with-auto-layout-in-interface-builder/
I've been playing around with the auto-layout feature of XCode 6 in developing a Swift application for the iPhone.
It works well for a small number of controls but I now find myself with a section on the screen which will consist of a matrix of eight by eight small text controls (in portrait mode) of the form 7☐ and 42☑ (all three characters), each which can be selected by the user (toggling the checkbox).
I'm wondering what's the best way to handle this. I started by simply laying out all sixty-four text controls but this quickly became a nightmare in trying to join them all together with constraints.
I then wondered whether it would be easier to have one text control in a fixed-width font (or in a font where all digits are the same width and a space character of that width is also available) so I could control the layout manually (with newlines). The downside of that is that I'll then need to perform hit-testing on the control to see which item should be toggled.
Both these approaches have the downside that they don't adjust well when switching to landscape mode or to other resolution changes.
So my question is, how do I handle this in a way that can take full advantage of auto layout (i.e., minimal work for the developer). Ideally what I'm looking for is something like the Java Swing FlowLayout container, to which I can just insert those text controls in order, and it will fill it out as if it's a book (populate top line, left to right, then next line and so on).
If you have a matrix like layout and you want it to flow like the FlowLayout from Swing, you can use a UICollectionView.
I think that matches best what you are trying to achieve.
I am developing a game that uses levels. The levels are made at a default scene width and height resolution.
The thing i am worried about is when the game is played on IPads iphone 5′s etc, the position of sprites loaded from the level xml files will be out of place due to the screen size.
In my case, could someone tell me the best thing to do in this situation or some advice on the approach i should take?
Also if any has experienced this, please let me know.
Thanks. :)
Generally this has nothing to do with how or where you store the level data.
These are the standard approaches, which one works for you depends on your requirements and desired results:
design each screen resolution individually (error-prone, tedious)
design for one screen resolution, then scale up or down according to screen aspect ratio (can lead to skewing as the screen size scaling for width & height are likely to be different)
design for the smallest screen resolution, then center the contents on the screen (this leaves unused areas either at the top/bottom or left/right sides)
same as above, but zoom content to fill the screen (this will remove the letterboxing, but also partially remove one side's content from the view)
In essence this is the same problem as movies have in trying to fit to screens of varying aspect ratios.
In general this is all a matter of scaling the input (positions) to a desirable output. The easiest approach is to maintain aspect ratio and allow for letterboxing. However Apple may reject letterboxing apps if nothing is done to hide the letterboxes (black areas) since Apple requires apps to support widescreen resolution, and letterboxing does not normally fall into their definition of "supporting widescreen".
I'm having some issues with the constraints in my app. Here is how it looks on the iPhone 4 (that's how i want it to look, and how i usually setup my interface, is this the proper approach or not?)
Now, when i switch to the iPhone 5 screen it looks like this
and as you can see, the blue dots (which is UIButtons) are not placed where i want them to be. I made my constraints rely solely on the right side of the view (since that is the one re-sizing, i found that in order for you'r views to align themselves accordingly, it doesn't help to align them to the left side). I don't really know how to fix this. I am finding this new iPhone screen to be a real pain in the arse. Any good advice on how to work with this new screen without a lot of headache would be appreciated :)
Thanks on advance
It looks to me like the are still the same distance from the right side of your view, as you said you set them to be, while the background has stretched to fit the new size. I suspect it's actually the background that isn't doing what you want it to do (keep the same aspect ratio and show more stuff on the left), or try keeping the buttons relating to left and right to stay aligned with the stretched background image.