I wanted to share a little trick I discovered when creating custom section headers for a UITable. The issue is that UIKit renders in an undesirable way (in my opinion) when using the combination of default separator lines (between table cells) and custom section header views. The examples shown here are in C# using Xamarin.iOS, but the same technique applies if you are using Objective-C.
Before we look at the issue, let’s take a look at a vanilla UITableView with the standard iOS defined section headers:
I have purposely made the separator lines red so that you can see that, when using the standard UIKit section headers, the separators are not drawn at the top or bottom of the section headers. This looks correct to me.
Now let’s make this table view match the colors of my favorite football team. In order to do this we will need to change the background and text colors, I am assuming you are already familiar with changing the basic properties of table views, and cells. The most involved step is that we will need to supply our own views for the section headers, as these are completely internal to the table view and cannot be customized. This is done by overriding the GetViewForHeader method on the table’s Source and returning a custom UIView. In this case, some simple code for this looks as follows:
And the result:
Here you can see the issue, the framework is drawing a separator right above our custom section header view, and it does not look good. This does not happen when Apple provides the section headers. The problem here is that no matter what size we make the custom section header view, the framework will resize it to fit the section height we specify for the table view, and will always draw the additional separator 1 point above it. We can of course roll our own separator lines by providing custom table cells, coding the logic to figure out when to draw a separator at the bottom of a cell, and using these custom cells in our table, but this is some pretty heavyweight work. Fortunately, there is a small trick we can use to obscure the problematic separator line. The trick is that in iOS, both UIViews and CALayers (a CoreGraphics drawing surface contained in a view) by default do not constrain or clip SubViews or SubLayers that are placed within them. This means that although the framework will resize our headerView, we can place a child UIView or CALayer within this, and size it to extend beyond the bounds of our headerView UIView – thus masking the separator line we do not want.
Placing another UIView inside of our headerView is the easiest way to go, but I will show code for doing this with a CALayer, so that we can add a bit more polish and easily put a nice gradient in our section header:
As mentioned in the comments, the magic is in Line 11, where we shift the Y coordinate up by one so that the header gradient will be drawn out of the bounds enforced by UITableView rendering and will cover the separator line drawn by UIKit. The end result looks as follows:
Latest posts by Falafel Posts (see all)
- Matching Complex Query String Rewrite Rule in IIS - March 22, 2017
- Disable Content Filters in Sitefinity - March 8, 2017
- On Sitefinity Custom Widget Caching - February 22, 2017
- Dynamic Content Detail Widget Templates in Sitefinity - February 8, 2017
- Using Google Services in UWP C# Apps – Part 2 - February 7, 2017