I'm attempting to add a background image to a UITableViewCell so that each cell can have some spacing at the bottom.
I'm setting the cell's backgroundView property like this:
[cell setBackgroundView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"cell"]]];
The "cell" image is 20px taller than the actual heigh of the UITableViewCell, this is on purpose so that my cells can have some spacing at the bottom. Only problem is, the "cell" image will get stretched all the way down the cell's contentView.
Is there a way for me to prevent the cell from stretching the backgroundView all the way down?
Thanks in advance!
Look into the contentMode property of UIView. If the height of your background image is smaller than the height of the cell and you want the image to "stick to the top" try setting
cell.backgroundView.contentMode = UIViewContentModeTop;
Look at the "Content Modes" section on this page for more information. It mentions...
"By default, the contentMode property for most views is set to UIViewContentModeScaleToFill, which causes the view’s contents to be scaled to fit the new frame size."
Two options:
1) Make your image bigger manually, filling it with transparent space in the gaps. (Easier solution).
2) Add another UIView inside your UITableViewCell, make it as big as the image. Add your text label (if any) inside this view.
Related
In the interface builder, I'm trying to create a prototype cell with an image that covers the entire cell but it is not running how it is expected.
As you can see in the following screenshot of my interface builder, I have an image view covering the entire cell, and is constrained to each edge of the cell:
And in fact this is how I expect it to look on the simulator, but instead I get this:
Where as you can see, it is not anchored all the way to the sides, and it may be hard to see, but the image actually extends past the bottom of the cell (if you look hard enough you can see the separator striking through the bottom portion of the image.
This is really buggy and I really have no idea what's happening.
Perhaps adding aUIImageView inside of your cell in code.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
//configure cell
let imageView = UIImageView(frame: self.cell.frame)
imageView.image = YOUR_IMAGE
imageView.center = cell.center
imageView.frame.size = cell.frame.size
imageView.contentMode = .ScaleAspectFill
cell.addSubview(imageView)
}
Hope this helps.
I think you accidentally disabled cell's Clip Subviews in code or in Storyboard, by default It should be enabled.
If it's not the cell, check it's Content View.
By the way, by disabling Clip Subviews for both Cell and it's Content view, I managed to reproduce your bug.
Seems that your image constraints are relative to cells contentView margins. You can disable it, see screenshot. Be sure that constant is 0
You need to do Clip Subviews (clipsToBounds) on cells contentView or imageView if you don't want aspect filled image to go beyond bounds. Otherwise you should use Aspect Fit, or Scale To Fill, or do the math manually
This is because you are setting constraint to margins.
When adding constraints to uiimageview. Uncheck constraint to margin.
I have a UIImageView in custom cell ,Maximum size of UIImagView Can be 100X100. if there is no Image in UIImageView than its height should be Zero. How to specify constraint for this in xib?
Observer left cell image. "There is blank space of height 100 because cell does not have any image to display." There should not be any blank space between hello and heart button.
Right cell image is fine.There is image to display so cell is displaying it.and other component are coming below it.
Put the image inside a div element and set the max-height css property to 100px.
If an Iboutet is connected to the height constraint of the UIImageView then in the custom cell class you may check if there is image set the height constraint a value otherwise set to 0 and the heart and comment components should be pinned to image view.
So that on setting height constraint to 0, rest of the components move closer to "hello".
in my app the UITableViewCell size are dynamic which means each has it's own height. inside of each cell there is a background image in a UIImageView. Through storyboard, i used autolayouts to customize the UIImageView to automatically stretch as the cell is stretched. The problem is that when they stretch the whole image stretches with the corners. So i was looking up online and i came over using resizableImageWithCapInsets: in order to stretch the stretchable sides and exclude the unwanted ones. So i tried the following code in tableView: cellForRowAtIndexPath: as i wanted the image to be stretched vertically only (height):
[cell.backgroundImage.image resizableImageWithCapInsets:UIEdgeInsetsMake(16, 0, 16, 0)];
however, the problem persisted as in the picture below
As you can see, the image corners are still stretched. What am i doing wrong? is the edgeInset values wrong? or should i place the code somewhere else ?
You create UIEdgeInsets values using the UIEdgeInsetsMake() function. UIEdgeInsets encapsulates four different CGFloat values for the inset values of the top, bottom, left, and right individually. Positive inset values shrink the content area, while negative inset values will effectively increase it. Make sure you create the image first and apply the insets there and then, Once that is done then apply the image to the backgroundView as opposed to trying to edit the edge insets from the backgroundView.image property.
UIImageView *cellBGIV =
[[UIImageView alloc] initWithImage:[[UIImage imageNamed:#"imageName"]
resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]];
cell.backgroundView = cellBGIV;
I have a custom UITableViewCell subclass with width of 300.
Since the cell is 20pt shorter than the table view, When the cells get loaded, its placed on the left most position, is there a way to center this custom cell to the tableview's center?
I tried cell.center = self.tableView.center in cellForRowAtIndexPath, but it wont work. any idea?
You can pad your custom cell with 10px to the left so it will only appear to be centered, so you just make the width 310 and move everything else inside by 10 px.
a) Resize your UITableView to 300 and center it.
or
b) Make your cell's width same as UITableView's width. Make your custom cell's background color clearColor. Add one more view to your custom cell subclass that will contain every other view and add every view in that view. Think of this like an illusion where the cell is actually wider but it's contents are centered in a fake view.
My UIView (width: 352px) has a UIImageView subview (default width in Storyboard: 312px).
I want the UIImageView to adapt itself to the dimensions of the image it contains with the constraint that the width of the image view shouldn't exceed a maximal width size (in my case, 312px).
I set up the 'autosizing' configuration of my UIImageView to have a fixed left, top and right margin size. Nevertheless, when I call sizeToFit on my UIImageView and its image is larger than 352px, the UIImageView gets wider than its containing UIView.
Is there a convenient method to prevent such a behavior without doing the math based on the image dimensions? Am I using sizeToFit the right way?
Just use setClipsToBounds:
[imageView setClipsToBounds:YES];