I don't know why, but my label behaves strangely. You can check screenshots bellow. Image should fill stackView.
Screenshots
Since you really ought to share a bit more, I can only try to answer based on what's available.
The problem is most likely due to the fact that the StackView that surrounds the label and image does not have a width or height constraint of any sort and/or the imageView has a very low content compression resistance property.
Because StackViews calculate their size based on their child views, it will try to find the best fit. If the label has a normal compression resistance but the imageView has its resistance set to low, the stackView will simply calculate its frame based on the label alone.
So to fix it check the compression resistance of those objects or define contraints for the surrounding stackView to match its parents width.
Firstly.. What is it that you are trying to achieve? Image and Text one beside the other, or one below the other? You might want to check for the stackview direction property
Secondly if you want that your image size remains constant, you will have to give your image view some fixed width constraint, and stackview will respect the size of the imageview. Or if you want that the image takes the entire width of the screen, you can basically pin the stackview to the edges of the screen, after you have put in the imageview inside of the stackview.
Hope that makes sense.
Comment back if you need more help :)
Related
I am using a TableViewController with "Right Detail" style cells. To fit the text into the cell.textLabel I use cell.textLabel?.sizeToFit(). But the problem is, that the cell.detailTextLabel gets pushed out of the view. Whats the best way to solve this problem?
This is the result I am getting right now
I haven't used .sizeToFit(), so i can't say what it is actually for but you don't need it. Lower the compression resistance of your label.
Content Compression Resistance explained:
Sets the priority with which a view resists being made smaller than its
intrinsic size. Setting a higher value means that we don’t want the view
to shrink smaller than the intrinsic content size.
Read more about it here: https://medium.com/#abhimuralidharan/ios-content-hugging-and-content-compression-resistance-priorities-476fb5828ef
I would suggest make your own custom cell.
1.you can crop left label if it is too wide.
2.expand left label to multiple lines and make cell height self constraint.
I have a UIView with 3 UIViews inside, I need every UIView to define it's one height depending of its contents and at the same time, the parent view should change its size depending of its children. But I'm having this issue:
I need the first UIView from the second column's height to always stick to its content and leave the remaining space in the end of the column. In other words, what I want is the second column's first UIView to shrink.
Here's my IB, the greater than or equal constraints are not working as I expected (I highlighted the relevant constraints):
I've tried changing priorities but nothing's working, hope you can help me out, thanks.
EDIT: I forgot to show what's going on inside each UIView. The image might be present or not so if it's not I remove it and "pass" the UIView's height responsibility to the label, just that:
A greater than or equal constraint will always be as small as possible while satisfying all other constraints. So in this case it is correct...
The reason it is correct is because the label you are using will allow its frame to grow beyond its content.
To fix this you need to change the content hugging priority on the two labels on the right hand side.
To do this, select the label and go to the measurements section in Interface Builder property inspector.
Near the bottom you will see "Content Hugging Priority". Change the vertical value of this to 1000 (a.k.a. required).
This will tell the label to keep its frame as small as possible to fit the content. And so, the greater than constraint will have to be taller to satisfy this.
I got it working by extending the labels to the bottom of each UIView, now the UIViews have no excuse to expand more than the label's height.
I have a horizontal stack view, with an empty UIView on the left side and a label on the right side. In storyboard builder, it looks perfect (just look at the green row):
However when I run the app on Sim or device, the color view just collapses and disappears:
I have the stack view set to center alignment and proportional distribution.
If I give the color view a set width, it works well in Sim/device, however I get a warning in the interface builder, which annoys me. I assume there's a more correct way, but I don't know what that is. With set width warning:
It only allows me to delete the width=50 (the one I entered). It won't allow me to remove width=0 (not set by me, seems to be default).
Anyone have any ideas?
First, you set a proportional distribution, which tells the stackview: "Hey stackview, lay-out the views proportional". Then, you set a fixed width, so you are saying: "Hey stackview, give this a ... width". Both can not go together, since they are different.
Either make 2 stackviews, or add an UIView in to the stackview, and make that image proportional to his parent UIView.
So:
-Stackview
-UIView
-Image proportional to UIView
-Label proportional to UIView
-UIView
-Image pro...
-label...
-UIView
-Image...
-label...
And set your StackView to "Fill equally" to use this way.
Working with StackViews
A method that works is to make the strip of color beside the label an image and use UIImageView instead. StackView will then consider the UIImageView to have content and not compress it. But that will obviously cost more resources. Also to note that the images used for the strips have to be the same size or the StackView will compress them to different sizes the screen too.
Another is to set the Distribution property of the StackView to Fill Equally this will give the strip and label each half the space. It will work but may not provide the visual you are looking for.
Alternatives
By the amount of information provided, I see no requirement to use StackViews. You may instead just apply constraints that gives the strips and fixed width.
You can also try using auto layout by setting each strip to fix there distance to the leading and top while maintaining its size(actually the default settings) and the label to the same except also fixing its distance to trailing and width to scale with superview.
So I've been trying to make a custom layout of a UITableViewCell that it contains an image and label, as you can see it in the picture below.
The main problem is the compression and hugging I haven't put my finger on it and I can't understand why the image expands, I have changed the compression and hugging of both
IMAGE SETTINGS:
LABEL SETTINGS:
Any Suggestions on how I can fix the shrinking of the label?
Content hugging is scaled so that larger numbers mean "do more hugging". In other words, your label (Content hugging priority = 251) will try to make its size match the content size more than your image (Content hugging priority = 249).
To do what you want, you need the priorities the other way around.
That said, you'll probably find that the layout is better anyway if you set the image to be a fixed width or fixed aspect ratio, otherwise it's going to look weird when these are in a table. If you do that, then you won't need to adjust the hugging priority because everything will be constrained.
Also, #matthews is right, you should get rid of the Center Y constraint because it's meaningless when it's together with the Top and Bottom constraints.
You can give constraints for ImageView i.e Leading,Top,Height(Itself),Width(Itself) and Trailing space to label,then for label i.e Top,Trailing and Height itself.Hope It will work as per your requirement.
Hope this may help you:
For UIImageView
For UILabel
Use below code for self sizing cell
tableView.estimatedRowHeight = 100.0
tableView.rowHeight = UITableViewAutomaticDimension
I'm new to autolayout and i'm kind of stuck on how to center these 4 images in all different devices like it looks on the images. i've tried to apply the auto configured constraints but then it will have that distance and that does not fit on all devices. So my question is what constraints do i need to apply on all different images in order to make all image centered with same distance?
Here is how my cell in storyBoard looks like:
image of the constraint options on image 1:
image in simulator:
/// MY TRY ////
Here you can see the constraints that i've added and the result?
result:
Your approach is almost correct, it simply lacks size constraints for the images.
If you want to dynamically resize the images and keep the space between them constant, put constraints on the images for the width to be >=20(or any other value, depends on your needs) and a constraint for keeping the aspect ratio. Then ctrl-drag from UIImageView1 to UIImageView2 and set a constraint for equal widths. Repeat that from UIImageView1 to UIImageView3 and from UIImageView1 to UIImageView4.
If you want the images to always keep their fixed size and dynamically sized spaces between them you need another approach:
The trick here is to place 3 empty UIViews between the UIImageViews so that it looks like this:
Set constraints to the top for all views
Set constraints to the left and right for UIImageView1 and 4
Set constraints for all UIImageViews to the same width
Set constraints for all UIViews between the UIImageViews to the same width
Set constraints for all the distances between the views to 0
Set the width constraints for the UIViews to >= 0
This way makes the empty UIViews between the UIImageViews to resize dynamically and all the same width.
I hope you get the idea.
For the first image add a leading space to superview and for the last image add a trailing space to superview and add vertical spacing between first and second, second and third, third and fourth and also set horizontally center within the container to each of the images
The objects on your storyboard require at least 4 constraints per object.
When there's orange lines around the UIImageView object like appears in your question, this means a constraint is missing, or conflicting and can often mean the image does not display at runtime like you'd expect.
In the first instance I recommend you select all objects and 'clear constraints', then start again.
Although not exactly the same, here is a link to an answer which explains the auto-layout constraints in a bit more detail. Once you understand it, auto-layout can be very powerful.
>>Link to similar auto-layout issue - iOS CustomTableViewCell: elements not aligning correctly<<
I hope this helps
If you want the images to always keep their fixed size and dynamically sized spaces between them then very easiest way first you drag the four UIView in your StoryBoard
set constrain top left right and height for all the UIViews and give the equally width to all the UIViews(drag from one UIView to another and sets its equally width repeat this work for all the UIViews).
Image about layouts
Secondly you have to drag your images set in these UIViews and sets their constrain height width and centre horizontal in container and centre vertically in container.
In last set the background colour of all UIViews default(white) you get the result it will work....i assure.
Screenshot of Xcode