Customize UITableView header section

Question

I want to customize UITableView header for each section  So far  I ve implemented - UIView   tableView  UITableView   tableView viewForHeaderInSection  NSInteger section  this UITabelViewDelegate method  What I want to do is to get current header for each section and just add UILabel as a subview  So far  I m not able to accomplish that  Because  I couldn t find anything to get default section header  First question is there any way to get default section header  If it s not possible  I need to create a container view which is a UIView but this time I need to set default background color shadow color etc  Because  if you look carefully into section s header  it s already customized  How can I get these default values for each section header

User · Answer

Use tableView  willDisplayHeaderView  to customize the view when it is about to be displayed     This gives you the advantage of being able to take the view that was already created for the header view and extend it  instead of having to recreate the whole header view yourself   Here is an example that colors the header section based on a BOOL and adds a detail text element to the header   -  void tableView  UITableView   tableView willDisplayHeaderView  UIView   view forSection  NSInteger section         view tintColor    UIColor colorWithWhite 0 825 alpha 1 0      gray       view tintColor    UIColor colorWithRed 0 825 green 0 725 blue 0 725 alpha 1 0      reddish       view tintColor    UIColor colorWithRed 0 925 green 0 725 blue 0 725 alpha 1 0      pink         Conditionally tint the header view     BOOL isMyThingOnOrOff    self isMyThingOnOrOff        if  isMyThingOnOrOff            view tintColor    UIColor colorWithRed 0 725 green 0 925 blue 0 725 alpha 1 0         else           view tintColor    UIColor colorWithRed 0 925 green 0 725 blue 0 725 alpha 1 0                 Add a detail text label  which has its own view to the section header           CGFloat xOrigin   100     arbitrary     CGFloat hInset   20      UILabel  label     UILabel alloc  initWithFrame CGRectMake xOrigin   hInset  5  tableView frame size width - xOrigin -  hInset   2   22         label textAlignment   NSTextAlignmentRight        label setFont  UIFont fontWithName   Helvetica-Bold  size 14 0      label text     Hi   I m the detail text         view addSubview label

User · Answer

If you use default header view you can only change the text on it with  -  NSString   tableView  UITableView   tableView titleForHeaderInSection  NSInteger section   For Swift   override func tableView tableView  UITableView  titleForHeaderInSection section  Int  - gt  String      If you want to customize the view you need to create a new one your self

User · Answer

samwize s solution in Swift  so upvote him    Brilliant using same recycling mechanism also for header footer sections   func tableView   tableView  UITableView  viewForHeaderInSection section  Int  - gt  UIView        let settingsHeaderSectionCell SettingsHeaderSectionCell   self dequeueReusableCell withIdentifier   SettingsHeaderSectionCell   as  SettingsHeaderSectionCell      return settingsHeaderSectionCell

User · Answer

You can try this    - UIView   tableView  UITableView   tableView viewForHeaderInSection  NSInteger section       UIView  view     UIView alloc  initWithFrame CGRectMake 0  0  tableView frame size width  18           Create custom view to display section header           UILabel  label     UILabel alloc  initWithFrame CGRectMake 10  5  tableView frame size width  18         label setFont  UIFont boldSystemFontOfSize 12         NSString  string   list objectAtIndex section          Section header is in 0th index            label setText string        view addSubview label        view setBackgroundColor  UIColor colorWithRed 166 255 0 green 177 255 0 blue 186 255 0 alpha 1 0      your background color        return view

User · Answer

Magically add Table View Header in swift  Recently I tried this   I needed one and only one header in the whole UITableView    Like I wanted a UIImageView on the top of the TableView  So I added a UIImageView on top of the UITableViewCell and automatically it was added as a tableViewHeader  Now I connect the ImageView to the ViewController and added the Image   I was confused because I did something like this for the first time  So to clear my confusion open the xml format of the MainStoryBoard and found the Image View was added as a header   It worked for me  Thanks xCode and swift

User · Answer

besides to titleForHeaderInSection  you can simply change view of header  footer  check my comment here  Change UITable section backgroundColor without loosing section Title

User · Answer

Swift 4 2  In Swift 4 2 the name of table is a little changed       func tableView   tableView  UITableView  viewForHeaderInSection section  Int  - gt  UIView            let view   UIView frame  CGRect x  0  y  0  width  tableView frame size width  height  18           let label   UILabel frame  CGRect x  10  y  5  width  tableView frame size width  height  18           label font   UIFont systemFont ofSize  14          label text   list objectAtIndex section  as  String         view addSubview label          view backgroundColor   UIColor gray    Set your background color          return view

User · Answer

call this delegate method   - NSString   tableView  UITableView   tableView titleForHeaderInSection  NSInteger section   return   Some Title       this will give a chance to automatically add a default header with dynamic title    You may use reusable and customizable  header   footer     https   github com sourov2008 UITableViewCustomHeaderFooterSection

