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
Related
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.
So I'm just trying to wrap my head around Auto Layout; I understand how to use constraints, just not how to apply them appropriately. In the picture below I had set no constraints and simply want this simple design to resize correctly on all size classes (Horizontally and Vertically).
http://tinypic.com/r/2ymxbop/9
What constraints would I need to put in to have these squares resize appropriately on all screens (horizontal/vertical) and can you do this in the ( W:Any H:Any ) size class or do you have to set constraints for each individual size class?
Thanks!
One size class is all you need in this case.
Set a constraint for each of the 4 gaps between the rects (i.e. the space between the top 2, between the top-left and bottom-left, ...).
Set a constraint for each rect to its 2 closest outer edges.
Now you've set four constraints for each rect - and that's all you need!
For that case: follow the steps
1.Add four uiview to screen, two top and two bottom.
2.In your case the view not touching to bottom layout guide,so you have to give fixed height.
Start the add constraints to views.
All views are correct width and height.
3.So take first view from left top,give leading space ,top space and adjecent spacing to right top view. And select the pin button from the canvas below right side option availabe, select height ,give how much height you need.
4.Now select right top view ,give constraint to top layout guide and trailing space.and also same height what you selected before for view one.
5.Now view three ,left bottom view , give leading ,spacing to top view and right spacing to fourth view and select same height .
6.Now fourth view, give spacing to top view ,trailing to container and select height.
Almost completed.
7.Select all views at once ,give equal withs(option available in pin).
lastly some warning will shows ,do update frames.
I want to make the center of the head imageView with the bottom of the blue title imageView's keep alignment.
How can I do it by using Autolayout?
screen 4.0inches
screen 4.7inches
Step 1: Create your views as shown below.
Step 2: Set background view constraints to all three edges.
Step 3: Set your own ratio. Since, you mentioned that you don't have known height.
Step 4: Select your center view and add width & height constraints as you want.
Step 5: Set center view as horizontal center in the superview as shown below
Step 6: Now select both background view & center view. Set align constraint to "Vertical centers".
Step 7: Now, you can see a constraint with a warning with wrong constant like below. Select that constraint
Step 8: In the Connections inspector, select the "second item" and change it to "bottom"
Step 9: That's it. If there is a warning, update your constraints. You can check in different simulator with any screen sizes.
You don't need any super views or new sibling to accomplish this. Easy way to make any view to center and keep it as bottom/top of another view.
There are a lot of ways to do this. I'll just show one of the ways.
OK, Let's do this step by step.
Step 1
First, in order to align the center of the oval image with the bottom of the rectangular image, we need to embed the rectangular view in another view in which we could name as the Container View.
This container view will have the ff attributes:
transparent background color
width is equal to the screen width
height will be twice the height of the rectangular view(Later you
will know why).
For the constraints of the Container View:
Leading is equal to super view's leading
top space to super view is 0
Centered horizontally in super view.
set aspect ratio with self.
Once you are done, the constraints will look like this.
Step 2
Now for the rectangular image view, the constraints would be:
Leading is equal to the container view's leading
Top space to container view is 0
Trailing is equal to container view's trailing.
Set aspect ratio with oval image view
By setting aspect ratio with the oval image view. The change in size of this rectangular view will be proportional with the change of size of the oval view.
It will look like this:
Step 3
This time, the contraints of the oval view:
centered horizontally in container view
centered vertically also in container view
set aspect ratio with self
• Setting aspect ration with self ensures that when the rectangular view expands in size, the change in size of the oval view will not cause distortion.
This will be the result:
Step 4
There one very important view to add. This view will ensure that the rectangular view will always be half the size of the container view so that the center of the oval view will always be aligned with the bottom of the rectangular view. So, we call this view that we will be adding, the dummy view.
The dummy view will have the ff attributes:
transparent background color
width and height value should only be 1
The dummy view's contraints:
centered vertically in the container view
centered horizontally in the container view
width and height are fixed.
assign vertical spacing with rectangular view
This is how it should be done:
Alright, if you did the steps above you will achieve the effect.
This will be the overview of the constraints:
I hope this helps. :)
Proof that this works!
I ran it in the simulator... :D
iPhone 4:
iPhone 5:
iPhone 6:
iPhone 6 Plus:
This may help you. Totally based on AutoLayout, no extra view needed.
First set some constraints on the height and width and the location of the Cover image. (blue one)
It is 0.4 of total height, equal width of the width, you can see its constrains.
Then I fix the height and width of the Avatar (green) image, make it horizontally center in width.
Then choose both the cover image and avatar image, make them Align bottom edge.
Now it turns this.
Last step, choose the 'Align Bottom to Cover Image', and make the constant to be half of the Avatar image's height. Done!
This is the simplest way I've found now.
you have to apply autolayout Constraints with respect to your image not with your view.
To get more details
https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints
First I would place the background image and first WHILE HODLING SHIFT manually drag it until it is the right dimensions THEN tap the |o| looking icon at the bottom right of the screen I would uncheck the margins option and do left 0, top 0, right 0 and then bottom should be a larger number (should auto generate for you)
now place the 2nd UIImage...place it and size it how you like...now on the same icon |o| tap that and give it a height and width...add constraints...now go to the 2nd to last on the left (its like two stacked rectangles)..tap that and tap "horizontally in container...NOW tap the smaller image and hold control and drag to the larger image and let go...tap vertical spacing...
LASTLY....the far right icon which looks like a |o| but has a triangle...while one of the images is selected...tap the bottom "updtate frames"
If you have 2 views (fixed one and float one) and your float has a fixed height, you can set vertical-space from float to fixed, with -height/2 value.
example: if your button has height of 20, then set vertical-space to fixed-view with value -10
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).
I have a setup like this in the interface builder:
(iphone5 size). I want the buttons to stay in that layout if the screen size increases i.e widens (but the buttons stay the same size). If I pin the top two buttons to their respective container edges when the screen is larger they will be too far apart from each other. I have the bottom button increasing its size fine. How can I do this? I tried putting a transparent UIView between each button and the container edge, but couldn't get it working this way. Could someone give me a pointer on how to do this please? thanks!
Assuming you already have the width, height and y-constraints in place, to create the correct x-constraints you can try something along the lines of this:
check the Horizontal Center in Container option
choose your button and double click the newly created constraint Align Center X to
change the Second Item from Center X to Trailing
enter a constant value to offset the position
Do this for both buttons. The constant value of the second button should be the negative of the first one AND its Second Item should be Leading.
Result
This method will result in equal spacing on all size classes.
The only drawback is that the spacing is no dynamic. for that purpose you would need some placeholder view in between.
I would say there are two approaches you could take:
Assumption is buttons have constraints for width and height.
1) Use a transparent view which you center horizontally within its containing view. Then pin the left buttons trailing edge to the transparent view and the right buttons leading edge to the center. You have a choice as to how to define their vertical position.
or
2) Add a transparent container view to your main view and then move your two buttons inside this view. Pin the two buttons apart the desired width and then pin the other button edges to the containing view at size 0pts. Finally center the new containing view horizontally in the view. You will need to define the height of this container view from the top or bottom.
The second is probably easier to execute within storyboard.