Here is the screenshot:
How do I apply constraints, so that
the red view stays at same height, independent of 3.5 or 4 inch form factor
the green and blue are same width and same height
the green, blue and red have the standard spacing to the containing view
the red, green, blue have the spacing to each other
the green aligns to the red on the right side
the blue aligns to the red in the left side
The app runs only in portrait mode. XCode 5 and iOS 7.
Thanks
This is so simple if you give it a try.
For red, fix its left, right & top value as in container.
For blue, fix left & bottom, similarly for green, fix right & bottom with respect to parent views.
Ctrl+drag from blue to green & select height option from popup. Next time repeat for width.
For red, fix the height from constraints.
ctrl+drag from blue to green & set its right position.
Ctrl+drag from green to red & select top position.
Let me know if it does not work for you.
These constraints in visual format will do what you want...
#"|-[redView]-|"
#"|-[blueView]-[greenView(==blueView)]-|"
#"V:|-[redView(==100)]-[blueView]-|"
#"V:[redView]-[greenView]-|"
If you add this set of constraints (either in Interface Builder or code using visualFormatLayout) then you will get what you want.
Of course, these assume that you're just using the standard separator spacing and a red view height of 100.
The blue and green will then adjust their height according to the screen size.
This layout is really easy though. You should be able to work this out without asking. Just draw it on a piece of paper and work out what info the system needs to make it work.
In fact, in your question you have just provided a list of constraints for your view. Just use Interface Builder to insert those constraints one by one.
Related
Actually, I made the view showed below. But every time I run the app on different devices they're moving their places. I added constraints by using Add Missing Constraints. You can see the problem I have. Can I solve it by drawing all storyboards for each device and how?
Screenshots
Here's how to get the view the way you want it using Storyboard. I'm assuming you know how to add constraints in Storyboard.
For the yellow circle, set height and width constraints Next add a center horizontally constraint. Finally pin it to the top.
For the green and blue circles set height and width constraints. Now set the height and width of the green circle equal to those of the blue circle. Pin the green circle's edge to left edge and the blue one to the left. Finally pin both to bottom.
Alternatively for the latter circles, you could choose to add both to a third view with the same constraints in said view and center the extra view horizontally while making sure to set its height and width constraints.
I'm trying to create a complex user interface in storyboards. All I get is a bunch of errors and I do not know exactly how to resolve them, because suggested constraints are not appropriate. This is link to my project: link. Final layout should look similar to that in an image:
Short version: layout should look like the one in the picture on any screen size. Image View and coloured view should both become bigger on bigger screens. All image view should be the same size.
Long version:
All image view should be the same size.
The big white view will should always take the upper half of screen. I know how to do that. The red view should appear exactly in center of its superview,the big white view.
Two blue view should have exactly the same width as the red one. Width of those 3 view should match the height of the 2 green views. Meaning, the taller the screen is(taller screen means higher green views), the wider the space between ImageViews(those who has Image word in it, that basically means wider blue and red views).
The white views at the left and right fill the space form left image view to left margin and right image view to right margin.
All views are pined with 0 to its first neighbour. Blue and red are pined horizontally, green views are pined vertically. Also the bottom and upper image view are pined to bottom and top of superview(big white view) respectively.
I do not want to set the height and width constraint on image views, because they should be detremined at runtime.
I would really appreciate if anyone here could help me out!
I have uploaded the solution on GithubRepo, you can have a look.
1) "Also the bottom and upper image view are pined to bottom and top of superview(big white view) respectively" this requirement can not be satisfied
2) Spacing on left and right can be decrease/increased by keeping overall requirements satisfied
I've struggled with this for years, so I finally decided to create a view to manage all these resizes like a HTML page: ETFlowView.
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 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.
Right now I'm studying auto layout and I'm facing a problem that I can't solve.
I have a view that loads correctly in a 4 inch device (left view) and I'm trying to adapt it for a 3.5 inch device, to make exactly like the right view on the image:
The only difference is that the green, orange, black and pink views should shrink a little to maintain the same size for the two above views.
My problem is that I can't figure out a way to do that using the constraints.
This is what happens with the constraints that I already have:
I already tried to pin the bottom space to superview of the black and pink views to 0 hopping that the views would shrink to fit the screen, but this does not work and give me a lot of warnings on Xcode.
You need equal-height constraints between the green and black views, and between the orange and pink views.
Let's construct your layout from scratch. It's usually easier to set up constraints if you make your views smaller than you want, and edit the constraint constants to size them up. So we start with five views:
This layout of the views here is important! Note that the orange view, for example, is strictly to the right of the green view. This means if I ask Xcode to create a constraint from the green view's trailing edge to its nearest neighbor, that neighbor is the orange view, not the superview.
It is helpful to name the views in the document outline. To name one, click its entry in the outline, press return, then type the name:
Select Blue. Give it constraints with constant 0 on the top, leading, and trailing edges, and a height constraint:
If you update its frame (as I did in the dialog), Xcode will lay it out like this:
Next, select Green. Give it constraints with constant 0 on all four edges. Top should go to Blue, leading should go to superview, trailing should go to Orange, and bottom should go to Black. You can check which view is on the other end of the constraint by clicking the disclosure triangle:
Don't update Green's frame yet! It should look like this:
Next, do the same for Orange, Black, and Pink.
Once you've created the edge constraints for all four of the bottom views, select all four of those views (Green, Orange, Black, and Pink). It should look like this:
With all four selected, create equal-width and equal-height constraints:
Note that this is overkill. We don't really need the equal-height constraints between the left and right columns, and we don't need the equal-width constraints between the top and bottom rows. But this answer is already a mile long and it's much shorter to create all the equal-size constraints in one action.
Now it should look even messier:
Select the top-level view or the view controller and choose Update All Frames in View Controller:
Xcode should lay out the views like this:
If you click the form factor toggle button, Xcode should lay out the views like this:
I've uploaded the final storyboard to this gist.