I created a custom header view for a UITableView. The type of the header view is UITableViewCell. I implemented it in the storyboard and added it to the view hierarchy like its shown in the screenshot below
Here is my Code for UITableViewController
import UIKit
class SecondCustomTableViewController: UITableViewController {
#IBOutlet weak var customHeaderView: UITableViewCell!
let array = ["Row 1", "Row 2", "Row 3"]
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.register(SecondCustomTableViewController.self, forHeaderFooterViewReuseIdentifier: "Header")
self.tableView.dequeueReusableHeaderFooterView(withIdentifier: "Header")
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = "\(array[indexPath.row])"
return cell
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 44
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
print("\(customHeaderView) -> Section: \(section)")
return customHeaderView
}
}
When i run it in the simulator it looks like this
My question is: Why is my custom header view shown for the last section only?
The print statement in the viewForHeaderInSection method looks like this:
Optional(<UITableViewCell: 0x7ff287802200; frame = (0 0; 375 44); clipsToBounds = YES; layer = <CALayer: 0x600000038d00>>) -> Section: 0
Optional(<UITableViewCell: 0x7ff287802200; frame = (0 0; 375 44); clipsToBounds = YES; autoresize = W; layer = <CALayer: 0x600000038d00>>) -> Section: 1
Optional(<UITableViewCell: 0x7ff287802200; frame = (0 176; 375 44); clipsToBounds = YES; autoresize = W; layer = <CALayer: 0x600000038d00>>) -> Section: 2
I also unwrapped the optional to make it a non optional but its the same behavior. As the print statement shows the viewForHeaderInSectionmethod is called three times, so why the header shows up for the last section only?
I hope someone can help me with this.
Every hint is highly appreciated.
I think its because ui elements cannot be copied, what you are doing is make an instance of UITableViewCell as IBOutlet. Better you can create your view when it needs.
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return tableView.dequeueReusableCell(withIdentifier: "Header") as! UITableViewHeaderFooterView
}
Hope it helps. Sorry for my bad english.
Related
I want to reorder section and row. So by default, native section reordering is not possible. So I implemented the section as a row. And reorder section and row. But the problem is when I reorder the section then it takes a row. It will crash the application.
Can you please help me?
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0. The number of rows contained in an existing section after the update (2) must be equal to the number of rows contained in that section before the update (1), plus or minus the number of rows inserted or deleted from that section (0 inserted, 0 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out). Table view: <UITableView: 0x7f874f026000; frame = (0 59; 393 759); clipsToBounds = YES; autoresize = RM+BM; gestureRecognizers = <NSArray: 0x6000023bde60>; backgroundColor = <UIDynamicSystemColor: 0x60000388b640; name = tableBackgroundColor>; layer = <CALayer: 0x600002df4c60>; contentOffset: {0, 0}; contentSize: {393, 206.66667175292969}; adjustedContentInset: {0, 0, 0, 0}; dataSource: <ReorderTableView.ViewController: 0x7f874c709840>>
class ViewController: UIViewController {
#IBOutlet weak var tblView: UITableView!
var arrSection = [Section]()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
tblView.isEditing = true
tblView.dataSource = self
tblView.delegate = self
// register tableviewcell
tblView.register(UINib(nibName:"SectionTableViewCell", bundle: nil), forCellReuseIdentifier: "SectionTableViewCell")
setupView()
}
func setupView(){
let obj = Group(groupName: "Group1")
let sec = Section(sectionName: "Section1", group: [obj])
let sec1 = Section(sectionName: "Section2", group: [obj])
arrSection.append(sec)
arrSection.append(sec1)
tblView.reloadData()
}
}
extension ViewController : UITableViewDelegate,UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
return arrSection.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if arrSection[section].group?.count ?? 0 > 0 {
let temp = arrSection[section].group?.count ?? 0
return temp + 1
}
else{
return 1
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let obj = arrSection[indexPath.section]
let cell = tableView.dequeueReusableCell(withIdentifier: "SectionTableViewCell") as! SectionTableViewCell
cell.lblTitle.text = obj.sectionName
return cell
}
else{
let obj = arrSection[indexPath.section].group?[indexPath.row - 1]
let cell = tableView.dequeueReusableCell(withIdentifier: "SectionTableViewCell") as! SectionTableViewCell
cell.lblTitle.text = obj?.groupName ?? ""
return cell
}
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 0
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 0
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return nil
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row == 0 {
return UITableView.automaticDimension
}else{
return UITableView.automaticDimension
}
}
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
tblView.beginUpdates()
let movingItem = self.arrSection[sourceIndexPath.section]
self.arrSection.remove(at: sourceIndexPath.section)
self.arrSection.insert(movingItem, at: destinationIndexPath.section)
tblView.moveSection(sourceIndexPath.section, toSection: destinationIndexPath.section)
tblView.endUpdates()
}
}
I am creating a static tableView. My goal is to have a single view that displays a tableView with 3 rows (get support, send feedback, participation terms), and a header + footer.
Right now, it all works fine EXCEPT the fact that there are two extra separators (one between the header and the first cell and the other between the last cell and the footer) that I cannot seem to get rid of.
Here is my code:
final class viewController: UITableViewController {
private let headerContainer = UIView()
private let footerContainer = UIView()
private let tableData = ["Get Support", "Send Feedback", "Participation Terms"]
override func viewDidLoad() {
super.viewDidLoad()
setupHeaderAndFooter()
setupTableView()
}
func setupHeaderAndFooter() {
/* setup code here (not relevant to this question) */
func setupTableView() {
// reinitializing tableView so that we can change its style to grouped
tableView = UITableView(frame: CGRect.zero, style: .grouped)
tableView.delegate = self
tableView.separatorStyle = .singleLine
}
//MARK: UITableView Methods
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return headerContainer
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 150
}
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
return footerContainer
}
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 200
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tableData.count
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 70
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "cell")
cell.textLabel!.text = tableData[indexPath.row]
return cell
}
}
One way to achieve this is don't use default separator provided by UITableView. and place one UILabel or UIView and set its background color to light gray and set its height=1 (As per your requirement), width (full tableview width or as per your requirement) and position at bottom of all you content inside cell, header or footer.
Ok here you go.
The easy trick is actually a one-liner and a self-explanatory:
self.tableView.separatorColor = self.tableView.backgroundColor
AFTER:
I hope this helps!
You have to set clipsToBounds to true on your header view.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = //Get your header here
header.clipsToBounds = true
return header
}
Before:
After:
I have a UITableViewCell which contains a UICollectionView on top and a UITableView on the bottom. The idea is that a dynamic amount of cells will be created in the inner UITableView and the parent UITableViewCell that encloses the two subviews will increase its height proportionally.
I am trying to take advantage of the estimatedRowHeight + UITableViewAutomaticDimentionfeature of the UITableViewCell that will allow the cell height to increase dynamically. However, it is not working. It completely removes the embedded UITableView from view.
I have not made any constraints that limit the height of the enclosed UITableView, so I am not sure why it is not working.
Here is the implementation that attempts to make a dynamically sized UITableViewCell:
class OverviewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = "Enclosed Table View Example"
}
func numberOfSections(in tableView: UITableView) -> Int {
return 3
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 325 // Height for inner table view with 1 cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 45
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "appHeaderCell") as! AppHeaderCell
return cell
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "appCell", for: indexPath) as! AppCell
return cell
}
}
My only guess is that the constraint bottom = Inner Table View.bottom + 7 is causing the issue, but the entire view falls apart when this constraint is removed.
What can I do to make the complex outer UITableViewCell dynamically adjust height based on the number of cells in the embedded UITableView?
Although it may seem like a good idea, the use of UITableViewAutomaticDimension in conjunction with estimatedRowHeight is not good to use in scenarios like this where we have general content inside table view cells. Making use of the heightForRowAt method, you can calculate the size of each individual cell before it centers the table.
Once we know how many cells will be in the inner table, you need to create an array whose elements correspond to the number inner cells that will ultimately determine the height of the outer cell, as all other content is constant.
let cellListFromData: [CGFloat] = [3, 1, 4]
This array will give us the number of sections in our outer table view:
func numberOfSections(in tableView: UITableView) -> Int {
return cellListFromData.count
}
We will convert each element in this array to a cell height in the following way:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let prototypeCell = tableView.dequeueReusableCell(withIdentifier: "appCell") as! AppCell
let baseHeight = betweenCellSpacing + prototypeCell.innerCollectionView.contentSize.height + prototypeCell.innerTableView.sectionHeaderHeight + outerTableView.sectionHeaderHeight
let dynamicHeight = prototypeCell.innerTableView.contentSize.height - prototypeCell.innerTableView.sectionHeaderHeight
return baseHeight + (dynamicHeight * cellListFromData[indexPath.section])
}
That is, inside of the heightForRowAt method, we dequeue a prototype cell that will not be used in the resulting view (as dequeueReusableCell is not called inside cellForRowAt in this case). We use this prototype cell to extract information about what is constant and what is dynamic about the cell's content. The baseHeight is the accumulated height of all the constant elements of the cell (plus the between-cell spacing) and the dynamicHeight is the height of an inner UITableViewCell. The height of each cell then becomes baseHeight + dynamicHeight * cellListFromData[indexPath.section].
Next, we add a numberOfCells variable to the class for the custom cell and set this in the cellForRowAt method in the main table view:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "appCell", for: indexPath) as! AppCell
cell.numberOfCells = Int(cellListFromData[indexPath.section])
cell.innerTableView.reloadData()
return cell
}
numberOfCells is set with the same cellListFromData that we used to get the height of the cell. Also, it is critical to call reloadData() on the inner table view after setting its number of cells so that we see that update in the UI.
Here is the full code:
class OverviewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var outerTableView: UITableView!
let cellSpacing: CGFloat = 25
let data: [CGFloat] = [3, 1, 4]
override func viewDidLoad() {
super.viewDidLoad()
}
func numberOfSections(in tableView: UITableView) -> Int {
return data.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let prototypeCell = tableView.dequeueReusableCell(withIdentifier: "appCell") as! AppCell
let baseHeight = cellSpacing + prototypeCell.innerCollectionView.contentSize.height + prototypeCell.innerTableView.sectionHeaderHeight + outerTableView.sectionHeaderHeight
let dynamicHeight = prototypeCell.innerTableView.contentSize.height - prototypeCell.innerTableView.sectionHeaderHeight
return baseHeight + (dynamicHeight * data[indexPath.section])
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "appCell", for: indexPath) as! AppCell
cell.numberOfCells = Int(data[indexPath.section])
cell.innerTableView.reloadData()
return cell
}
}
class AppCell: UITableViewCell, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var innerCollectionView: UICollectionView!
#IBOutlet weak var innerTableView: UITableView!
var numberOfCells: Int = 0
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberOfCells
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "featureHeaderCell") as! BuildHeaderCell
return cell
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "innerCell", for: indexPath) as! InnerCell
return cell
}
}
Methods relating to configuring the inner collection view is not included here as it is not related to the problem.
I want to implement UITableView inside UITableViewCell with dynamic height of cell according to inside UITableView content size. How can I implement this any suggestions?
I want layout something like this...
Code work:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let identifier = "OrderHistoryTVCell" let cell: OrderHistoryTVCell! = tableView.dequeueReusableCell(withIdentifier: identifier) as? OrderHistoryTVCell
let tableInnerContentSize = cell.tableInner.contentSize.height
let nn = cell.viewAfterTable.frame.height+tableInnerContentSize
return nn
}
use following:
#IBOutlet weak var tableView: UITableView! //connect the table view
//do following in viewDidLoad method
tableView.estimatedRowHeight = 100 //Your estimated height
tableView.rowHeight = UITableViewAutomaticDimension
Also set these two properties of UILable from Attributes inspector section of storyboard:
lines to 0
Line break to word wrap
or you can also set these properties from code:
self.lblxyz.numberOfLines = 0
self.lblxyz.lineBreakMode = .byWordWrapping
Note - Add constraint properly in table view cell.
You have to do something like this:
In ui Master-Item # is be your section header. So take UILabel and add it as a section header.
Your sub-item is the prtotype-cell cell which contains one label.
Constraints for label inside cell.
In your cell first add UIView with constraints as follows:
Top , Bottom , Leading, Bottom to superView as 0.
Now add label and give constraints as follow.
Top , Bottom , Leading, Bottom to UIView as 8.
Give height constraint as per your requirement.
Give height relationship from = to >=.
Set label property line to 0 from storyboard.
Implement this lines in
//MARK:- TableView
public func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat{
return 60 // return header height
}
public func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// return your section header i.e. master item label
}
public func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat{
return 50;
}
public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{
return UITableViewAutomaticDimension
}
public func numberOfSections(in tableView: UITableView) -> Int{
// return number of section i.e. total count of master item.
}
public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
// returns number of cells in each section
}
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
// return your custom cell here
//eg:
// cell.labelFood.text = your data
}
NOTE Don't forget to bind delegate and dataSource of tableView.
use this code in viewDidLoad()
self.tableView.estimatedRowHeight = 350
self.tableView.rowHeight = UITableViewAutomaticDimension
Use this Delegate
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
self.tableView.estimatedRowHeight = 160
return UITableViewAutomaticDimension
}
Also set these two properties of UILable.
#IBOutlet weak var label: UILabel!
label.numberOfLines = 0
I am trying to create custom section header with dynamic height. I have created a very simplified version of my app where I am displaying a square image as table section header. The image height is the same as the screen width. The tableView has to be dynamic because the image height changes with screen width. Even though the app works, I could not be able to get rid of the constraint warnings. It is a very simple app and I have no idea why it is throwing me constraint errors. It seems like the the 1:1 ratio on the image constraint is the root of the problem. I have attached the constraints of my xib file, code and output screenshot below.
Xib Constraint
Simulator Output
class ViewController: UIViewController {
#IBOutlet weak var myTableView: UITableView!
var xibRef: CustomHeaderView!
var numberOfSection = 3
override func viewDidLoad() {
super.viewDidLoad()
myTableView.delegate = self
myTableView.dataSource = self
// Register Xib
let nib = UINib(nibName: "CustomHeaderView", bundle: nil)
self.xibRef = nib.instantiateWithOwner(self, options: nil)[0] as? CustomHeaderView
self.myTableView.registerNib(nib, forHeaderFooterViewReuseIdentifier: "CustomHeaderView")
}
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("myCell", forIndexPath: indexPath)
cell.textLabel!.text = "section \(indexPath.section) row \(indexPath.row)"
return cell
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return numberOfSection
}
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
return view.frame.size.width
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableHeaderFooterViewWithIdentifier("CustomHeaderView") as! CustomHeaderView
return cell
}
}