I have some issues when i launch my swift application on ipad simulator. I have a home view witch displays 5 images. In my storyboard i have set for all of those constraints for height, width and also spacing. The problem is that when my app is running from ipad , the photo on the middle is situated over the other ones and the spacing is not as i expected.
What i want is a way i can make the same space value between images for each screen size and that the images will resize themselves in order to respect the initial view. Any piece of advice is more than welcome !^.^
Remove width and height constraints for your image views and add equal width and equal height constraints to them. Check out "Auto Layout Tutorial" section "Fixing the width" to see how to set equal width between views. I recommend you to read it whole :)
Nikita is right.
I can add: often apps evolve, so you will add another image.. far better to pass to a CollectionView where every CollectionViewCell owns an image.
In this way:
1) you can decide layout very precisely (with constraints in InterfaceBuilder, or form code using NSCollectionViewFlowLayout delegate methods..)
2) You can manage rotation easily
3) You can scale for iPhone..
Related
I am trying to have my layout fit on multiple iPhone screen sizes, but I am having trouble resizing my UIView's to resize themselves when on screen sizes smaller than the iPhone xr.
I have constrained the views, labels, and buttons properly and everything is aligned, but when viewing the app on smaller screen size, I don't fully understand how to resize my UIView containers to resize themselves to fit smaller screens.
On smaller screens, my button does not show up because the screen size is too small. The UIView's are the issue and the stack views inside them also need to resize or shrink the text to fit everything on the screen.
Image of my storyboard, and respective screen sizes
"I don't fully understand how to resize my UIView containers to resize themselves to fit smaller screens." -UIViews won't resize according to the screen, you will have to add constraint for them so that they pick their width and height. Alternatively you have to set constraint for fixed height and width.
In my opinion, for supporting smaller screen size, you must use scrollviews as parentview. So that user can scroll in the app. Also you can give relative width and height for views inside scrollview.
Scrollviews are required because you will always want some minimum width and height for buttons, labels etc. Otherwise on larger screen like Ipad they will be very large, while on smaller screens they will be very small.
You can use TPKeyboardAvoidingScrollView: How to use TPKeyboardAvoidingScrollView, or just google for that. It handles keyboard showing and hiding task, which is a headache otherwise.
Here is how I think you can solve your issue:
Set Some minimum height and width for your topmost view(scrollview preferably).
Now add other views inside it and use relative width and height. In relative width and height you give values in ratios. Here you can get an idea how to do that: -Giving width in % values in autolayout.
Also add additional constraint on your internal views for minimum height and width so they don't fall below certain size.
I would not suggest, but you may always use UIScreen.main.bounds.size.width and UIScreen.main.bounds.size.height to get the width and height of screen. And according set values for your constraints in your view/controller class. Here is a link for setting value of constraint in swift class:
set contraint value programatically
In the past i've created several buttons that changes the size for iPads or iPhones, like this and works well:
Now i want to create new buttons but the size do not change.
I set Width to 400 and Height to 100 on iPad, the aspect ratio is 200:50 but the size do not change, when i change to iPhone (its still 400x100)
iPad size:
iPhone X size:
The button is huge and do not shrink as the working buttons in pic1.
What i'm doing wrong?
You can simply remove the height, width and aspect ratio constraints. Some UI elements like UIButton and UILabel auto-size themselves based on their contents.
Also, an advice:
Never ever set width and height for buttons and labels. Once you get into changing strings from outside the storyboard, such as when localizing your app, you'll get clipped strings without noticing it.
If you want to increase the hit-area for buttons, work with content / title insets instead.
I have an almost complete app. I want to use auto layout but even though I have searched a lot about this subject I could not find an answer that I could use. I can get it to show correctly on one screen size but not on another... Here is my question
How do I put the necessary constraints so that even if the counter is scaled for the different sized devices,the label and the button are at the same place on the image? (the image is a png image)
I would really be glad if you can answer or direct me to an answer that shows how to do a similar thing.
This is what I want
And this is what happens if I try doing it with auto layout and on a different screen size.
This is not the same image that I am using in my app but it will give you an idea.)
Thanks again
Edit:
Thanks for the answers but as pointed out in the comments, 1st answer does not provide a way to scale the image for different screen sizes.
Second answer provides a way but I could not understand the 2nd part of the answer.I need a little bit more detail. I would be glad if there is anyone out there who can help me on this issue.
I am still struggling with this issue. If I follow the 2nd answer Xcode says I need X position,width for the first filler view and Y position,height for the 2nd filler view.I am stuck at this point. I am not sure what value to give to these views.
You have to add constraints with respect to the image view. I have created a small project with your image. This should help you get started.
https://1drv.ms/u/s!Aq8sK_MQLIL9gxMl-lBOMHkToudU
Because the image size will change on different screen sizes, you can't set constant constraints. What you need is proportional constraints.
Set your UILabel and UIButton to have the width and height proportional to the UIImageView width and height respectively.
To do that: Click on your UILabel
and Ctrl Drag it over the UIImageView, selecting Equal Widths and Equal Heights.
Let's say your UILabel has a width of 100px and your UIImageView has a width of 500px. Edit the constraints that you have just set, and set the multiplier to be 100:500
This will make sure that any modifications on the UIImageView width, will affect the UILabel width accordingly. Do the same for height constraint.
Repeat same steps for UIButton.
The top/bottom/trailing/leading constraint cannot be set proportional to the UIImageView size unfortunately, but you can have filler views - transparent views that can mimic the layout constraints.
You will need two filler views: one for top constraint:
(set its height to be proportional to the UIImageView height)
and one for leading constraint
(set its width to be proportional to the UIImageView width)
I can make a small video for you if this is not clear enough.
I've figured out auto layout for the most part to get my storyboards loading nicely on both iPhones and iPads.
The only issue I'm having is button and label text.
They don't seem to size properly according the screen size.
I've got the width and height of them to scale based on a multiplication factor.
How could I do that with the text size?
I've tried putting this in the viewDidLoad
signup_btn.titleLabel!.adjustsFontSizeToFitWidth = true
signup_btn.titleLabel!.numberOfLines = 1
text_lbl.adjustsFontSizeToFitWidth = true
text_lbl.numberOfLines = 1
login_btn.titleLabel!.adjustsFontSizeToFitWidth = true
login_btn.titleLabel!.numberOfLines = 1
But that hasn't solved anything.
There are three main approaches to laying out a user interface.
You can programmatically lay out the user interface.
You can use autoresizing masks to automate some of the responses to external change
Or you can use Auto Layout.
Traditionally, apps laid out their user interface by programmatically setting the frame for each view in a view hierarchy. The frame defined the view’s origin, height, and width in the superview’s coordinate system.
To lay out your user interface, you had to calculate the size and position for every view in your view hierarchy. Then, if a change occurred, you had to recalculate the frame for all the effected views.
Other option is AutoResizingMask but you cannot use it for complex user interfaces.
Auto Layout represents an entirely new paradigm. Instead of thinking about a view’s frame, you think about its relationships.
I would highly recommend you to go through the following documentation - https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/#//apple_ref/doc/uid/TP40010853-CH7-SW1
This is an example for buttons without auto layout.
Also if the button and label position issue is occurring for only few screens then make different storyboard for these screen which doesn't have auto layout and different storyboard with auto layout.
Hope this will help you.
I have an app with a primary view that has a UITabBarController with 5 tabs. Each tab is a UINavigationController.
In interface builder, I'm customizing the background of each page by dragging a UIImageView and setting it fullscreen. The image I'm setting to the view is 640x960. I am setting it to be Aspect Fill.
However, what I've noticed is that it is not where I would expect it to be. When navigating between by tabs, the image seems to be shifted down from where it should be.
Also, when pushing a new view to the navigation controller, the background of this new view isn't offset in the same way as the tabbar one, and it is also slightly dimmed.
How can I set my UIImageViews on each page to be aspect correct and fill the screen 1:1? Also, how does one disable the dimming when pushing a view to the navigation controller?
Thanks for any tips, and apologies if this is covered in another thread, I couldn't find an answer searching the site.
Assuming that you are using the IB to setup your views, you should select navbar/tabbar options to reflect what will be on the actual page. That should place your image correctly. I would also recommend that you make both a low res and hi res version of your background images -- 320x480 and 640x960. Of course, your size may need to be adjusted (reduced) for the navbar and/or tabbar which will leave less than 960 px of vertical height -- probably more like 920px if you are in portrait mode. Then you add #2x to the base name of the hi res version, this would account for older iPhone screens.
Once you have the image placed correctly, resizing should be unnecessary. You can have the image automatically resize width and height using the little arrows on the layout page -- that's a bit hard to describe. It can also be done in code -- if you still need that I can provide a sample.
Maybe you need to set all AutoresizingMask in order to resize the UIImageView properly on each view. And to main aspect ratio u should use either AspectFill or AspectFit on the contentMode.