I am currently facing an issue where I have a horizontal stack view with a UILabel and a ImageView. I am needing the stackView to dynamically change height depending on how many lines of text there is. I am also wanting the imageView to be aligned with the bottom of the UILabel(even when there is a second line).
I have currently tried:
Adding a UIView and aligning the ImageView in it. This stops the stackView auto-resizing.
Changing the Content Mode to bottom doesn't work either as I am wanting aspect fit.
Thanks for any suggestions!
You should be able to get your desired result pretty easily.
Constrain your Stack View to all 4 sides, using however much top/bottom and left/right "padding" you want.
Give your Image View a Width constraint (I'm guessing you want it around 24), and an Aspect Ratio of 1:1. That will keep it from stretching vertically. Content Mode: Aspect Fit
Set your Stack View properties to:
And... you should be all set.
Related
I have a peculiar issue when dealing with my label in Vertical, then horizontal stack view.
The horizontal stack view is supposed to be of a dynamic height based on the label's contents. I've tried other solutions mentioned before, such as embedding the label (and image which is also in the horizontal stack view) in separate UIViews and pinning the labels to the edges.
The issue is, when the label is set to 0 - the label grows beyond what it requires, adding padding above and below the label.
I did verify this wasn't an issue with constraints from where the Stack View begins below the imageView, as the warning label correctly floats upwards when aligning the stackview to "top", but the label still remains centered.
Everything has been done in the storyboards without code.
Take a look at the images, maybe someone can help me out and recognise how I can resolve this issue.
Desired Effect
What occurs upon running the application
Verifying that the stack view is correctly pinned to the image view by aligning top
Constraints involved
The second stackview in the hierarchy at the bottom is just to fill the empty space during the designing phase. I don't think that would be causing the issue.
I would guess that actually your second stackView at the bottom is also the part of your problem. If you pinned the vertical stack view to the bottom of the image (TOP constraint) but you also pinned it to the bottom of the screen (BOTTOM constraint), your vertical stack view tries to strech it's content. That's the reason why the label has the extra space.
What you can do: get rid of that bottom constraint (don't give vertical stackView bottom constraint) or maybe better set vertical content hugging priority of warning label to greater value.
Here, the warning UILabel is occupying the remaining available space, try adding an empty UIView in the second stack view which you kept for the later stage of the development. This will act like a spacer view.
Also, don't forget to call warningLabel.sizeToFit() inside viewDidLoad()
You can achieve this by calling yourLabel.sizeToFit()
Above will dynamically adjust the height of the label based on the amount of space your text occupies.
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 am trying to constrain a label that is sitting on top a UIImageView. The ImageView keeps its aspect ratio for the different screen sizes so its length and width change according to the device.
I am running into an issue if I constrain the top of the label to the top of the image view at (for example) a constant of 58. For the lower resolution image that places the label where I want it visually. However on the higher resolution images that position is not where I want it visually. I have also tried adjusting the top constraint so that the constant is 0 and use the multiplier to adjust the position of the label. This however does not fix the problem and the label ends up at different locations on the image.
I really would not like to have to edit these constraints programmatically as I will have way more labels on different view controllers that would be a pain to program. Really hoping I can achieve this in IB.
I'm confused... why aren't you pinning a constant distance from the top of the label to the bottom of the image view?
I am desperatly trying to get to grips with Autolayout and need advice on how best to approach handling the following scenario. I am working with an existing design that I need to lay out appropriately so it will function on any iPhone screen size.
For each screen, I have identified a section of the app that should partially expand/collapse to compensate for the difference in screen height. I have illustrated this in the image below. Primarily, is this the best way to approach the problem?
Assuming this is the best way to approach the problem, how should constraints be added to fix the positioning and heights of views 1,2 & 4, while allowing view 2 and it's content to flex in accordance with the device view height?
I have experimented profusely with constraits and have been unable to achieve the illustrated outcome.
Here is how I would have done it.
All views:
Align the leading and trailing space to the superview
View 1:
Align the top to the superview or top layout guide
Add a fixed height
View 4:
Align the bottom to the superview or bottom layout guide
Add a fixed height
View 3:
Align the bottom to view 4 (using vertical spacing)
Add a fixed height
View 2:
Align the top to view 1
Align the bottom to view 3
If you want the result in your pictures, here is how to do it. You can choose to use wAny|hAny size class.
From top to bottom, set vertical spacing between each adjacent views to be 0.
Set height constraint for view1 and view3 and view4 to be a static value.
Then the height of view2 should vary on different screen sizes.
Looking from your picture, your view1 occupies almost half of the screen space. So my suggestion is to make its height to be proportional, you can set view1 and its superview to be equal width, then modify this equal width constraint's ratio to be 0.5. You can do the same for other views in your picture.
In addition to other answers, with the visual format, it should look like smth like this
V:|[view1(HIGHTV1)][view2][HIGHT3(HIGHTV3)][view4(HIGHTV4)]|
Repalce HIGHTVX with the static sizes
Suppose that I have the following view controller and this is how I want to see it on all iPhone:
If I run it on iPhone 6 it has the following look:
Here you can notice that UITableView not fit the whole screen and UIImageView doesn't placed at the bottom of the screen.
How can I achieve the required behavior via constraints in XCode 6? I thought that I need the following constraints:
Leading space and top space to container margin for UITableView
Bottom space and trailing space to container margin for UIImageView
Vertical Spacing between UITableView and UIImageView
But it doesn't work as expected even after auto-resolve constraints issues:
Thanks in advance.
Ok, a few things here:
Each view needs enough constraints to define it's x and y position, and it's width and height unambiguously. To start with, go back to Interface builder and delete all of your constraints and lay out the view as you would like it to look. You want to have control over every constraint added, don't let IB automatically resolve the issues, as in all likely hood it won't do what you want.
Do you have an image that is the size you want it to be on screen, once you've factored in #2x, #3x etc? If so, then your job will be easier, as the width and height of the image view can be defined by the width and height of the image (ie the image view's intrinsic content size).
In order to use Autolayout effectively, you need to think about your view holistically, and think about how you want your views to behave when the screen size changes, be clear in your head about the behaviour.
To achieve the layout you want, I would do the following:
Constrain the tableview's leading, top and trailing edges to the superview, with a constant value of 0. This means it can get wider and thinner with the device, it will stretch horizontally, but always stick to the top. This has defined the tableview's x and y position, as well as it's width (height still to go, but keep reading...)
Constrain the image view to match the horizontal centre of it's superview (x position defined) and constrain it's bottom edge to the superviews bottom edge (y position defined). If've you've got the right sized asset, then that will take care of the width and height too. If not, you could go ahead give it explicit width and height constraints.
Now we can constrain the tableview's bottom edge to the top of the image view, with a constant of 0 (ie touching). Note we haven't give the table view an explicit height constraint, so as the device screen grows vertically, the table view will stretch vertically.
Autolayout is hard at first. I'd recommended lots of reading to get over the initial hump, really get to know what a constraint is doing, it's limitations, and the way in which the system parses constraints to translate them into frames. This book is really good, and really helped me learn:
http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194
Best of luck
First make sure you have selected the correct size class. The 'Compact Width | Regular Height' size class must be selected in the Interface Builder. Now add the Trailing space,Leading Space, Top space and Bottom space constraints to the table view. For the image view set the view mode to Aspect fit and add the constraints : Align Center Y ,Top space,Bottom space, Leading space, Trailing space and Aspect Ratio .