How would I go about creating a layout like this using autolayout?
The icon is UIImage, text is UILabel.
The label text can vary in width, but will always be single-line. How do I force the label to scale with the text horizontally and UIImage to be immediately to the left of the label?
I have tried using attributedText. I also tried views as containers and a horizontal stack view, but failed to get the result I wanted. What are the other options?
That should be absolutely no problem - just put in the image, make layout constraints to the left and top of the view, then add the label right to it, and make layout constraints between the right side of the image and the left side of the text.
To restrict the label width you can add a constraint from the right side of the label to the right side of the view, if you want to make the label as small as possible with a greater-than sign.
EDIT
If the whole should be bound to the right border of the superview, put both in a view, align the view to the right border of the superview, and make a constraint from the right side of the label to the right side of the view. The view will resize accordingly when the label resizes.
I went for a solution where I added a third view as the leftmost element in a horizontal stackview and set the stackview's distribution as 'equal centering'. It actually fit well with the rest of the planned layout (all elements are used efficiently). Thank you for your help guys.
Related
I am making a note taking app in xcode8 for iOS 10.2. The note is consist of a textfield, textview and imageview. I am adding textview and imageview in separate scrollviews (to provide the facility of zooming and adjusting image). Then I have added both scroll views in a stackview to ensure that imageview and textview stands side by side in a landscape mode. To do that, I have added variation to axis property of stackview( width=any, height= compact and Gamut=any, and set that to the horizontal, as shown in right corner of screenshot to see view hierarchy without any constraints).
I have tried many constraints but, every time it fails to adopt. Let's take an example, I am adjusting size of the scrollviews on the size of content(by setting top,bottom,leading and trailing constraint), the stack view is adjusted to the main view. Now, the only thing that needs to be adjusted is text view and imageview with respect of stack view. But, here is the tricky part If I include a fixed trailing constraint of text view to the stack view; it will work in portrait mode.As soon I turn into landscape mode that constraint will not work(the trailing constraint which have 0 distance from stackview) because the edge will be side to the imageview not to the stackview(because I am putting image and text side by side as explained above) which will make textview larger than required, same goes for imageview's leading constraint to the stack view and vertical distance constraint betweem image view and textview.I think the root of the problem is I have made a variation to the axis of a stack view (in order to get text and image side by side in landscape mode) but, that was necessary part.Can anyone have solution for this? Do you think there can be other problem? Should I choose Intrinsic Size of scrollviews to placeholder option or let it be system default?
Thank you.
So I hope I understand the question and I will try to walk you through what I understand you hope to accomplish. I preface this by saying I just started using UIStackView because of backwards compatibility.
Note. To get the magic of ScrollView with AutoLayout I almost always embed them in another UIView. There are reasons to not but in this case you will see how valuable this is to AutoLayout.
Step 1) Drag your UIStackView and add Top,Bottom,Leading, and Trailing. Now add 2 UIViews and set the UIStackView to Fill Equally. It will now look like the image(Background colors to check your work).
Step 2) Now add a UIScrollView to each of these UIViews. Add Leading,Trailing,Top,and Bottom on each of these.
Step 3) Add a UITextView and UIImageView to the ScrollViews respectively. Now Autolayout is mad at us :( but we will fix that.
Step 4) Drag from the UIImageView to the View that is holding the UIScrollView(First Set of Views we added). See image
-Choose the option to add Equal Widths. See Image
Repeat the same step but add Equal Heights. Now add Top, Bottom, Leading, and Trailing to the ScrollView.
Step 5) Repeat exact Step 4 with UITextView
Your final view hierarchy should look like this.
Now you can rotate your UIStackView and do what you want I think.
And Horizontal
Side by Side Preview
I did add a <= 0.1 equal heights multiplier on the textfield at the top but I don't know if that was necessary.
Enjoy.
I have this layout when running it on an iPhone 6, which is EXACTLY what i want:
However, here it is when running on the iPhone 4S (or on the iPad):
I really can't wrap my head around this. As you can see, the above picture has the text leaving the area, and the image being "shrunken". It is as if, the first image has the image resizing itself, and in the latter the text is filling up the blank space. How do i fix this?
EDIT
Here are the constraints for the left-side image, and the right-side table:
Left image:
Right table:
And here they are selected in IB:
am not sure what you are doing with other elements but for the table and image i can suggest you those constraints. first clear all constraints of these two element and then try those.
for table in right side -
top to superview
bottom to superview
width - fixed
trailing to superview
for image on left
top to superview
bottom to superview
leading to superview
trailing to superview
put constraint values are according to your design. this will keep the right side table fixed width and resize the image to fill the rest of gap. i think this will solve your problem.
So, it's a little hard without being able to try out the layout myself, but here's what I think you need to do:
On your left image, remove the "Trailing Space To Superview" constraint.
On your right tableview, add a Width constraint, constraining the table to its current width.
This means the text in the table will stay in the same location, and the left image will grow or shrink depending on the space available.
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.
I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.
From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.
My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.
Add the following constraints
Assign equal width from button1 to button2.
Assign horizontal spacing between both buttons.
Assign leading space from button1 to its superview.
Assign trailing space from button2 to its superview.
Assign top space to both the buttons.
Let me know if it works for you.
Follow Steps and Screenshots for easy solution
Step-1)
For Button 1 : Set Constraints: (1)Leading, (2)Top or Bottom asper your need, (3)Height
Step-2)
For Button 2 : Set Constraints: (1)Trailing,(2)Top or Bottom asper your need, (3)Height
Step-3)
Press Ctrl + Drag From Button 1 to Button 2
Select Horizontal Spacing
Step-4)
Select Both Button (using Command) and Add Constraints Equal Width
OUTPUT
Hope it Helps you :)
Stack layout in iOS9, will do the job really nice.
Add stack view to your view and configure as follow:
You can check my example - you can easy aim this, by using proportional constraint.
Also you can easy aim proportional multiple UIViews.
Please look attached example
https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib
My solution is to
Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
Add height and width to the small view.
Add buttons the constraints and give horizontal space constraints to small view.
Give the small view background colour same as buttons or View's colour.
Note: See the Screenshot.
I am new to Autolayout, so I am struggling to understand how to position two UITextFields side by side. E.g.:
I have tried a number of constraints, but I cannot figure out how to correctly position them. When running the app.
Any insight on how to do this?
Try pinning the top, left and bottom of the check in textfield to the superview. Pin the top, right and bottom of the check out textfield to superview. And the left constraint of check out to check in using the 'pin' button (bottom left of the storyboard), a box between two lines icon.
Other option is to create a Stack View with these TextFields
You have the views like this now:
Now, you have to select the Constraints to the Stack View:
And then you only have to select Fill Proportionally in the Distribution:
Final result: