CODEWITHSUNDEEP
iosswiftuitableview
sauly
sauly

Reputation: 27

how can i edit a table view section header ios swift

Im using a table view controller with headers for each of my three sections. I want to be able to change the look of the headers what would be the best way to do that.

something similar to how snapchat stories page headers look

Upvotes: 1

Views: 13419

Answers (4)

Subin K Kuriakose
Subin K Kuriakose

Reputation: 849

You can customise your section header by create customised UITableViewCell in storyboard.

You design 3 section as same as like snapshot in storyboard.

Here is the example of two section with two different UITableView cells I used

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {    
 //Say 2 section with two different look
 if section == 0{
    let header = tableView.dequeueReusableCellWithIdentifier("HeaderTableViewCell1")! as! HeaderTableViewCell1
    header._lblGroupName.text = ""
    header._btnExpand.addTarget(self, action: "hideSection:", forControlEvents: .TouchUpInside)

    header._lblTotalCount.text = ""
    return header.contentView
 }
 else{
   let header = tableView.dequeueReusableCellWithIdentifier("HeaderTableViewCell2")! as! HeaderTableViewCell2
    header._lblGroupName.text = ""
    header._btnExpand.addTarget(self, action: "hideSection:", forControlEvents: .TouchUpInside)

    header._lblTotalCount.text = ""
    return header.contentView
 }
}

Create two custom UITableViewCell classes. Set the outlet 

class HeaderTableViewCell1: UITableViewCell {

@IBOutlet weak var _lblTotalCount: UILabel!
@IBOutlet weak var _btnExpand: UIButton!
@IBOutlet weak var _lblGroupName: UILabel!

}

class HeaderTableViewCell2: UITableViewCell {

@IBOutlet weak var _lblTotalCount: UILabel!
@IBOutlet weak var _btnExpand: UIButton!
@IBOutlet weak var _lblGroupName: UILabel!

}

Upvotes: 7

Davyd Geyl
Davyd Geyl

Reputation: 4623

Make a custom view for your header, register it with either: 

- (void)registerNib:(nullable UINib *)nib forHeaderFooterViewReuseIdentifier:(NSString *)identifier;

- (void)registerClass:(nullable Class)aClass forHeaderFooterViewReuseIdentifier:(NSString *)identifier;

and customise it in:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section;

UPD:

Swift versions:

Register your nib in viewDidLoad:

    override func viewDidLoad() {
      super.viewDidLoad()
     tableView.registerNib(UINib(nibName: "YourNibName", bundle:nil),               forHeaderFooterViewReuseIdentifier: "YourIdentifier")
   }

Implement UITableViewDelegate method:

 func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)

and customise the view in there

Upvotes: 0

ebby94
ebby94

Reputation: 3152

Just add this and do your required customization

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: tableView.sectionHeaderHeight))
    // Do your customization

    return view
}

Upvotes: 0

Himali Shah
Himali Shah

Reputation: 189

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let  headerCell = tableView.dequeueReusableCellWithIdentifier("HeaderCell") as! CustomHeaderCell
    headerCell.backgroundColor = UIColor.cyanColor()

    switch (section) {
    case 0:
      // Do your customization
      //return sectionHeaderView
    case 1:
      // Do your customization
      //return sectionHeaderView
    case 2:
      // Do your customization
      //return sectionHeaderView
    default:
      //return sectionHeaderView
    }

    return headerCell
  }


override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 40))
    footerView.backgroundColor = UIColor.blackColor()

    return footerView
  }

Upvotes: 0

Related Questions