User · Answer

If you just want to add title to the tableView header dont add a view  In swift 3 x the code goes like this   override func tableView   tableView  UITableView  titleForHeaderInSection section  Int  - gt  String        var lblStr          if section    0           lblStr    Some String 1            else if section    1          lblStr    Some String 2            else          lblStr    Some String 3            return lblStr     You may implement an array to fetch the title for the headers

User · Answer

-  void tableView  UITableView   tableView willDisplayHeaderView  UIView   view forSection  NSInteger section       if  view isKindOfClass  UITableViewHeaderFooterView class              UITableViewHeaderFooterView  headerView   view             headerView textLabel  setTextColor  UIColor colorWithHexString   666666               headerView textLabel  setFont  UIFont fontWithName   fontname  size 10              If you want to change the font of the textLabel in your section header you want to do it in willDisplayHeaderView  To set the text you can do it in viewForHeaderInSection or titleForHeaderInSection  Good luck

User · Answer

Swift 3 version of lochana and estemendoza answers   override func tableView   tableView  UITableView  viewForHeaderInSection section  Int  - gt  UIView         let view   UIView frame  CGRect x 0  y 0  width tableView frame size width  height 18       let label   UILabel frame  CGRect x 10  y 5  width tableView frame size width  height 18       label font   UIFont systemFont ofSize  14      label text    This is a test       view addSubview label       view backgroundColor   UIColor gray      return view      Also  be advised that you ALSO have to implement   override func tableView   tableView  UITableView  heightForHeaderInSection section  Int  - gt  CGFloat       return 100

User · Answer

Swift version of Lochana Tejas answer   override func tableView tableView  UITableView  viewForHeaderInSection section  Int  - gt  UIView        let view   UIView frame  CGRectMake 0  0  tableView frame size width  18       let label   UILabel frame  CGRectMake 10  5  tableView frame size width  18       label font   UIFont systemFontOfSize 14      label text   list objectAtIndex indexPath row  as  String     view addSubview label      view backgroundColor   UIColor grayColor      Set your background color      return view

User · Answer

why not use UITableViewHeaderFooterView

User · Answer

This is the easiest solution possible  The following code can be used directly for creating a custom section header       - UIView   tableView  UITableView   tableView viewForHeaderInSection  NSInteger section       SectionHeaderTableViewCell  headerView    tableView dequeueReusableCellWithIdentifier   sectionHeader           For creating a drop menu of rows from the section         THIS IS JUST AN EXAMPLE  YOU CAN REMOVE THIS IF-ELSE        if    self sectionCollapsedArray section  boolValue                 headerView imageView image    UIImage imageNamed   up icon              else               headerView imageView image    UIImage imageNamed   drop icon                 For button action inside the custom cell     headerView dropButton tag   section       headerView dropButton addTarget self action  selector sectionTapped   forControlEvents UIControlEventTouchUpInside          For removing long touch gestures      for  UIGestureRecognizer  recognizer in headerView contentView gestureRecognizers                 headerView contentView removeGestureRecognizer recognizer            headerView removeGestureRecognizer recognizer              return headerView contentView      NOTE  SectionHeaderTableViewCell is a custom UITableViewCell created in Storyboard

User · Answer

The other answers do a good job of recreating the default header view  but don t actually answer your main question      is there any way to get default section header     There is a way - just implement tableView willDisplayHeaderView forSection  in your delegate  The default header view will be passed into the second parameter  and from there you can cast it to a UITableViewHeaderFooterView and then add change subviews as you wish   Obj-C  -  void tableView  UITableView   tableView willDisplayHeaderView  UIView   view forSection  NSInteger section       UITableViewHeaderFooterView  headerView    UITableViewHeaderFooterView   view          Do whatever with the header view    e g         headerView textLabel textColor    UIColor whiteColor      Swift  override func tableView   tableView  UITableView  willDisplayHeaderView view  UIView  forSection section  Int        let headerView   view as  UITableViewHeaderFooterView         Do whatever with the header view    e g         headerView textLabel  textColor   UIColor white

User · Answer

If I were you  I would make a method which returns an UIView given a NSString to contain  For example     UIView    sectionViewWithTitle  NSString   title    In the implementation of this method create a UIView  add a UILabel to it with the properties you want to set  and of course set its title to the given one

User · Answer

Try this        override func tableView tableView  UITableView  willDisplayHeaderView view  UIView  forSection section  Int            Background view is at index 0  content view at index 1     if let bgView   view subviews 0  as  UIView                  do your stuff            view layer borderColor   UIColor magentaColor   CGColor     view layer borderWidth   1

User · Answer

