I have been facing issues horizontally aligning two UILabel and one UIImageView like this:
First label has variable width, can be truncated if long. Second label has fixed width, it should always be aligned to right of UIImageView. It should never go off screen. UIImageView is aligned to right of first label.
I have tried embedding them in horizontal UIStackView but the image + second label always aligns to end of cell. Got the same issue when trying without UIStackView.
Please help.
You can embed both label and horizontal StackView into another horizontal stack view. Then, you'd need to set the dynamic width Label's Content Compression Resistance Priority (you can find this property at the bottom of the Size Inspector), to be smaller in order for it to shrink.
Then on the container StackView (the one that contains all views), you'd need to set constrains to top, bottom, leading to 0 to the superview and the trailing to be greater than or equal to 0, for it to not take all space of the superview, but at the same time not get offset if the content is too wide.
I hope that is clear enough!
Related
I have a simple UITableViewCell that contains UIImageView and 3 UILabel's. Here, I provide a normal look of the cell to understand the problem deeply:
As you noticed, the description label can be long, so I set numberOfLines to 0. But the problem occurs when that description is empty or small. Cells start to overlap each other. Here is how it looks when the description is empty or small:
If you noticed, pictures overlap each other. The constraints I gave to views are the following:
UIImageView: Leading to superview, width and height, center vertically
BookName(bold label on top): top and trailing to superview, leading to UIImageView
AuthorName(orange label): top to BookName,trailing to superview, leading to UIImageView
Description(gray label): trailing and bottom to superview, top to AuthorName and leading to UIImageView(book image)
I also provided Content Hugging and Compression Resistance Priorities. I provided them only for UILabel's. I set the smallest for description label in order to it grow and shrink.
What I've done to solve the problem?
I realized that if a description is empty, the cell becomes smaller. In other words, labels decide the size of the cell. Also, considering the fact that UIImageView only gets centered vertically, I thought that my constraints are incorrect. So, I decided to get rid of centering vertically the UIImageView. I set top, leading, width and height constraints only for UIImageView. Other constraints were the same as above. But it didn't help, here is the result:
As you see, UIImageView gets out of cell boundary. I thought that it happens because I don't provide bottom constraint for UIImageView. But I provide it for description. So, the next try was actually providing that bottom constraint. So, I provided top, left, bottom and width constraints for UIImageView. I left other constraints the same. Initially, the result was surprising to me. Here is how cells look when there is no description:
Seems like, everything is good(anyway, the image is too small, it tries to fit cell size, that is controlled by labels), but after scrolling UITableView, cells are changing their sizes and somehow updates their constraints. Here is what happened:
I also tried to set estimatedRowHeight and automatic dimension, but it didn't help and I don't think that the problem is solved in this way. So, any help is appreciated.
Keep constraints on the Image view as leading to superview, width, height, vertically centered. Keeps constraints on book name and author label as is. Now On the detail label put constraint as top to author label, trailing to superview, leading or left to image view, bottom to superview. For bottom to superview constraint on detail label change relation to greater than or equal to in Attributes inspector. Change constant to a value you need.I suggest increasing the constant and testing till you get the desired result. Start with something around 20 or 30 and test and then increment value to something else till you get the effect you want. At some value of this constant you will get the effect.
Hope this helps.
NOTE: This is assuming that your Book name label and the author label at least have some text. It can fail on other devices, so also use size classes to set different constraints
I am getting an image from a URL in a tableview cell. The image view is hugging the right top and bottom of a cell in the tableview cell. To the left of the image is text. I want the text to set the height of the tableview cell automatically and I want the image to conform to the size that is set by the text. How would I do that? Right now it is working but when the image is being downloaded, the cell resizes to become much larger because it uses the large dimensions of the image. As a result the cell in the tableview gets really tall. How would I fix this?
I know the issue is because I am using a greater than or equal to constraint between two of my labels as you can see below in the screenshot. But I need that greater than or equal to constraint.
Here is what my constraints look like:
This is what they look like and what I want it to look like:
This seems to be a cell that is laid out more or less as you desire:
The first label has three lines. The second label has four lines. The third label has one line. The first label has a leading constraint and a trailing constraint to the cell content view; the other two labels have their leading and trailing edges aligned to it. There are four constraints from top to bottom, content view to first label to second label to third label to content view.
The image view has its top aligned to the first label top, its bottom aligned to the third label bottom, its leading edge constrained to the first label trailing edge, and its trailing edge constrained to the content view.
That's all.
EDIT Sorry, I omitted a piece of the puzzle. For your use case, the image view's vertical content compression resistance would need to be lower than any label's vertical hugging priority. That says: "Let the labels dictate how tall I can be." Your labels have a vertical hugging priority of 251, so 250 would do.
You have set your constraints for the 3 labels, now for the image view set equal height to your cell(90-95% should do it). So the labels control the height of the cell and then the cell controls the height of the image view.
Edit: I think that you are complicating things. All your cells will have the same height(title,preview, source of 3,4,1 lines respectively), let them set the height, you don't need content hugging priority with the way i am suggesting.
I would use equal widths to set the width for all the items in your cell, the i would set the horizontal centers, for the spacing between constraints you can either use top-bottom constraints or set vertical centers and you are done.
Bare in mind that top-bottom-trailing-leading are NOT always the best choice, sometimes (like this one) can cause headache.
I got a UIView whose child is a UILabel. I then aligned the left, top, right, and bottom of the UILabel to that of its superview (the UIView) using constraints.
But what I'm getting is a UILabel that matches the height of its superview but not its intrinsic height (smaller or larger than its text content depending on the size of the UIView). What I expect is for the UIView to resize itself to fit exactly the height of the UILabel.
So how do I do this using only the interface builder?
In order to make the UILabel keep its size and force the outer view to resize you can update the values for Content Hugging Priority to 1000 (a.k.a. Required). This can be done in the measurements panel when selecting the label in Interface Builder.
I think they are set as a default to 750.
This should (if there is nothing else causing the change) make the label take its intrinsic content size and force its superview to conform to that size also.
Align top, trailing, bottom and leading of UILabel with UIView (add constraints).
Remove height and bottom constraints from UIView if any.
If the content is large, you probably need to wrap UILabel into a UIScrollView in place of UIView. and add a bottom constraint to UIScrollView
Content Hugging Priority of UILabel (251) is more than that of UIView (250) by default. Verify this
It's super easy using auto-layout. Just, follow these steps
1 - Drag a UIView and align it vertically and horizontallyin centre.
2 - Now drag UILabel into the UIView and align the label also horizontally and vertically in centre.Now, the IB aligns the label at the centre WRT to the superview and not the UIView.So, change that in the size-inspector section.
3 - Once you have done that and all red lines are removed, select both the label and the UIView together using the command key.
4 - Now, give them constraints as follows
leading = 0, trailing = 0 and select the equal width and equal height.
There you are done.If you wanna test that the UIView size is respective to the label's content, try increasing the label's font to a bigger size and you will see that the size of the view will be the same as the size of the label.
There , you are done :-D. Hope, this was helpful.
If someone is experiencing this issue, while:
Having 2 labels inside the UIView
Doing everything what was suggested here
In my case, I set Vertical Content Hugging Priority of BOTH UILabels to 1000. Then one of the labels had a different font. (ie. one label was supposed to be smaller than the other one)
The height was being ambiguous, because both labels were trying to force their height on the superview. Once I lowered the priority on the smaller label, everything worked fine.
I want to have a UILabel with a button to it's right centered horizontally like of the picture.
I've implemented an "Align by Horizontal center" for the UILabel and standard space between label and button and it usually works just fine.
The problem appears when UILabel's text is very long and it goes out of bounds and the button is not even visible.
I've tried to set lines count for the UILabel to 0 and set questionLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.questionLabel.frame)what makes the label to grow vertically. But it's width is very small (it's the base width from ui designer) so it looks like a column of text.
So the question is how to make UILabel to:
to fill all available horizontal space without hiding the button
autoscale vertically if there is no enough horizontal space to fit text into one horizontal line
be centered horizontally
It's missing the constraint from the trailing of the UIImageView to the trailing of your container view or margin. I used a Greater Than or Equal constraint so if the label has a short length, the image will stay close to the label - using the horizontal space constraint from the label to the image.
With that, your label - that is centered relative to your view, will be centered and will respect your trailing constraint of the UIImageView to the view using all the horizontal space that is possible to use as follow:
In the following image it's possible to see that the label reaches the maximum width it can, according to the constraints:
you could remove the width constraint and add a horizontal space constraint from the right side of your label to your image and one from the left side of your label to the left border of your view (set the constant to the minY Value of your Image to get it centred)
Please look at the ScreenShot attached for wCompact|hRegular for different screens, I am trying to make it working since hours but not getting any success. My requirement is that at the top there would be a label with some predefined margin. Although the Label content would render at the runtime, but I know the content size, so resizable label isn't needed actually I think. Now there would be three row at equal distance. In first and third row, there would be two buttons with equal height and width and in second row there would be button aligned horizontally. I have set the buttons image and text in storyboard. Control Alignment are set to Horizontal | vertical. Constraints for label are:
Pinned top space to superview, leading and trailing space equals to:8(superview), height equals:90.
Constraints for Button(View Transactions) are:
top space to label, bottom space equals to:8(New Launches Button) leading and trailing space equals to:8(superview) and 8(Place Request Button) respectively, and equal width and height for all buttons.
Looks fine for 4.7 and 5.5 But not satisfied with the output for smaller screens. As u can see resizing of buttons image not working properly(Larger space between button's image and text). One more thing is I don't wanna set the height of the label, cause it seems like a wrong practice in AutoLayout. Any help would be much appreciated.
You should set the Aspect Ratio for the Buttons, not just the equal width and height. In that case auto layout wont shrink the images.
Really you should put this into a scroll view so that if the height is too great the user can still see everything by scrolling. You should also not set static heights on labels, you should allow the intrinsic content size to apply.
Add a subview to your new scroll view. Pin the width of this subview to the width of the scroll view. Do not pin the height.
Add all of your buttons and labels to this new subview. Pin them to the edges of the view and allow the intrinsic content sizes to apply limits. Set various items to have equal widths and heights. Do not set explicit heights or widths (do everything by proportion or equality so auto layout can choose good sizes).