title: Grouped UITableView with Shadow and Corner Radius?
body: <p>I was wondering how one might go about creating a grouped UITableView with sections that have a drop shadow and rounded corners. Also, the section header is selectable, so when the user clicks the header the cells in that section should collapse; therefore, the shadow and rounded corners will need to change to the new size of the section, just the header. Does anybody know how to do what I am talking about? I have attached a UI mockup for reference as well as some code.</p>
  
  <p>Here is a UI Mockup of what I wish to design:
  <a href="https://i.stack.imgur.com/oq2zO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oq2zO.png" alt="UI Design Mockup"></a></p>
  
  <p>This is the code I have to set up the tableView:</p>
  
  <pre><code>func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -&gt; UIView? {
      if section == 0 {
          return nil
      } else if settings[section - 1].isEmpty == false {
          let headerView = Bundle.main.loadNibNamed("HeaderTableViewCell", owner: self, options: nil)?.first as! HeaderTableViewCell
  
          let settingCategories = ["Account", "Notifications", "Personalized Feed", "Color Theme"]
  
          headerView.settingCategoryTitle.text = settingCategories[section - 1]
  
          let totalCellHeight = CGFloat(settings[section - 1].count * 63)
          let height = headerView.frame.height + totalCellHeight
  
          print("Needed Height: \(height)")
  
          headerView.clipsToBounds = false
          headerView.headerBackground.frame.size.height = height
  
  
  
          print("HeaderView Height: \(headerView.headerBackground.frame.size.height)")
  
          headerView.headerBackground.layer.shadowRadius = 10
          headerView.headerBackground.layer.shadowOffset = CGSize(width: 0, height: 1)
          headerView.headerBackground.layer.shadowColor = UIColor.black.cgColor
          headerView.headerBackground.layer.shadowOpacity = 0.1
          headerView.headerBackground.backgroundColor = UIColor(named: "Background")
          headerView.headerBackground.layer.cornerRadius = 10
  
          headerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDropDown)))
  
          return headerView
      } else {
          return nil
      }
  }
  
  @objc func handleDropDown() {
      print("Handle Drop Down")
  }
  
  func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -&gt; CGFloat {
      if section == 0 {
          return 0.0001
      } else {
          return 54
      }
  }
  
  func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -&gt; CGFloat {
      if section == 0 {
          return 10
      } else {
          return 20
      }
  }
  
  
  func numberOfSections(in tableView: UITableView) -&gt; Int {
      return settings.count + 1
  }
  
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -&gt; Int {
      if section == 0 {
          return 1
      } else {
          return settings[section - 1].count
      }
  }
  
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&gt; UITableViewCell {
      if indexPath.section == 0 {
          let cell = tableView.dequeueReusableCell(withIdentifier: "SettingTitleCell", for: indexPath) as! SettingsTitleTableViewCell
  
          cell.titleLabel.text = "Settings"
  
          return cell
      } else {
          let cell = tableView.dequeueReusableCell(withIdentifier: "SettingCell", for: indexPath) as! SettingTableViewCell
  
          cell.setSetting(setting: settings[indexPath.section - 1][indexPath.row])
          print("Index Path: \(indexPath.row) SettingCount: \(settings[indexPath.section - 1].count)")
  
  
          return cell
      }
  
  }
  </code></pre>
  
  <p>That code produces this result:
  <a href="https://i.stack.imgur.com/0jyng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0jyng.png" alt="Current Result"></a></p>
  
  <p>I would love some help on how to make this work the way I have shown in the design. Thanks ahead of time for any help. </p>