UIEdgeInsetsMake creating a weird band on the cell, and I don't know how to fix it

Question

I\'m trying to use UIEdgeInsetsMake to make set the background of my cell to a gradient. I\'ve tried multiple things to get it to work, but no matter what I use

Answer 1

Update

As it turns out, I was wrong about the background, see the approved response.

On the other hand, adding a separator doesn't "solve" the issue, but it hides it pretty darn well, so my answer might still be valid in that sense.

Original post

My guess is that since you are trying to draw your own separator, the background that the tableView uses as "selected" background is already scaled considering the default separator style, I replicated the issue by putting UITableViewCellSeparatorStyleNone, and painted to cells with different colors:

Notice the tiny red line in between of the cells. Try setting the color of the separator (tableView.separatorColor) to match your style, and remove the bottom line from the asset.

Also, since we're talking about an stretchable asset, you should consider that the stretchable-image takes the insets as "this sides should be fixed" and the center region, gets copy-pasted all around, so, to have a truly stretchable graphic, you should do something like:

// For the top one
UIEdgeInsetsMake(38.0, 5.0, 5.0, 5.0)

// For the bottom one
UIEdgeInsetsMake(5.0, 5.0, 38.0, 5.0)

The key here, is that this leaves just one pixel tall of repeating pattern, which would be a solid color, and then the borders have the proper fade.

Here's the graphical explanation of the later, (I reused one file I made for the company designers and applied your dimensions):

(Notice the tiny red line in between of the cells)