UITableView header align with cell bounds

Question

I am generating a custom header view for my UITableView which has two horizontal lines up & down and a UILabel in between.

    let lineWidth = tableView.bounds.width //This is not correct, will never align with UITableViewCell
    let offset = (tableView.bounds.width - lineWidth)/2 //This will always yield 0, but my question is to compute line width that aligns with UITableViewCell as shown in the image attached to this question.
    let topLine = UIView(frame: CGRect(x: offset, y: 0, width: lineWidth, height: 1))
    topLine.backgroundColor = UIColor.white
    let bottomLine = UIView(frame: CGRect(x: offset, y: 49.0, width: lineWidth, height: 1))
    bottomLine.backgroundColor = UIColor.white
    let label = UILabel(frame: CGRect(x: 0, y: 1.0, width: tableView.bounds.width, height: 48.0))
    label.textColor = UIColor.white

    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50))
    headerView.addSubview(topLine)
    headerView.addSubview(label)
    headerView.addSubview(bottomLine)

Problem: I need the top & bottom lines to align with UITableViewCell bounds in the section as shown in the picture below. What I get with the code above is horizontal lines that cover the entire width of UITableView. How do I achieve it?

EDIT: Some answers here describe an arbitrary offset value, but the heart of the problem is how to compute offset that aligns with UITableViewCell bounds in the section? In other words, I need exact width of UITableViewCell's that go into the section.

score 0 · Answer 1 · answered Mar 04 '19 at 08:57

0

Your Offset will be practically zero as you are subtracting the same things

let lineWidth = tableView.bounds.width
let offset = (tableView.bounds.width - lineWidth)/2
let topLine = UIView(frame: CGRect(x: offset, y: 0, width: lineWidth, height: 1)) // this line gonna give offset as zero and width of full tableview width

Change this to the below code and try

let lineWidth = tableView.bounds.width - 20
let topLine = UIView(frame: CGRect(x: 10, y: 0, width: lineWidth, height: 1))

answered Mar 04 '19 at 08:57

Shruti

1,849
1
13
21

How do I calculate offset? That offset is temporarily zero BUT the question is how do I compute it relative to UITableViewCell bounds (which is unknown)? – Deepak Sharma Mar 04 '19 at 11:22
@DeepakSharma but there should be some predefined spacing u want to keep for the line from the leading and trailing with respect to tableviewCell/header? or what are ur parameters for ur offset? as `tableView.bounds.width` means the whole width of the tableview? – Shruti Mar 04 '19 at 11:28
What do I substitute tableView.bounds.width for (that's just a placeholder till I find a value)? I need width of UITableViewCells to be precise, but how do I get that? – Deepak Sharma Mar 04 '19 at 11:34
@DeepakSharma that is fine but main thing is how you wan to find the offset as `(tableView.bounds.width - lineWidth)` will always give you zero no matter bounds are assigned or not. What are your scenarios to keep the offset? on what basis you want to calculate the offset? – Shruti Mar 04 '19 at 11:53
Please forget my code and replace tableView.bounds.width with whatever you want but I need the alignment with lines of UITableViewCell, that's it. The offset is 0 because earlier I tried values such as 0.8*tableView.bounds.width, etc. – Deepak Sharma Mar 04 '19 at 19:37
@DeepakSharma i will suggest that whatever leading space u have given to location tagging label keep the same as offset – Shruti Mar 05 '19 at 04:29
I did not give any space, I just set cell.textLabel.text = "Location tagging" – Deepak Sharma Mar 05 '19 at 08:39

score -1 · Answer 2 · edited Oct 21 '19 at 09:20

-1

It seems the issue with the position of your top & bottom lines. As per the calculation of offset it always set to 0 for top & bottom lines. So it would be better to remove that offset calculation and you can add some desired static value as a x for CGRect of top & bottom lines.

As far as we are going to move the position of x for the top & bottom line don't forget to remove the added value for x position from the width of the top & bottom lines.

let yourLine = UIView(frame: CGRect(x: some_value, y: 0, width: Int(lineWidth - (some_value * 2)), height: 1))

The best practice is you can use some variables to achieve this.

edited Oct 21 '19 at 09:20

Dale K

25,246
15
42
71

answered Mar 04 '19 at 09:20

Maulik Pandya

2,200
17
26

How do I calculate offset? That offset is temporarily zero BUT the question is how do I compute it relative to UITableViewCell bounds(which is unknown at this point of header computation)? – Deepak Sharma Mar 04 '19 at 11:22
@DeepakSharma the issue is the calculation of offset. it will be always zero based on your current calculation. One more question what is the need for offset calculation. You can take some desired predefined value to a variable and assign it to x of the CGRect for your lines – Maulik Pandya Mar 04 '19 at 11:37
Please forget my code and replace tableView.bounds.width with whatever you want but I need the alignment with lines of UITableViewCell, that's it. The offset is 0 because earlier I tried values such as 0.8*tableView.bounds.width, etc. But each such scale factor yielded incorrect results. – Deepak Sharma Mar 04 '19 at 19:37
Alright, then the above code will help you. where some_value is the desired spacing you would like to try for the x position of the Top & Bottom lines. – Maulik Pandya Mar 05 '19 at 05:04
The some_value is a value which has been set by the separators insets (significant left/right margin). you can even set the custom value of the UITableView. Refer : https://stackoverflow.com/questions/31537196/ios-9-uitableview-separators-insets-significant-left-margin. So there will be no need to make any calculation to get the some_value. It will be some static value. – Maulik Pandya Mar 06 '19 at 04:55

UITableView header align with cell bounds

2 Answers2