I'm new to xcode storyboard. I have a viewcontroller that contain two label of same width, but label 1 is 80px in height and label 2 is 40px in height.
I want those two labels to auto expand in height depending on whether they are displayed in horizontal or vertical size class, but I want label 1 and label 2 to keep their height ratio of 2:1.
I know the steps to take if I wan't both labels to be the same height (control drag from one label to another, click equal height, and go to size inspector and set their content hugging priority to 200) , but I don't know the steps to take when I want the labels' height ratio to be 2:1 and to auto expand in height depending on whether it is displayed horizontally or vertically.
I want the two labels to expand, not the numbers below the labels
If you want label 1 to be twice the height of label 2, then control-drag from label 1 to label 2 and select Equal Heights from the pop-up menu. Then find this constraint in the Document Outline and edit it in the Attributes Inspector on the right. Change the multiplier to 2.
If you pin the orange label to the top of the screen and pin the bottom of label 1 to the top of label 2 and pin the bottom of label 2 to the views below, then these two views will fill in the space and maintain their relative vertical sizes.
To set the aspect ratio, Ctrl+drag from one point to another on the same view. Enter the aspect ratio in the multiplier.
For auto sizing, set the number of lines in the label to 0. The label will expand in the direction without a constraint (or the direction with the lowest priority constraints).
E.g. if you want the label to expand vertically, leave off the bottom constraint. To expand horizontally, leave off the right constraint.
You can simply do this :-
Take two labels:-
Click on first Label and add the following constants:-
now your label1 will look like this:-
Click on second label and add the following constants :-
Now both of your label will look like this:-
Update the frames :-
And run your App:-
In Landscape
In Portrait
Note: if you want to set them in there ratio you can do this
Related
I have a requirement to create 3 square buttons at bottom of the page. All of them must be aligned and their size should be square.
So far, I have created a horizontal stackview and created autolayout constrains 50 from the left, 50 from the right, 10 from the bottom and set the stackview height as 60.
How can I create square buttons, since the stackview subview width is dynamic and determined at run time?
How can I set an equal aspect ratio for these three buttons?
Don't set the stack view height; let the content determine that.
You haven't said exactly how you want the buttons laid out, but I assume you want them equally distributed.
Put the buttons in a horizontal stack view
Constrain the leading, trailing and bottom edges of the stack view to the superview
Set the stack view's alignment to "Fill" and distribution to "equal spacing"
On each button, create an aspect ratio constraint between its width and its height of 1:1
If you want a minimum height for the buttons, set a >= height constraint on one of them
If you want a fixed height for the buttons, set a = height constraint on one of them
I think the only thing you are missing is setting the Distribution in Attributes Inspector on your Stack View. Set it to distribute equally as shown in the image below:
To set the height, you simply need to set a height contraint on each button. Click the tie fighter looking icon and set the height for each:
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
I used the following constraints to build one screen for my app. However the icon buttons get messed up in different screen sizes (screenshots below). Is there a way to rectify this?
1- Give equal heights and equal widths to all 4 boxes.
2 - For first one-> leading, top,
- For second one(travel and place)-> horizontal spacing to 1st one,leading and top
- For third one(activity)-> vertical spacing with 1st one ,horizontal to utilities and leading
- For fourth one-> trailing , vertical spacing to 2nd one and horizontal spacing to activity
What I would do is:
Set a proportional size (width and height) to the first button, maybe 40% of the container.
Then for the other 3 buttons, you can set them to the same size as the first.
Add some space between them.
And thats it.
1 - Take two views as two rows
2 - Let for first view (row), add two subviews , give the width of first equal to width of superview and multiplier 0.5 , let the second view align leading to first view trailing and width equal to first view
3 - add the button as subview in each view with top , right , bottom and left spacing as desired. Repeat the same for 2nd button in 2nd view.
4 - Repeat the above steps for row 2 view
hope this helps
These are actually pretty straightforward when you think about how all the views are supposed to relate to each other. I made a demo storyboard to show you how I'd wire it up. The key things:
Each box has a 1:1 aspect ratio.
Boxes in a row have equal widths to each other
Each box is constrained on both sides to the edge of the view or each other
The icon's height is set to a % of the box's height
The labels are pinned to the top, right, and left of the box
Obviously you'll want to adjust your styling as appropriate, but that should get you the effect you want.
I am not sure why but I have having so much trouble with constrains and auto layout. I have the below view and I want to make it display as is shown but every single approach I take to get seems to be incorrect.
I have been following this tutorial online Auto Layout Tutorial in iOS and I am rather trying to describe my constraints. Following this technique this is what I have:
Description of my constraints.
Label:
Centered in the view
51 from the top
All images:
Must have equal height and equal width.
Are separated from the left and right by a 0 gutter.
All inner gutters separating the images are 12.
I have also included my storyboard.
storyboard link
for this you just declare height and width of the first imageview with respect ViewController use equal heights and equal widths and then change in the multiplier default it will be 1 adjust to your size then for the remaining imageviews you just give equal widths and equal heights of the first imageview.
If you want keep height and width constant , don't pin it, just use horizontal centre constraint. Pin it up using auto layout , hope this is helpful.
You are set image height and set image bottom constraint and does not set label height that you are many choice
Set your label height because you run iPhone 4 or 4s that your label doesn't display.
remove your image bottom constraint because you are set fix image height.
you image doesn't fix height that remove your set image height and all image select and set equal height constraint (all image height same).
Better You should move that four image views into a uiview(childView) .Make sure that 4 image views are the subviews of UIView.
-Add equal width and hight constraint to SuperView from the childView.
- Add multiplier value for the EqualHight and Equal Width constraints by selecting both constraints on storyboard(like 1:2.1,1:2.2).it may keep the same distance in all orientation
Add Y position and X position by trailing space and leading space, centre vertical in container.
Then Select the 4 uiimageviews and make sure they have same width and hight,after that
select 4 image views then click the pin button and check the equal width and equal hight.
Add leading ,top and trailing space for image1
[1,2]
[3,4]
add trailing and top space for image 2
add leading ,top and bottom space for image 3
add trailing ,top and bottom space for image 4,
Please look at the ScreenShot attached for wCompact|hRegular for different screens, I am trying to make it working since hours but not getting any success. My requirement is that at the top there would be a label with some predefined margin. Although the Label content would render at the runtime, but I know the content size, so resizable label isn't needed actually I think. Now there would be three row at equal distance. In first and third row, there would be two buttons with equal height and width and in second row there would be button aligned horizontally. I have set the buttons image and text in storyboard. Control Alignment are set to Horizontal | vertical. Constraints for label are:
Pinned top space to superview, leading and trailing space equals to:8(superview), height equals:90.
Constraints for Button(View Transactions) are:
top space to label, bottom space equals to:8(New Launches Button) leading and trailing space equals to:8(superview) and 8(Place Request Button) respectively, and equal width and height for all buttons.
Looks fine for 4.7 and 5.5 But not satisfied with the output for smaller screens. As u can see resizing of buttons image not working properly(Larger space between button's image and text). One more thing is I don't wanna set the height of the label, cause it seems like a wrong practice in AutoLayout. Any help would be much appreciated.
You should set the Aspect Ratio for the Buttons, not just the equal width and height. In that case auto layout wont shrink the images.
Really you should put this into a scroll view so that if the height is too great the user can still see everything by scrolling. You should also not set static heights on labels, you should allow the intrinsic content size to apply.
Add a subview to your new scroll view. Pin the width of this subview to the width of the scroll view. Do not pin the height.
Add all of your buttons and labels to this new subview. Pin them to the edges of the view and allow the intrinsic content sizes to apply limits. Set various items to have equal widths and heights. Do not set explicit heights or widths (do everything by proportion or equality so auto layout can choose good sizes).