[Xamarin.iOS] Blurry text in ShinobiDataGrids


#1

Hello. I’ve encountered a problem while using ShinobiDataGrids. The text in header and cells appears blurry sometimes:

This case isn’t the most severe one, here I’ve already played with font sizes and it kind of helped, but did not go away completely. From what I was able to gather from these forums, this problem occurs because of text being rendered at sub-pixel coordinates. I’ve tried aligning cell Frame and its subviews’ Frames in PrepareCellForDisplay method, but it didn’t help:

protected override void PrepareCellForDisplay(ShinobiDataGrid grid, SDataGridCell cell)
		{
			SDataGridCoord GridCoord = cell.Coordinate;
			cell.Frame = new System.Drawing.Rectangle((short)cell.Frame.X, (short)cell.Frame.Y, (short)cell.Frame.Width, (short)cell.Frame.Height);

			SDataGridTextCell textCell = (SDataGridTextCell)cell;

			string text = Data[Data.Count - (GridCoord.Row.RowIndex + 1)][GridCoord.Column.Tag];

			if(text != null)
				textCell.Text = text;
			else
				textCell.Text = "н/д";


			foreach (UIView v in cell.Subviews)
				v.Frame = new System.Drawing.Rectangle((int)v.Frame.X, (int)v.Frame.Y, (int)v.Frame.Width, (int)v.Frame.Height);
		}

I also tried creating a wrapper around ShinobiDataGrid class, overriding its Draw method to disable any kind of antialiasing or subpixel rendering via CGContext, but that didn’t help either:

public class NoAAShinobiGrid: ShinobiGrids.ShinobiDataGrid
	{
		public NoAAShinobiGrid(RectangleF Bounds)
			:base(Bounds)
		{
		}

		public override void Draw(System.Drawing.RectangleF rect)
		{
			using(CGContext g = UIGraphics.GetCurrentContext())
			{
				g.SetShouldAntialias(false);
				g.SetShouldSmoothFonts(false);
				g.SetAllowsFontSmoothing(false);
				g.SetAllowsAntialiasing(false);
				g.SetShouldSubpixelPositionFonts(false);
				g.InterpolationQuality = CGInterpolationQuality.None;
				g.SetAllowsSubpixelPositioning(false);
				g.SetAllowsFontSubpixelQuantization(false);
				base.Draw(rect);
			}
		}
	}

Am I missing something? I really need to get rid of that blur, it just looks awful, to the point that it’s considered unpresentable by our managers, especially when the grid is shown next to the custom view with clean and sharp text drawn via CGContext:

Is there any normal way or perhaps some workaround to do this?


#2

As you’ve stated, this blur can be an effect of views rendering on a sub-pixel boundary. Unfortunately, due to the number of views used in the grid, it’s difficult to know exactly which view is causing the problem - we only know that it’s going to be a parent of the UILabel on the cell.

  • You could prove this theory by brute force, by looping through every subview of the grid, and every subview of that subview and so forth, setting the frame and calling CGRectIntegral on each of these frames. (This may be even be a quick-fix it doesn’t affect performance too much.) If this fixes the issue, then you know it’s sub-pixel boundaries.
  • You could set a break-point in didFinishLayingOutShinobiGrid:, pick a cell you know is blurry, and inspect it’s parent views, looking for a view sitting on a sub-pixel boundary.
  • You could try looking at your grid’s styling options. Would any of your column widths, grid lines, insets, row heights, or anything you’re modifying, be causing these cells to render on a sub-pixel boundary? Comment out all the custom styling code of your grid line by line. You might be able to pin point exactly what’s causing this issue.

I hope the above suggestions point you in the right direction.

Best regards,
Jan