I just want to display UIImageView with 150 px height and 100% width of content view in UITableViewCell. I just knew that I am not able to do this, because I clearly do not understand how Auto Layout works. First of all, I gave trailing and leading constraints, because image should have full width. Ok. AutoLayout still requires constraints, because it cannot solve its inner equation. Ok, then I gave 150 px height constraint. It still requires one additional constraint. And I really do not know which constraint should I give. Let it be vertical centering constraint, but in this case my image will not appear in its own full height. Let it be bottom constraint, but it also ruins my design as top constraint. So, what is the answer?
Here is something that I cooked up on Xcode. Hope this helps.
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'm trying to use a UIStackView within a UIScrollView and I was hoping someone could point me in the right direction in creating the right constraints because I can't figure out what the problem is.
These are my constraints and ViewController structure.
So DestCont is a UIView that has a fixed height and ContentCont should take up the rest of the space, which could be (and is) larger than the screen so it should be able to scroll.
When I test it out in the simulator, I have the following problem. (Resized it so it would fit in the 2MB cap)
The green is the Root View and the black color is the ScrollView, as you can see, it cuts off the bottom portion of the ContentCont view.
EDIT
I changed the constraints, removed the fixed UIStackView height, but now, it doesn't show the bottom UIView that's in the UIStackView:
From your screenshot we know that you have set the StackView's height constraint equals to the self.view's height. Then the height is fixed(equal to one screen's height), even though its content view's height may be larger than the screen.
And UIScrollView will calculate its contentSize depending on its content, so in your case its contentSize's height will always be one screen heigt.
Delete this height constraint, let the ContentCont's content decide the height of it. Also please make sure your constrains in your ContentCont are correct.
I ended up with being fine that just my "ContentCont" UIContainerView will scroll and fixed the switching by using the following tutorial: https://spin.atomicobject.com/2015/09/02/switch-container-views/.
I have a requirement to scroll six different type of view, Each view has different size, One of the views is: About Me. In About Me, I have to show the title (i.e. ABOUT ME) and text below it and label height should be according to text height.
Till Now I have designed this requirement as:
Root View
- Stack View
* Item 1 with fix height
* Item 2 with fix height
* UIView as About Me:
- Label as title
- Label as text with max lines set to 0 and width equals to container width.
The problem is: I can not set fix height of about me UIView and it does not resize according to label text.
Please suggest the appropriate solutions.
Hi you can get the intrinsic height of the stackView like this:
let size = stackView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
I know Im kinda late to reply to this message. But I had the same issue and I found this piece of code. Thought anyone who looking for this might be useful :)
I don't think that you declare your problem clearly. The first thing I want to point out is that UIStackView can infer its size by the size of its arranged subview. But you must first confirm that the constraints added to the subviews are proper. So if you don't get the resizing effect you want, you must be missing something. Maybe you're not making the reasonable constraints.
To clarify your situation, you'd better add some screenshot of your constraints added to your 'About Me' view. By the way, what's the axis of your UIStackView?
I don't know either of these. So I have to make some assumption for me to explain more about your problem.
The axis of your UIStackView is UILayoutConstraintAxisVertical.
And your UIStackView(or all of your content) has a fixed width.
With the above conditions, Defining a view that its height is decided by its text will be simple. Because UILabel doesn't have to have a fixed size. You only need to specify its width(or specify its leading and trailing to its superview), and its height will be automatically computed based on its font and content.
Your About Me view has two label, so you should
Make sure of these things:
Title label: The top, leading, trailing constraints to the super view. and the bottom gap to the subtitle label(whatever you call).
Subtitle label: The leading, trailing, bottom, constraints to the super view. and the top gap to the title label.
I'm trying to keep my UILabel centered horizontally. I have tried in IB setting leading and trailing, but that simply stretches out the entire label, and I need it to stay the same size. Everything is set up using Editor and the Pin function in IB and not coding. Suggestions?
If you want to keep all the time buttons together and aligned to the center. Put them all in their own view, arrange how you wish. Then fix the length and width of the view and center it in the container like Aaron suggested. I do believe you will need to make one more constraint. Perhaps pin the view to the top. Hope this helps.
Seems too obvious, but did you try nsconstraint of width = XXX. Label should say same width and the leading trailing should keep it put.
For keeping a UILabel horizontally centre, add the following constraints:-
Width constraint to the label.
Height constraint to the label.
Top/Bottom Constraint for placing the label vertically.
Horizontal centre in container.
My Goal
I'm creating a custom UITableViewCell (MessageCell), and I'd wish to have my UITextView resizing both in width and height whenever the cell changes its size, while keeping some basic constraint like margins to the edges.
Note : I also change my cell's height in the heightForRowAtIndexPath method depending on the content which will be placed into UITextView.
What I tried
Here are all the constraints currently applied & the cell :
I tried :
With a UILabel.
To fix a Vertical Space from the bottom, thinking it would change the height to fit all the constraints.
To override Height with an User Constraint Height >= 43 (my initial height), but the purple-automatic Height is re-created again whenever I do this.
To find a solution on SO first, but didn't find a case like (even if the UITextView's height's resize with autolayout seems to be a frequent issue).
Plenty of combinations of various & random constraints until my fingers bleds.
How it render now
So...
If someone has any clue or guideline to achieve my goal, I'd appreciate!
I might add, I'm totally new to Autolayout & constraints. My reference : Ray Wenderlich's awesomeness
You need to get rid of that height constraint that the text view has. Make sure you have constraints to something above and below the text view (usually the top and bottom of the cell), and then you should be able to delete that height constraint.