could anyone of you give me a hint, how to implement autosize of a button with auto-layout?
To be more specific:
My button has 50x50px at iPhone 4s. How to implement this button, that its size increases on iPhone 6 plus screen resolution? Is there a kind of multiplier option?
Edit:
I want, that the button w/ 50x50px on iPhone4s screen is increasing proportionally at iPhone5, iPhone6 display.
Thanks.
BR
Use aspect Ratio. It's all about math. Before you jump into the action, let's figure out how we are calculating the proportion.
So, if you want your button to be 50X50 on a 400X600 frame, how will you find the proportion. Easy- your button's width will be 1/8th of your frame and your button's height will be 1/12th of your frame's height. That's it. Now you have your calculation.
Step By Step Instruction:
First make sure, you have the size class as "wCompact hAny". We should see, something like-
Now we are ready-
Select you ViewController and then select "Stimulated Size" in the inspector. There you will see your Stimulator's width and height. In my case, it is 400X600. You can change it to anything, and calculate your proportionality value accordingly.
Now, we need to position our button. I am just setting it at the middle of the frame. So, hold the "Ctrl" button in the keyboard, click and drag the mouse pointer from the button to the immidiate parent view which will give you a list of options.
From there, when you select the centre horizontally and the centre vertically option your button in the frame should look like this-
Now you can see some orange dots, but ignore that for now.
This is the part, where you will have your answer. To set the button size proportionally, you can use aspect ratio.
Again, hold the "Ctrl" button in the keyboard, click and drag the mouse pointer from the button to the immidiate parent view. This time select aspect ratio from the list.
Select the aspect ratio constrain from the constrain list to edit. You need to make sure that your first Item is Button's width and your second item is superview's width or vice versa. Remember, you want to set the button's width's proportionality value(multiplier) in accordance to the frame's width NOT height.
Now, set the multiplier to 1:8 if your 1st item is your button's width, or 8:1 if your 1st item is superview's width.
Do the 3rd step again. Select aspect ratio again, and select this constrain to edit. However, this time set your first Item as Button's height and your second item as superview's height or vice versa and change the multiplier to 1:12 or 12:1 accordingly.
Great, if you have followed unto this point then you are done. You should see something like above.
You need following three constraint
For X position : Leading Space to SuperView
For Y position : Align Center to Y
For Width : Trailing Space to SuperView
Check ScreenShow
Related
I am trying to do the constraints for these horizontals button. I want the ratio of size of buttons to be the same, and the icons to be of equal widths and heights of each others.
Any idea of how i can do that so these buttons resize properly according to the screen size? Thanks!
Make groups of UIView containing the icon and text. Lets call this container view
Place all the n container views inside your storyboard as you would like them to appear. Now:
To the left most container view add a leading and bottom constraint to the super view.
Now to the second container view add a leading space of 0 (or anything you want). Control + drag your second button to the first button. Hold down shift and select equal width, equal height and align bottom.
Now apply the same constraints as your second container view to all your n - 1 container view. n being the number of container view you want to add. Now to your last (nth) container view add, one extra constraint, which would be a trailing space to the superView. Now all your container view ought to have an equal width that will be determined depending on the width of the screen!
If you want to have a specific height or aspect ratio to all your container view. Just add the height or aspect ratio constraint to your first container view and all your subsequent views will get updated accordingly.
OR
If you wish for the height to be dependent on the screen size and not maintain a specific aspect ratio, then you will have to give the first container view a equal height to the whole view with a specific multiplier like 0.15.
You will also have to add appropriate constraints to the icon and label present inside each UIView
Edit: A much easier thing for you to do would be add the icon as an image to the UIButton and add the text as you would normally to the UIButton. The UIButton will appear quite similar to the screenshot you posted. And then just apply the constraints I mentioned above.
Set the width and height as ratio of the SuperView. Set if for one button and for the remaining buttons make the height and width equal to the first button for which you defined the height and width in terms of superview height and size. Use this SO Post to see how to set height and width as ratio of the superview.
Hope this helps.
It's Simple because your All buttons are in single Direction so you can use StackView.
Just simple first apply the equal hight and equal width to all your buttons
now select all the buttons and add them in the stackview
it will be in the right side bottom. (with the constraint icon)
now simple Apply add missing constraint. it will done the work by own and gives better result. (but take care here apply it from the all views in View Controller Section)
And now Bingo try this every Size will show same.
This will work same in simulator also.
The solution is very simple.
See the image below (5 buttons)
The first (blue) button is pinned to the left and bottom of the superview
Each of the other 4 buttons (red, black, green, pink) are top aligned to the first (blue) button
Each button is using a horizontal spacing to the previous button (with a constant of 0). So red button has 0 horizontal spacing to blue, black has 0 horizontal spacing to red, etc
The Last (pink) button is also pinned to the right of the superview
Finally all 4 other buttons are set to have same width to the first (blue) button
That's it!
As for you icons, all you need is to set them to have same width & height to the first icon you have
So I have an app I'm working on, but I hit a major problem. In this app we have several images. I'm learning AutoLayout, and I can make stuff appear the same on all device screens, except for the fact that the images (and for that matter, everything) remain the same size. I want them to get bigger and smaller according to screen size. I've tried everything I know. Help!
Here you can use propotional width and height to the superView. At first Ctrl drag from your imageView to superView and set Equal Height and Equal Width. And now set the Propotional height and width to the superView from the constraint list. Here you can set your height and width with Propotional to superView with Multiplier option. And finally set your x and y position of your image Final Image. Here I have used horizontaly and verticaly centered.
Using the image here as an example:
First, place your imageview where you would like it, in terms of how far it should be from borders of the view or other objects.
Then, click on the small tie-fighter like icon in the bottom to bring up the add new constraints window.
From there, click on the four links show in red inside the red box. These tell XCode that it should be "80 units from the left most object, 80 units from the right most, etc".
Now, when you change to different devices, it will always adhere to those standards.
However, depending upon the size you selected, it may not work under certain conditions such as being rotated to landscape, or in a split view on an iPad. This is where you get into the other size classes, which you access by clicking the text at the bottom of XCode that says "w Any h Any".
One item of note, do not select the image size in width or height in the constraints window seen below. Doing so will constrain the image size, invalidating the margins put in place.
This tree include the cicle is a UIImageView's image, but the text in the circle is a UIButton. When the device is changed, like iPhone5 change to iPhone6 Plus, the image with scale to big. The Button always move to the circle's outSide. How to Solve the problem?
Autolayout has a feature called propotion. It means that by selecting any 2 UI objects you can set propotion between them for any constraint such as width, height, etc.. In tour case also select imageview and button then move to the constraints view, double click on any objects width constraint i.e either button width or image width. There you can find a option called propotion. As per your requirement you want to have a button always inside the image view, means that buttom propotion should be less than the imageview propotion. So you can set 2:3, means button width is 2/3rd part of the imageview. Now button will be always part of the imageview irrespective of the device which you run.
You can Add proportional width and height constraints to your buttons relative to imageView like this screenshot
Here I have not added fixed height and width constraints to imageview, because image view takes width and height from its content i.e from image provided to it, if you want to fix height and width of image view then you can provide those too.
I am trying to arrange controls in the storyboard using constrains via Interface Builder ("Any Width, Any Height" case). I add there UIView, however, when I press update frames for this element (Selected Views case) according to the given constrains UIView disappears from my view. I guess it size becomes zero. Later on, it is not show up in the screen after the run. The issue is also reported in the issue navigator: Horizontal Position of UIView is ambiguous (marked with the green shape). Anyway, if I set the constrain for width or height (size parameters) together with the constrain of ratio, then the issue disappears, I can update frames, it shows up in the screen during the run.
I am adding the picture with the green marks to make the issue more clear:
The question is whether the parameters of the size are obligatory when I am setting the constrains.
Even if they are obligatory how I can make the size to fit different sizes of the screens or iPhone+iPad because if I set/fix the size it could too big for some screens.
The size is not mandatory. The warning tells you that you must set an X position for this view (constraint between the superView left or right border and the left / right border of the view itself). If you want the view to resize itself to fit each screen size you must set both left and right constraint without the size constraint.
You shouldn't used fixed size (width or height) for view that change size when screen dimension change.
If you want view that fix aspect ratio you can set size that relative to Superview's width or height using:
1) leading and trailing and make sure that
view.leading = superview.leading + fixed_margin
view.trailing = superview.trailing - fixed_margin
and not other way around.
2) equal width or equal height with multiplier, constant relative to superview as you want
So you don't need evil size class.
I am attempting to create a keypad for an app that I'm playing with. The keypad will be a standard four rows with the numbers 0 - 1, a decimal, and +/-. Nothing special. I am attempting to get it to only take up 1/2 of vertical screen space. Using constraints, I pinned the bottom left button to the left and bottom of the screen, and the bottom right button to the bottom and right of the screen. I set the width and height of the left button, and then used Aspect Ratio on that button. On the remaining bottom buttons, I control-drag left to the one next to it, and select Horizontal Spacing, Center Y, Equal Width, and Equal Height I then control drag from each of the buttons above, to the button below, and select Vertical Spacing, Center X, Equal Width, and Equal Height from the list of constraints. My thinking was that the bottom left button would adjust based on the device selected, and then all of the other buttons would adjust based on this button.
Apparently, I was wrong. The buttons are nicely set up in that they remain above and next to one another, without any spaces, but they are not taking up exactly one half of the screen. Depending on the device selected, there is proportionatally more or less space above them. Apparently, I am either missing something, or I am totally approaching this the wrong way.
Any advice on how to accomplish this task would be appreciated. I'm still learning about how constraints play with one another, but I thought that my idea was sound. Make one button adjust itself to the correct size (Aspect Ratio on the bottom left button), and then force all of the other buttons to maintain the same width, height, and distance.
The bottom left button is not going to adjust its size, because you gave it a fixed width and height. The buttons should not have any explicit widths or heights set on them. They should all be set to the same size, and as long as you have constraints going from the left edge to the right, that should set theirs widths. Their heights will also be set by virtue of the aspect ratio constraints.
This will cause the buttons to just their size based on the screen size, but it doesn't make them be half the height of the screen (that could only work for one screen size with a particular aspect ratio). To make the buttons take up half the vertical height of the screen, you would probably want to enclose them in a view that was that height. However, then you'll have a conflict between the aspect ratio of the buttons, and the aspect ratio of the screen. You either need to give up on the aspect ratio, or, not pin the right side of the buttons to the right side of the screen, and use an aspect ratio that will make the buttons all fit on the screen.