Imagine you have four or so views, all width 100, different heights. You have a wrapper view W which holds them all.
A |
B | W
C |
D |
the heights of the small views can change. At that time you want them all to move, float, appropriately, and resize W.
Now, I was just about to write a few lines of code to do this.
So .. (1) you'd have W find all the subviews and list them in order from top to bottom. Then (2) each time there is a change, you'd (3) reposition each of ABCD. the position of each one is the sum of the heights of the items above it, and (4) resize W to the sum of all heights.
Now that's all fine but -- idiots reinvent the wheel!
Am I missing something obvious in iOS? is there already a package everyone uses to do this all the time? Or something built in? What's the situation?
(Note that of course frustratingly, for our Android friends this is built in! And of course any web-html system does this automatically.)
What's the right engineering solution for iOS views here? For the record this is iOS7+ only, no old-fashioned stuffs need be covered, if it makes a difference. Cheers
(1) you'd have W find all the subviews and list them in order from top
to bottom. Then (2) each time there is a change, you'd (3) reposition
each of ABCD. the position of each one is the sum of the heights of
the items above it, and (4) resize W to the sum of all heights.
You can use constraints in Interface Builder for that whole process, no code required. Do this:
set the width of subview A to 100
constrain B, C, and D to match A's width
add vertical spacing constraints between A and B, B and C, and C and D to maintain their relative position
add a vertical spacing constraint between W (the superview, shown in gray) and A
add a vertical spacing constraint between W and D
add leading and trailing space constraints between W and view A
You'll end up with something that looks like this:
The constraints editor in Xcode isn't completely intuitive, but it is easy to use once you understand what you can and can't do with constraints in IB and when you need to use code to set up the constraints.
Related
I'm trying to make constraints via Snapkit in a table view cell but my problem is I need to find out which element has max y position (The lowest one).
I have an UIImageView and next to image view UILabel elements. The label text is dynamic and could be very long or very short. Below these 2 elements, I have another one that should be aligned based on the label height, either taking image view or label.
My question is how to find which element (UIIMageView, UILabel) has a bigger Y position.
To be more clear I attached a draw with simple two cases.
Set a greaterThanOrEqualTo constraint on both elements.
In "plain language":
AnotherElement.top >= ImageView.Bottom (with constant of 12, or however much space you want)
AnotherElement.top >= Label.Bottom (with constant of 12, or however much space you want)
I have a problem with multiplier and cannot understand how this feature works. For example i have view has 6:1 multiplier(To SuperView.Leading) as below.
When i change the multiplier to 2:1 it seems like below picture.
My question is in the 6:1 relation what does 6 and 1 mean. And also in 2:1 relation what does 2 and 1 mean. Similar consider you have three view like the picture below. Totally there 4 blank areas between subViews and superView. How can i say every blank area must be the SuperView.Width / 6 (and every blank width must be equal)
Thanks in advance.
When working with autolayout, especially when you are working with proportional layouts, you have to use multiplier.
I have to explain here some mathematics.
We know straight line equation.
Y = Mx + C
In above equation. Assume M is your multiplier and C is your Constant.
Thus suppose you have superview (in case of iphone 6s plus) of
414(width) x 736(height) size. On that view suppose you created subview.
Now if you want subview size exacly half of superview size, then just drag two constraints from subview to superview. (i.e. Equal Width and Equal Height)
See this Image
Obviously now you will get an error. just like I'm getting. (See below Image)
Now click on both of the constraints one by one, and use multiplier as 0.5. Then use above straight line equation.
Here 0.5 means you want width of subview = superviewWidth / 2.0 i.e. 207 px.
In other words you can provide multiplier as 207:414 also.
Y i.e. subviewWidth = ((M i.e. 0.5) * (x i.e. 414 i.e. superviewWidth)) + (Constant i.e. Zero)
Finally you get subviewWidth = 207 px
Similarly do for height of subview. Provide multiplier 0.5 or 368:736.
When done all things, don't forget to click on subview and update frames.
This way constants and multiplier will works.
Multiplier is there for creating Proportional Constraint. Auto Layout calculates the first item’s attribute to be the product of the second item’s attribute and this multiplier. Any value other than 1 creates a proportional constraint.
In your case, 6:1 means multiplier is 6/1 = 6. Which means
view.leading = Superview.leadingMargin*6
replace : with / - you will understand what it means.
In my example multiplier is 1:2 = 0.5
height red view is 0.5 times greater than the superview
When it comes to the multiplier it depends on what constraints you are dealing with. You have the views leading constraint connected to the superview leading margin. When the constant is 0 that gives you an 8 points gap. When you change the multiplier you will be effecting that gap. That's why when you do 2:1 you see it go to the right 8 points. Essentially multiplying the original 8 point gap by 2. If you do 1:2 it will go from 8 points to 4 points, essentially dividing the original 8 point margin by 2.
Now when you look at Adrians example, he only multiplied it by 1:2 so how did that make it half of the entire screen? That's because he did that on the height constraint. The view was originally the full size of the superview, but when he multiplied it by 1:2, he indicated that he wanted it to be 1/2 of its original height. Giving you that end result.
So the important thing to understand is that multiplier may seem to act different depending on the situation but that's because it depends on what constraints you are dealing with.
here is a good answer that goes into this more:
Understanding multiplier in auto layout to use relative positioning
the link details how if you wanted to make the leading edge 10% and trailing edge 90% you would need to set both constraints in relation to the trailing edge.
Multiplying the trailing constraint by 0.9 and the leading constraints by 0.1.
In regards to your question about the equally separated views, you should use a stack view. They were made for situations like this so you didn't have to deal with all the constraints. You just need to set constraints for the stack view and configure it accordingly.
I'm having trouble setting up constraints.
This is the thing I am trying to achieve:
I have 2 objects A and B. I want there there to be a maximum of 100 points between A and B if its a larger screen, or less if its a smaller screen.
Also, I want there to be a minimum of a 20 point margin from the main view controller. So on a smaller screen the minimum spacing will be 20 points, and on a larger screen the margin can be as wide as needs in order to satisfy the space between A and B at 100 points.
To illustrate how I want it to look on various screens:
4 inch screen
I want there to be a 20 point margin on either side and the middle (space between A and B) can be variable, i.e. 100 or less.
5.5 inch screen
The margins can be variable and expand as large as they need to, but the middle section (space between A and B) can be a maximum of 100.
Any help how to achieve this would be greatly appreciated.
This can be achieved with help from three dummy views and two width constrains with different priorities. I set up a test project to test my thought. check it out to see whether it's what you needed
https://github.com/dopcn/testSeg
I have four UIButtons in a parent view, next to each other. The leftmost and the rightmost one will always be smashed into the sides of the parent view, but I'm not sure how I should approach positioning the middle two buttons with constraints.
What I want it to look like:
______________________
[b1] [b2] [b3] [b4]
______________________
With regular constraints on x and y I'm able to place b1 and b2 on the right place, but b2 and b3 requires some magic.
By using constraints on them, telling them to stick to each side, it would look like this in landscape(or on bigger screens):
______________________________
[b1] [b2] [b3] [b4]
______________________________
Without equal spacing. What I need is something like the 'flexible space' which is used for UIBarButton's, but in a regular view. As I can't find anything like that, I'm guessing there's some constraint-magic I need to understand.
I COULD make the buttons big enough so that they are all constrained together (so b2 and b3 are touching, and they all have equal width), but I don't want that. I guess a solution could be to create four ´container´-views in those sizes (big enough to touch each other) and simply place each button in the center of each UIView. But is that really necessary? Feels like such a waste..
You could add UIViews where the three flexible spaces need to be:
–––––––––––––––––––––––––
[b1] * [b2] * [b3] * [b4]
–––––––––––––––––––––––––
Then for each of the spacer views (denoted by *), add constraints such that the trailing and leading spaces are 0 and give them a constant height. Finally, add a another constraint to make all of their widths equal. That way, the spacing between each button will always be equal regardless of the width of the screen. Then you can just make the spacer views transparent so they don't appear in your layout.
In my existing app, I had 5 of my UIView derivatives (labels and buttons) laid up horizontally, i.e. on 0 degrees. They were all aligned on their left edges (so that button1.frame.origin.x = button2.frame.origin.x and so on.)
Now, for update purpose, I need to rotate all 5 of them, by 9 degrees anticlockwise.
I achieve the the rotation easily.
But I can't get how adjust their left edges so that they would all be aligned again after rotation.
The requirement, in summary, is this: The first control need to remain fixed (acting as pivot point) - the 4 others need to move right in order to maintain left alignment after rotation.
I tried putting incremental x value to each of the last 4 controls (keeping the pivot x fixed) but so far don't achieve exact alignment.
After rotation, it looks like all of them are center aligned, instead of left aligned which I really want.
I know what I really want, but just looking for a smarter way so that it won't be ugly like it is now.
Read about layout constraints. That will really help you in many ways. In layout constraints the concept is very simple like
Control1.attribute = Control2.attribute + C
So you can literally program each controls attributes and achieve a fine grain control. You can then code it such that all the controls X is same as other controls X, they are all same distance from another control etc.
You can have multiple layout constraints and the system will try to satisfy as many as possible.
But the only thing is that this is possible in iOS 6.0.