Reinhard Männer Reinhard Männer - 4 months ago 15
iOS Question

UITableView shows sometimes a separating line between the cells, on the iPhone, not on the iPad

I have a

tableView
with dynamic
tableViewCells
, and the separator property is set to
none
.

Each cell has 3
subviews
, called here backgroundViews, of the cell height, placed with equal width side by side. They present a background color.

Each of these backgroundViews has an
imageView
as ist own
subview
. The
imageView
has the same size as its backgroundView.

The
tableViewCell
and its subviews are layed out by autolayout, i.e. the
imageViews
have margins of 0 to their backgroundView, and the 3 backgroundViews have margins of 0 to the
tableViewCell
top and bottom, the left backgroundView has a margin of 0 to the left edge of the cell, the right backgroundView has a margin of 0 to the right cell edge, and all 3 backgroundViews have equal widths.

enter image description here

In the simplest case, the
image
property of the
imageViews
is
nil
, so that the colored background of the backgroundViews is visible.

When I run the app on an iPad (simulator or device), everything looks fine.

When I run it on an iPhone (simulator or device), there are sometimes little separating lines between some of the cells, maybe 1 point high (in the screenshot below after the 2nd and the 5th cell).

enter image description here
This separating line is not related to the backgroundViews, since these have a background color, and the separating line is white. It is neither related to the
tableViewCell
, nor the
contentView
, since both have a clear background color. It is neither related to the
tableView
itself, since its background color is set to black.

I have no idea where this separating line comes from, nor why it shows up only on the iPhone, and not of the iPad.
Any suggestion how I could get rid of these annoying lines is welcome.

Answer

The problem was the following:
I divided the tableViewCell width by 3, and set the tableView's rowHeight property to the same value, to get 3 squares side by side.
On the iPad, the row height was 768/3 = 256, an integer value.
On the iPhone, the row height was 320/3 = 106.66666666666667, a fractional value. Thus, the row height could not be mapped 1:1 to the screen points.
When I rounded the row height by

self.tableView.rowHeight = ceil(fieldWidth);

the problem disappeared.