I have a two-dimensional table in my app and I want to have a 1 pixel thick border around each cell. Each cell is a distinct UIView and I found that I can draw such borders with something like:
dataCell.layer.borderWidth = 0.5; // repeat for each cell
tableContainer.layer.borderWidth = 1.0; // do once for the entire table
That was good for both retina and non-retina devices. However now I want to render my table into an image first before displaying it, and on non-retina devices the result looks like this:
The table's border is fine, but the individual cell borders got blurry. The method I use for converting the whole thing to image is:
- (UIImage *)getImage {
UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
[[self layer] renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return viewImage;
}
That's a category on UIView. The reason I want to display this as an image is because when the device is rotated, the resulting animation looks much better when the whole table is a single static object, otherwise all the subviews become de-coupled from each other and animate along different trajectories into their final positions.
What can I do to fix this blurriness?
Edit:
While it's true that you cannot truly display lines smaller than 1 pixel, in practice there are two things that could make this work. First of all, on retina screens 0.5 "logical" pixels is exactly 1 real pixel and iOS renders is perfectly fine in that case.
On non-retina devices the iOS does something different: when I ask for 0.5px border all around a view, it draws a 1px border at the left and bottom of the view. When I put many such views side by side in a grid, the result is actually very sensible - I get a 1px border between the views.
Here is a screenshot of a non-retina rendition of 0.5px borders around the white cells, right side of which is missing (I typically just add a 1px border around the entire container to fix that). This is without turning it into an image.
I thought that UIGraphicsGetCurrentContext() will do a WYSIWYG kind of rendering and give me an image that is exactly like what would render on screen otherwise. Is there any way to trick it to do that?