Full 2019 example to copy and paste First set  quot Grouped quot  on storyboard  it has to happen at init time  you can t really set it later  so it s easier to remember to do it on storyboard   Next  Must implement heightForHeaderInSection due to Apple bug  func tableView   tableView  UITableView                     heightForHeaderInSection section  Int  - gt  CGFloat       return CGFloat 70 0     There is still an Apple bug - for ten years now - where it simply won t show the first header  i e   index 0  if you don t have heightForHeaderInSection call  So  tableView sectionHeaderHeight   70 simply doesn t work  it s broken  Setting a frame achieves nothing  In viewForHeaderInSection simply create a UIView    It is pointless   achieves nothing if you UIView frame      since iOS simply sets the size of the view as determined by the table  So the first line of viewForHeaderInSection will be simply let view   UIView   and that is the view you return  func tableView   tableView  UITableView                         viewForHeaderInSection section  Int  - gt  UIView        let view   UIView            let l   UILabel       view addSubview l      l bindEdgesToSuperview       l backgroundColor    systemOrange     l font   UIFont systemFont ofSize  15      l textColor    yourClientsFavoriteColor          switch section       case 0          l text     quot First section on screen quot      case 1          l text     quot Here s the second section quot      default          l text     quot  quot                 return view    That s it - anything else is a time waste  Another  quot fussy quot  Apple issue   The convenience extension used above is  extension UIView               incredibly useful           func bindEdgesToSuperview                      guard let s   superview else               preconditionFailure  quot  superview  nil in bindEdgesToSuperview quot                              translatesAutoresizingMaskIntoConstraints   false         leadingAnchor constraint equalTo  s leadingAnchor  isActive   true         trailingAnchor constraint equalTo  s trailingAnchor  isActive   true         topAnchor constraint equalTo  s topAnchor  isActive   true         bottomAnchor constraint equalTo  s bottomAnchor  isActive   true

User · Answer

The selected answer using tableView  viewForHeaderInSection  is correct   Just to share a tip here    If you are using storyboard xib  then you could create another prototype cell and use it for your  section cell   The code to configure the header is similar to how you configure for row cells   -  UIView   tableView  UITableView   tableView viewForHeaderInSection  NSInteger section       static NSString  HeaderCellIdentifier     Header        UITableViewCell  cell    tableView dequeueReusableCellWithIdentifier HeaderCellIdentifier       if  cell    nil            cell     UITableViewCell alloc  initWithStyle UITableViewCellStyleDefault reuseIdentifier HeaderCellIdentifier                 Configure the cell title etc      self configureHeaderCell cell inSection section        return cell

User · Answer

Going back to the original question  4 years later   rather than rebuilding your own section header  iOS can simply call you  with willDisplayHeaderView forSection   right after it s built the default one  For example  I wanted to add a graph button on right edge of section header   -  void tableView  UITableView   tableView willDisplayHeaderView  UIView   view forSection  NSInteger section       UITableViewHeaderFooterView   header    UITableViewHeaderFooterView    view      if  header contentView subviews count  gt   0  return    in case of reuse     CGFloat rightEdge   CGRectGetMaxX header contentView bounds       UIButton   button     UIButton alloc  initWithFrame CGRectMake rightEdge - 44  0  44  CGRectGetMaxY header contentView bounds          button setBackgroundImage  UIImage imageNamed   graphIcon   forState UIControlStateNormal        button addTarget self action  selector graphButtonPressed   forControlEvents UIControlEventTouchUpInside        view addSubview button

User · Answer

If headerInSection isn t show  can try this   -  CGFloat tableView  UITableView   tableView heightForHeaderInSection  NSInteger section       return 45      This returns a height for the header of a given section

User · Answer

- UIView   tableView  UITableView   tableView viewForHeaderInSection  NSInteger section         put your values  this is part of my code     UIView  view     UIView alloc  initWithFrame CGRectMake 0  0  self view bounds size width  30 0f         view setBackgroundColor  UIColor redColor        UILabel  lbl     UILabel alloc  initWithFrame CGRectMake 20  5  150  20         lbl setFont  UIFont systemFontOfSize 18         lbl setTextColor  UIColor blueColor         view addSubview lbl         lbl setText  NSString stringWithFormat   Section   ld   long section         return view

User · Answer

swif 4 2  override func tableView   tableView  UITableView  willDisplayHeaderView view  UIView  forSection section  Int        guard let header   view as  UITableViewHeaderFooterView else   return        header textLabel  textAlignment    center    for all sections      switch section       case 1     only section No 1         header textLabel  textColor    black     case 3     only section No 3         header textLabel  textColor    red     default             header textLabel  textColor    yellow

[ios] Customize UITableView header section

Examples related to ios

Examples related to objective-c

Examples related to swift

Examples related to uitableview