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.
Related
Novice that has been stuck on this problem for 2 days (please help!). I have an image that is much wider than the screen. I want the user to be able to scroll horizontally on the Image, and also want the image to be a specific height while maintaining it's aspect ratio.
Currently the UIImageView is nested within the ScrollView. The ScrollView has constraints to the Safe Area in all 4 directions, that place it in the upper half of the screen (250 from the bottom of the Safe Area). The ImageView has all 4 constraints of 0 to the "Content Layout Guide" of the Scrollview, and a 5th constraint of having an equal height to the "Frame Layout Guide" of the ScrollView.
I initially tried to set the image Content Mode to "Aspect Fit". This maintained the aspect ratio and set the image with the desired height within the ScrollView, however left a huge amount of transparency either side of the image so the user has to scroll for a while before seeing the image. For this I could not find a solution that contained the scrollview within the bounds of the non-transparent section only, so I then changed the image Content Mode to "Aspect Fill".
This removed the transparency either side but the image is now too tall and goes off the screen vertically. I have set "Clip to bounds" on the ImageView Size Inspector and also set it to true in code, but the image is still to tall and outside the height constraint specified. I also used:
gym_imageView.sizeToFit()
scrollView.contentSize = gym_imageView.frame.size
But none of this is fixing it.
My expected result was that the image with original dimensions (W: 12064px, H: 1696px)
Would resize itself to the constraint height (0 to top & bottom of Content Layout Guide of Scrollview, which in turn is constraint 0 to top of Safe Area, 250+ to bottom of Safe Area) while maintaining aspect ratio.
Any ideas?
The Content Mode changes how the image appears in the imageView, but it does nothing to resize the imageView itself.
You should set an explicit aspect ratio constraint on your imageView with a multiplier of 12064:1696. Then Auto Layout will be able to calculate the correct width of your imageView based upon the fact that it already knows the desired height.
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
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 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..
I have a few UILabels in my view with their height set using sizeWithFont:.
I set the autoreszingMask to flexible width and height, however on rotate the width changes (am assuming because self.view's width changes and its set with a width relative to self.view) but the height of it doesn't change to fit the content again. This results in a large white space at the top and bottom.
Just wondering how I would go about re-sizing the UILabel on rotation? Is there any automatic way of doing this, or is there a way of getting all UILabels and re-doing sizeWithFont when the device is rotated?
The UILabels are subviews of UIView heirarchies used as headers for sections in my UITableView.
Thanks
Tom
You should really send sizeToFit to any UIView, especially UILabel, instead of forcing some arbitrary size on them.
The best approach is usually to first set the maximum width and current height, then send sizeToFit, then adjust the width again if necessary. In case of multiline labels it looks like the most foolproof way to avoid layout bugs.
The problem was having a flexible left and right margin on a slightly offset uilabel.
If the label isn't centered then you need to choose left or right and set the flexible margin for one of those.