I have a background image and I need to put buttons in it. I have tried auto layout as well by fixing it's height and width (The button text was not part of the background, has been added manually), but it is not working for all screen sizes. I want two buttons equidistant from line that can be seen(like in iPhone 4 inch screenshot, line is part of the background). How can I go about doing that? Are there any other tools which might be helpful? I am using swift
Best way to do this is to add a hidden view which has a background color of clear. Add a constraint for this which centers it horizontally and a constraint which positions its top where you want it.
Make the width of this transparent view the space you wish between buttons or leave it as 1 wide if you wish and use offsets in the constraints described below instead. Make the height 1 so it takes up no space.
For the buttons align the top of the buttons with the bottom of the transparent view. This places the buttons vertically.
Finally pin the trailing edge of button 1 to the leading edge of the transparent view and pin the leading edge of button 2 to the trailing edge of the transparent view. Set the offset for the pins to be the distance you want the buttons from center if you gave your transparent view no width.
On all screen sizes, the buttons will now be relative to the center.
If you want to have them equally space out, you can add transparent views to the left and right of the buttons and pin them together so they act like spacers. So superview->spacer->button->spacer->button->spacer->superview.
Using the spacer approach, select the 3 transparent views and add a constraint for equal width. You buttons will now be spread apart equally.
Related
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I'm struggling constraining a set of button (see below), so that they the vertical space between them is equal. I am trying to create a subview with buttons that mimics a keypad. I constrain the top center button to the horizontal center and top space to view. I constrain the bottom center button to the horizontal center and bottom space to view. How do I get those middle 2 buttons to be evenly spaced? On android I would accomplish this by using dp (density independent pixels), however, if i try to constrain these buttons by vertical spacing, it will be different on every display because the pixel densities are different.
I think you look for a UIStackView so , compose your purpose with a set of horizontal stackviews nested inside a vertical stackView , Note this suggest for some items , if you will have too much buttons you can try UIScrollview/UICollectionView , key property of stackView that will solve your issue
distribution:FillEqually
I am building a new app using Xcode 6 and auto layout. I have only just started using auto layout and this maybe a really simple issue to fix but i have been going around in circles trying to find the right way.
I have a view played out as follows (don't have the rep to post images so have used a link instead)
http://files.parsetfss.com/48d8d860-e1c2-4671-ac59-03f46eee316b/tfss-23f6bdb8-3e5b-4ce0-b7ed-b1daf0006f33-Screen%20Shot%202015-05-22%20at%202.56.03%20pm.png
I have set constraints on the red box to keep its left,right and bottom the same distance from the superview and another to keep its height the same at all times. I then set constraints on the black and green box's keeping there top and out side edges the same distance from the superview and there bottom edges the same distance from the red box.
The aim is that the red box stays the same height and changes width with the device size and orientation, With the green and black changing height and width to fill half of the rest of the screen each and meet in the middle.
Now i have set constraints to keep the black and green the same distance from each other, and it worked as i wanted however i get warnings that the black and green boxes have ambiguous positions and widths.
The only way i have come up with to get rid of the warnings is to place a label (alpha set to 0 so it can't be seen) that is constrained to the centre of the screen then set the black and green box's contains based on the label. This works and is warning free but i am sure that this is not the best way around the issue.
So the question is how do i do this with out errors and with out placing an unnecessary hidden label.
As the view at the bottom has a fixed height...you just need to pin all edges of the all views and just need to give equal width constraints to the black and green views...just like below image...
And the output in different screens...
You need to give the black and green boxes an "equal widths" constraint. Select both boxes, and choose "Equal Widths" from the pin icon at the bottom of the canvas.
As per your requirements
1 view Black:
2 view Green:
3 view Red:
Follow these links Autolayout or Autolayout programatically
This might helps you :)
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.
I am struggling to align 5 items in a row using auto layout as shown in the storyboard.
I can align the 3 items highlighted below but the 2 inbetween just don't want to align.
I have tried pinning the items to the buttons next to each of the items and setting the size but they refuse to align properly. Have also tried setting the 2 misplaced buttons to the leading and trialing container as shown below but these still do not align properly (or even closely).
Am I doing something wrong?
The way to do this is with spacer views. You need to add a UIView between each of your views and give them each horizontal spacing constraints to the view on either side. You'll need to edit these constraints so they are between the spacer's leading or trailing edge, and the view's centerX (the constant value should be 0). Give the spacers equal widths (but no fixed width), a fixed height, and a clear background color. You views on the left and right sides should have constraints to their closest edge, but the center view shouldn't have a centerX constraint (it's not needed). This will cause the views to be equally spaced in all screen sizes, and in both orientations.
Your best bet might be to create another superview (UIView) within which your button items are located. Then you can align your buttons more fluidly within that superview that encapsulates only those buttons rather than just wrestling with the constraints within the card superview, which it seems you are doing. Just make the background of that UIView clear, place the buttons on it, and it will appear exactly the same and you'll have a better way to anchor your views. This could also come in handy when you're targeting the functionality of just those buttons so you can grab them from the subviews of the button bar superview.