In my app, I use a UITableView to display articles for the user. I have two types of UITableViewCells; one where an article doesn't have an image, and another where an article does have an image.
Both types of UITableViewCells have a title UILabel and a description UILabel. I have the numberOfLines of the title UILabel set to 0 since some article title can be long or short. This is the determining factor for the height of the UITableViewCell, since I'm using UITableViewAutomaticDimension.
It shows up perfectly in the case when an article has no image like so:
However, in the case where an article has an image, it's not working as I need it to. These are my UIConstraints:
Article Image View
0 pixels from the right, top, and bottom of the cell
width constraint of 90 pixels
Title Label
numberOfLines is 0
8 pixels from top and left of the cell
8 pixels from left of Article Image View
Description Label
numberOfLines is 1
8 pixels from left of the cell
0 pixels from bottom of Title Label
8 pixels from left of Article Image View
8 pixels from bottom of the cell
It shows up like this:
This is very frustrating because my constraints look logical enough to be doing the job correctly.
I need my layout to look like how the Pocket app is doing it like so:
Any ideas on what I'm doing wrong? Any help or advice would be appreciated. Thanks.
*****UPDATE*****
On the advice of #kirander, I have changed the content compression resistance priority of my UIIMageView to 250, which helped me get this result:
Is there any way to minimize the leftover space in the Title Label? I need the Title Label's height to be ONLY enough where all text fits, and not a pixel more.
I ended up solving this with the help of kirander and Mike Taverne. If you need a tight design similar to this, these were the constraints that got me what I wanted:
Article Image View
0 pixels from the right, top, and bottom of the cell
width constraint of 90 pixels
Content Compression Resistance Priority -> 250
Title Label
numberOfLines is 0
8 pixels from top and left of the cell
8 pixels from left of Article Image View
Description Label
numberOfLines is 1
8 pixels from left of the cell
0 pixels from bottom of Title Label (I mentioned this in the original question, but it turned out that I didn't have it...correcting that moved me toward my solution)
8 pixels from left of Article Image View
8 pixels from bottom of the cell
These constraints gave me the following tight design:
Related
I want to be able to create a UILabel that will adjust it's size in a more complex way than normal AutoLayout. I've looked over the internet for an answer to this, but to no avail.
Here's what I want it to do.
Say you're viewing it on an iPhone. I want it to be 16 points away from either edge centered in the middle. (Height does not matter in any of this)
However, when the screen gets wider, I want the UILabel to stretch so that it's 16 points away form each edge UNTIL it reaches, say, 500 width. Once it reaches 500 width, I don't want it to get any wider. This is where the 16 points on either side increases, still keeping the label in the center.
Now you're viewing it on an iPad landscape. The UILabel is exactly 500 points wide and in the center.
If possible, I would like to be able to accomplish this using AutoLayout, and not code, but if code is a must, I can deal with that.
Thank you for your consideration. All help is appreciated.
You can do this with 3 constraints:
center the label horizontally in the view
set a width constraint of <= 500
set a leading space constraint of 16. Give this a priority of < 1000.
When the view is wide (like on an iPad), the label will stretch to its full width of 500. Auto Layout will keep the label centered, and it will try its best to satisfy the 3rd constraint by keeping the the leading space as close to 16 as possible. It chooses to break this constraint because the priority is less than 1000.
When the view is narrow (like on an iPhone), the label will have a leading space of 16 (and trailing space of 16 because the label is centered). The width will be whatever is left, because that satisfies the width <= 500 constraint.
Size class is same and constraint is also same, but getting different height green box.
Does constant should work same for same size classes ?
If not then how i will get same height green box using auto layout? I want green box height = 25% of total height of device
Thanks in advance..
Since you have given the constant distance of green box from bottom so it will maintain that constant distance for all the device.
Secondly you have aligned the top of green box with topLayoutGuide so it will maintain the same for all devices.
So basically top is fixed with topLayout and bottom distance is fixed as 502. And if you run the same on different device having different screen height it will auto-resize your green box height only since other two parameters (top, bottom) are fixed.
Please add the height constraint for your green view as shown in image. It will give you greenViewHeight = 25% of superViewHeight
This is the demo created for your question
here some points about using autolayout that I don't understand.
1/ I have set a constraint on the leading space and the trailing space of a label (so the horizontal size of the label should be adjusted automatically) but the label fit the size of the text. How to not autosize the label (I have seen hundreds of posts about autofit a label but nothing about not autofit).
2/ Concerning my UIScrollview, I have set up trailing space and leading space to 0 (so it should fit all the screen whatever the iPhone display size) but some margins still appears. Why ?
Thanks for your help.
As seen on the screenshot above, each top cell has few labels. The frame of the label this question concerning is highlighted with green rectangle. It shows the title of some picture/sculpture or other exhibit, so there could be quite long strings.
I would like the text of this label to be just above author label (string with font of smaller size). So, normal text is aligned from top to bottom and if text is not enough to fill all the space, the gap is at the bottom part of the label.
For this label I would like to use the opposite approach: if text is not enough, all the text at the bottom. Is there any parameter of UILabel to implement above mentioned behaviour? Or I should manually count the amount of lines and adjust the size of the label?
This is fairly easy using constraints. To get the effect you desire:
Constrain your label's position above the author label
Constrain the label's width or horizontal position
Constrain the label to a reasonable height using a greater than or equal to
Either constrain the label's total height as less than or equal to, or constrain the vertical position to something greater than or equal to.
All these constraints can be added in IB very easily, or through code. These constraints will cause the label to grow vertically to accommodate more text, and then shrink back down with less text, which will achieve the effect of having the text grow up from the bottom.
I would like to take 4 square UIImageViews and align them from left to right at the bottom of a view. I want the images to grow in height (with the correct height/width aspect ratio) and have no spaces between the images. I want all the images to be of equal width
I seem to be having a hard time coming up with the proper constraints.
I've set all the images to Aspect Fit. I've created 8 constraints on all 4 images to have equal widths and height. On the far left and far right I've set the training space to the view as 0. I've aligned them all to the bottom of the view with a constraint of 0 as well.
This all seems to work... except that the images only grow in width and not height. I'm
hoping that as the width is calculated the image will grow proportionally in height. Any ideas?
PS: I would like to do this in Interface Builder if possible, but if code is needed, that's fine