I have setup a UITableView (320 wide) with a UITableViewCell created in IB, the cell is also 320 wide. After setting a background image (320 wide) in UITableViewCell (or my subclass to be correct) I have noticed that the cells fall short of the right hand side of the UI (notice the blue on the selected cell and the grey on the one above) Does anyone know what is causing this?
Cheers Gary
I was setting the seperator style and the seperator color on the UITableView, this takes 1 pixel off the cell height for the seperator and offsets the backgound by about 5 pixels to the right. If I reduce the background image thats going into the cell from 320x65 to 320x64 it fits perfectly with no offset.
The only difference between the two screens below is:
LEFT: UITableView Seperator = "None" (UITableViewCell background has no offset)
RIGHT: UITableView Seperator = "Single Line" (UITableViewCell background has offset)
DATA:
Cell resolution: 320x65
Cell view: 320x65
Cell Background Image Resolution: 320x65
If you want use the separator your Cell Background Image needs to be 320x64, this will stop it shifting sideways and display the cell correctly.
Cheers Gary
It seems to me that you're just not setting the contentMode of your background image view correctly (i.e. you're setting it to aspectFit or something). Are you sure that it's offset by 5, and not actually shrunk by 5 pixels?
For example, if the original picture is 320x65, and the height is reduced to 64, aspectFit will scale it, while keeping the same aspect ratio, to 64/65 * 320 ~= 315.
Related
I have a UITableViewCell that only contains a UIImageView. I am using UITableViewAutomaticDimension which is working perfectly for all the other cells in my tableview, except for this image view cell.
tableView.estimatedRowHeight = 100
tableView.rowHeight = UITableViewAutomaticDimension
I want the image to be as tall as it wants, maintain the image's aspect ratio and fill the width. To do that I set the image view's constraints to be pinned to the cell's frame using auto layout and I set the image views contentMode to be Aspect Fit. I set the UIImageView's background to be red. And the cell above it is white. The actual image is black down below.
When I do that, the cell has about 100 px above the image and 100px below. but the images size is exactly what I want. Has anyone had the same issue?
Because that red space isn't always the same size and it was a lot taller when I have a really big image in there, I believe the layout thinks the height should be the actual height of the image, without any aspect fit constraint.
Thanks for any help!
I want the image to be as tall as it wants, maintain the image's aspect ratio and fill the width. To do that I set the image view's constraints to be pinned to the cell's frame using auto layout and I set the image views contentMode to be Aspect Fit.
You can't do all that with only auto layout. This is because a UIImageView's intrinsic content size is just its image's full size.
Instead, calculate the appropriate height and set it when you set your image:
let imageViewWidth : CGFloat = // the width you want…
imageHeightConstraint.constant = image.size.height / image.size.width * imageViewWidth;
Note that this will fail if you have a 0x0 image due to division by zero. If that's possible in your app, check for this case and just set the height constant to 0.
At this point, reload the row so that the table view will recalculate the height.
I have implemented lazy loading in my UITableView,
in which, i am downloading images from server, and server contains images with different sizes..
and displays like this,
:
Images getting displayed properly but the problem is UITableViewCell Text is not getting displayed properly align in single line as you can see in the image alignment of UITableViewCell Text is not in the single line
Means:Cell 0 to Cell 4 is displayed properly because server contains images with size of 100*100 for Cell 0 to Cell 4 but alignment of cell 5 and cell 6 is different because server contains image with different size of 85*85
Is there any way in which i can set Text alignment in single line ??
Thanks in advance.
i Suggest you to use Custom table-cell with One image-view and Label and set Imageview contentMode like bellow
imageView.contentMode = UIViewContentModeScaleAspectFill; //will fill the frame
imageView.contentMode = UIViewContentModeScaleAspectFit; //will show the entire image, possibly leaving areas of the frame open.
and your Label set Number of Line 0
I think Custom TableView Cell will do for you.
You can design a cell like below
https://www.dropbox.com/s/r9r6dsmdwmpk50h/customcell.png
You can use
imageView.contentMode = UIViewContentModeScaleAspectFit;
to adjust the imagview width and height based on image size
does anybody know how to vertically align these text elements. I would like to define an absolute left padding for the text which is not affected by each image dimensions. It's quite annoying like this:
thanks a lot!
You have two options.
1) UITableViewCell has a textLabel property which you can access and adjust the frame. See the Apple docs for more info on UITableViewCell
2) You can ensure that all of your icons have the same width.
You could do it by slecifying the frame on your UIImage, UILabel, or both. Set the float x to a safe distance from the left on the label or specify the width of your widest image as the width of the UIImage frame.
I can clarify more if needed when I'm not on my mobile.
I have a UITableViewCell with two subviews, a UILabel on the left, and a random input control on the right. The random input control on the right can vary in size, as can the length of the text, but since I can set the word wrap of the text on the left, I need to be able to adjust the size of the UILabel based on the width of the random input control. To complicate matters, the app needs to work in both portrait and landscape modes, which give the table cells different widths.
This wouldn't be difficult if I could read the width of the table cells and set the widths of its subviews appropriately, but at creation time the width of the cell is 0.
Any ideas?
Nothing easier than that: every UITableViewCell is also a UIView, which has a method designed for just that: layoutSubviews, which is called whenever the view (here: cell) needs a re-layout. This is where you lay out the content.
In the clock app that comes with the iPhone there is a tab view for setting alarms. In that view each of the UITableViewCell instances have a drop shadow around them. Does anyone know how to achieve the same effect?
Also it looks like the tab bar at the very bottom has a drop shadow above it as well.
Ideas on how to achieve the same look would be greatly appreciated.
I was wondering how to do that and it just occurred to me to use the UITableView's footer view:
myTableView.tableFooterView = myCustomViewWithDropShadowImage;
I would guess that there is an extra cell which contains just a background image which is the transparent dropshadow. If it's not a cell (because that might create scrolling weirdness) it is probably an extra view positioned below the bottom cell of the UITableview which - again - simply contains an image of the drop shadow.
Like Thomas said, create a 100% width image (say, 320 x 40px on non-retina devices) and create 4 instances of UIImageView with it. The first, at the top of your main view. The second, at the bottom, and in addition do this:
UIImageView* bottomShadow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"BottmShadow.png"]]
bottomShadow.transform = CGAffineTransformMakeScale(1, -1);
(Flip it vertically)
Then, do the same with the other two, but place them as subviews of the Table View. One of them just outside the first row:
CGRect tableTopShadowFrame = tableTopShadow.frame;
tableTopShadowFrame.origin.y = -(tableTopShadowFrame.size.height);
[tableTopShadow setFrame:tableTopShadowFrame];
and the other just below the last row (you need to know the height of all the rows together. If your rows are all the same height, it is row height times number of rows).
Finally, you need to set the table's backgroundColor property to transparent
tableView.backgroundColor = [UIColor clearColor];
and possibly set some darkish gray for your main view's background color.