I have a tableView header. I put a view and several items in. However, when a button is tapped, some objects in the view are hidden so that the view doesn't contain it as well anymore:
How would I change the view height to match the items in the view?
Implementing this delegate function can help you...
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return Your_View.frame.height Or Others
}
Try dynamically sizing the headerview by overriding viewDidLayoutSubviews() and see if that works :)
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// Dynamic sizing for the header view
if let headerView = tableView.tableHeaderView {
let height = headerView.systemLayoutSizeFitting(UILayoutFittingCompressedSize).height
var headerFrame = headerView.frame
// If we don't have this check, viewDidLayoutSubviews() will get
// repeatedly, causing the app to hang.
if height != headerFrame.size.height {
headerFrame.size.height = height
headerView.frame = headerFrame
tableView.tableHeaderView = headerView
}
}
}
You need to set the sectionHeaderHeight property in viewDidLoad. You will need to have tableView reference if you are using storyboard unless if your ViewCOntroller is of type TableViewController then just use below code.
# Set the Header height to 50 points
tableView.sectionHeaderHeight = 50
Related
I have a tableHeaderView that should be with dynamic height according to its content.
I tried use the systemLayoutSizeFitting & sizeToFit method in order to set new height for the table view, Unfortunately It's seems to be work well but not as I want (one of the dynamic UI get cropped). I tried to set the content compression resistance priority of the UIs that i want to be dynamic to (1000) but its dose not work as well.. every time at least one UI cropped.
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var podView: PodView!
#IBOutlet weak var postCaption: UILabel!
var pod: Pod!
override func viewDidLoad() {
super.viewDidLoad()
//set header view
podView.setPod(image: pod.image, title: pod.title, description: pod.description, viewWidth: UIScreen.main.bounds.width)
podView.sizeToFit()
postCaption.text = pod.description
postCaption.sizeToFit()
let height = tableView.tableHeaderView!.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).height
tableView.tableHeaderView!.frame.size.height = height
}
edit: constraint:
view constraint
label Constraint
For having TableHeaderView with dynamic height. Add following code to your viewController. It will work like charm.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let headerView = tableView.tableHeaderView {
let height = headerView.systemLayoutSizeFitting(UILayoutFittingCompressedSize).height
var headerFrame = headerView.frame
//Comparison necessary to avoid infinite loop
if height != headerFrame.size.height {
headerFrame.size.height = height
headerView.frame = headerFrame
tableView.tableHeaderView = headerView
}
}
}
Note: Make sure your tableHeaderView is having proper AutoLayout Constraints to get proper height.
Try this steps for creating dynamic tableview header cell :-
1 - Add one UItableViewCell on tableview from storyboard
2 - Create tableView header UI as per your requirement.
3 - Create class as TableViewHeaderCell something according to your requirement what you want to show in header cell.
4 - Then in a ViewController class implement headerview delegate method.
/**
Tableview header method
*/
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
}
5 - In this method you want to create TableViewHeaderCell object and return cell content View like this.
/**
Table Header view cell implement and return cell content view when you create cell object with you identifier and cell name after that you have to mention height for header cell
*/
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell Identifier") as! CellName
return cell.contentView
}
6 - Implement Tableview header height method
/**
Here you can specify the height for tableview header which is actually your `TableViewHeader Cell height`
*/
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
//For eg
return 100
}
From this steps you can acheive dynamic Header view cell as well as footer view cell also, but for footer view cell implement Tableview footer view delegate methods.
Thank You,
I am creating a IOS app in swift and want to add spacing between cells like this
I would like to give space of each table view cell same like my attach image.
How I can do that? and Right now all cells are coming without any space.
swift3
you can try this in your class of tableView cell:
class cell: UITableViewCell{
override var frame: CGRect {
get {
return super.frame
}
set (newFrame) {
var frame = newFrame
frame.origin.y += 4
frame.size.height -= 2 * 5
super.frame = frame
}
}
}
From Storyboard, your view hierarchy should be like this. View CellContent (as highlighted) will contain all the components.
Give margin to View CellContent of 10px from top, bottom, leading & trailing from its superview.
Now, select the tblCell and change the background color.
Now run your project, make sure delegate and datasource are properly binded.
OUTPUT
NOTE: I just added 1 UILabel in View CellContent for dummy purpose.
Update: UIEdgeInsetsInsetRect method is replaced now you can do it like this
contentView.frame = contentView.frame.inset(by: margins)
Swift 4 answer:
in your custom cell class add this function
override func layoutSubviews() {
super.layoutSubviews()
//set the values for top,left,bottom,right margins
let margins = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, margins)
}
You can change values as per your need
***** Note *****
calling super function
super.layoutSubviews()
is very important otherwise you will get into strange issues
If you are using UITableViewCell to achieve this kind of layout, there is no provision to provide spacing between UITableViewCells.
Here are the options you can choose:
Create a custom UIView within UITableViewCell with clear background, so that it appears like the spacing between cells.
You need to set the background as clear of: cell, content view.
You can use UICollectionView instead of UITableView. It is much more flexible and you can design it the way you want.
Let me know if you want any more details regarding this.
One simple way is collection view instead of table view and give cell spacing to collection view and use
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
let widthSize = collectionView.frame.size.width / 1
return CGSize(width: widthSize-2, height: widthSize+20)
}
And if you want tableview only then add background view as container view and set background color white and cell background color clear color set backround view of cell leading, trilling, bottom to 10
backgroundView.layer.cornerRadius = 2.0
backgroundView.layer.masksToBounds = false
backgroundView.layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
Please try it. It is working fine for me.
You can use section instead of row.
You return array count in numberOfSectionsInTableView method and set 1 in numberOfRowsInSection delegate method
Use [array objectAtIndex:indexPath.section] in cellForRowAtIndexPath method.
Set the heightForHeaderInSection as 40 or according to your requirement.
Thanks,Hope it will helps to you
- Statically Set UITableViewCell Spacing - Swift 4 - Not Fully Tested.
Set your tableView Row height to whatever value you prefer.
override func viewDidLoad() {
super.viewDidLoad()
tableView.estimatedRowHeight = <Your preferred cell size>
tableView.rowHeight = UITableViewAutomaticDimension
// make sure to set your TableView delegates
tableView.dataSource = self
tableView.delegate = self
}
extension YourClass : UITexFieldDelegate, UITextFieldDataSource {
//Now set your cells.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell : UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "yourCell", for: indexPath) as! UITableViewCell
//to help see the spacing.
cell.backgroundColor = .red
cell.textLabel?.text = "Cell"
return cell
}
//display 3 cells
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}
//now lets insert a headerView to create the spacing we want. (This will also work for viewForHeaderInSection)
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
//you can create your own custom view here
let view = UIView()
view.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 44) //size of a standard tableViewCell
//this will hide the headerView and match the tableView's background color.
view.backgroundColor = UIColor.clear
return view
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 44
}
}
I want to achieve a desire behaviour using autolayout (or if this is not possible using a delegate or something). What I have is a tableView with one static cell, this cell has a containerView that have a tableViewController with dynamic prototype cells.
What I want is be able to use autolayout to dynamically set the height of the static cell that has the container view embedded.
This is the storyboard:
These are my constraints (static cell with the contentView of the container View):
In the viewController that have the containerView within the static cell what I have is on the ViewDidLoad method:
override func viewDidLoad() {
super.viewDidLoad()
courseDetailTableView.estimatedRowHeight = 200
courseDetailTableView.rowHeight = UITableViewAutomaticDimension
}
And using the delegate of the tableView with the staticCell:
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
But with this the height of the static cell is really small... it means that the autolayout is not capable of setting the height of his content with only the constraints that I have set.. I said only the constraints because if I set one more constraint on the contentView of the containerView that set the height to something like 400 then the height of that cell is 400..
I was just wondering if there is a way with autolayout to set the height of the static cell to match the height of the containerView.
I know that maybe using a delegate that calculates first the height of the containerView and use this height to set the heightForRow at it could possible work I want to know if there is a simpler way
Thank you so much.
I just want to answer my own question just for someone facing maybe the same problem. It doesn't have to be with static cell, this answer applies to static as well as dynamic cells.
What you have to do is in the containerViewController set a property or a method for calculating the height (don't forget to ask for layoutIfNeeded)
func tableViewHeight() -> CGFloat {
tableView.layoutIfNeeded()
return tableView.contentSize.height
}
Then in the master view controller (the one that have the cell in which is the containerViewController embedded) you have to save a reference to the containerViewController for example in the prepare for segue method like so:
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "containerSegue" {
guard let containerVC = segue.destination as? SessionCoordinatorController else { return }
sessionController = containerVC
}
}
Then just ask for the container height in the delegate method of UITableView heightForRowAt like so (in the masterViewController):
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
guard let height = sessionController?.tableViewHeight() else { return UITableViewAutomaticDimension }
return height
}
And that's it
Don't forget to add the tableView.isScrollEnabled to false in the containerViewController
So if I correctly understand you actually have those constraints :
ContentView.bottom = ContainerView.bottom
ContentView.trailing = ContainerView.trailing + Standard
ContainerView.leading = ContentView.leading + Standard
ContainerView.top = ContentView.top
Basically what you want is this constraint :
ContentView.height = ContainerView.height right ? But if you put it you have a very small cell ?
If it's the case you can try to put a constraint to fix a minimum of height for the containerView like this :
ContainerView.height >= 400 // At least 400 for the height for example
Then you can try to put an optional constraint for the equal height :
ContentView.height = ContainerView.height (priority 249 or low)
By lowering the priority of the constraint you are saying "I have this extra constraint, it will be great if the contentView matches the containerView height if not keep going or approximate to it".
Here is more info about AutoLayout AutooLayout Understanding
P.S : You don't need to implement tableView:heightForRowAtIndexPath: delegate method by returning automaticDimension.
I know there are a lot of posts about it, but maybe in newest iOS there are some updates on this...
I think all of us had a task to create viewController that has a lot of content at the top, most of them are self-sizing, and at the very bottom it figures out that you need to show some tableView with many items...
The first solution that can be done is to use UIScrollView, and don't care about reusableCells at all.
The second is to use UITableView's headerView and adjust its height manually (or by calling systemLayoutSizeFittingSize:) each time when it is needed.
Maybe the third solution is to use UITableView and self-sized UIView separately, with having UIEdgeInsets on tableView. And depending on what object has higher "zIndex", it can bring problems with handling interactions...
The forth solution is to use whole content above the cell, like a separate cell. Not sure this is a good idea at all...
Question: Is there any new solution to this problem? I haven't dig into it for like 2 years... Maybe in new iOS there is something like reusableViews for UIScrollView... Of course, the goal is to have reusable cells, and header with using autolayout without necessity of updating its height manually...
I am guessing you are talking about section headers of table view here. If that is so you can absolutely use auto layout for section headers.
Use the below two code in viewDidLoad:
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 36;
Now in viewForHeaderInSection: try the below code just to get an idea how things are working out. Change it according to your requirement.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let label: UILabel = {
let lb = UILabel()
lb.translatesAutoresizingMaskIntoConstraints = false
lb.text = "HEADER \(section) with a loooooooooooooooonnngngngngngngngng texxxxxxxxxxxxxxxxt"
lb.textColor = .black
lb.backgroundColor = .yellow
lb.numberOfLines = 0
return lb
}()
let header: UIView = {
let hd = UIView()
hd.backgroundColor = .blue
hd.addSubview(label)
label.leadingAnchor.constraint(equalTo: hd.leadingAnchor, constant: 8).isActive = true
label.topAnchor.constraint(equalTo: hd.topAnchor, constant: 8).isActive = true
label.trailingAnchor.constraint(equalTo: hd.trailingAnchor, constant: -8).isActive = true
label.bottomAnchor.constraint(equalTo: hd.bottomAnchor, constant: -8).isActive = true
return hd
}()
return header
}
I'm using XCode 10.3 and this is my solution worked with your second solution using table header view.
First, you would create a separating view with xib file, for example with a label inside. And you apply the constraints for this label, top, left, bottom, right to the cell's container view. And set numberOfLines = 0.
Update your awakeFromNib() function inside your view class.
override func awakeFromNib() {
super.awakeFromNib()
ourLabel.translatesAutoresizingMaskIntoConstraints = false
}
Second, on your viewController, setup your tableView:
tableView.sectionHeaderHeight = UITableView.automaticDimension
tableView.estimatedSectionHeaderHeight = 64
Remember don't delegate this method:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
because we set the constraints of our view already.
Finally, you return it on the delegate method
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
the view for header.
let view = UINib(nibName: String(describing: SimpleHeaderTitleView.self), bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! SimpleHeaderTitleView
view.ourLabel.text = "Your longgggg text"
return view
Done! Check it works.
I like the way it's done here:
• If you want to set your tableview header height dynamically based on it's content, just call self.tableView.layoutTableFooterView() right after you have set your headerView as TableViewHeader (so after self.tableView.tableHeaderView = view )
• If you need to update your tableview header height on runtime, also call self.tableView.layoutTableFooterView() right after you have updated the values of your tableview header.
(This obviously also works with tableviewFooters, though, is not to be used for sectionHeaders/Footers)
extension UITableView {
//Variable-height UITableView tableHeaderView with autolayout
func layoutTableHeaderView() {
guard let headerView = self.tableHeaderView else { return }
headerView.translatesAutoresizingMaskIntoConstraints = false
let headerWidth = headerView.bounds.size.width
let temporaryWidthConstraint = headerView.widthAnchor.constraint(equalToConstant: headerWidth)
headerView.addConstraint(temporaryWidthConstraint)
headerView.setNeedsLayout()
headerView.layoutIfNeeded()
let headerSize = headerView.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
let height = headerSize.height
var frame = headerView.frame
frame.size.height = height
headerView.frame = frame
self.tableHeaderView = headerView
headerView.removeConstraint(temporaryWidthConstraint)
headerView.translatesAutoresizingMaskIntoConstraints = true
}
}
source
Copied from useyourloaf.com
Swift 5.0
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
guard let headerView = tableView.tableHeaderView else {return}
let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
if headerView.frame.size.height != size.height {
headerView.frame.size.height = size.height
tableView.tableHeaderView = headerView
tableView.layoutIfNeeded()
}
}
Step One :
From interface builder Drag a UIView and drop into
UItableView
This view will automatically act as a UITableView Header (Mind it not section Header)
. Suppose this the width of this view is 200 .If you run the UItableView This view will automatically appear as a Header .
Create a Outlet of this drag-drop View .
#property (weak, nonatomic) IBOutlet UIView *tableViewHeader; // height of this view is 200
Now my goal is increase the height of the table View header .
Step Two :
Add this method
- (void)viewDidLayoutSubviews
{
int increasedHeight = 100;
// set a frame of this view Like example
self.tableViewHeader.frame = CGRectMake(0, 0, self.view.frame.size.width , 200 + increasedHeight );
self.tableView.tableHeaderView = self.tableViewHeader;
}
Now you tableview header height will be 300 .
This is how i have approached it
Using tableview
I have created the UI For the header in XIB
Now in the following delegate method
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
}
I Create a UIView for the header and calculate the height based on the content and return the same.
Now i can return the same header view from the following delegate method
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
}
Based on the section i again create a view from xib and return that view from the method.
In my case i needed only one headerview for table so i kept 2 sections and returned the headerview for section one.
If you are using Interface Builder simply you check these buttons
You can do that in viewDidLayoutSubviews of the UIViewController that contains your UITableView:
#IBOutlet weak var tableView: UITableView!
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// Resize header view with dynamic size in UITableView
guard let headerView = tableView.tableHeaderView else {
return
}
let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
if headerView.frame.height != size.height {
tableView.tableHeaderView?.frame = CGRect(
origin: headerView.frame.origin,
size: size
)
tableView.layoutIfNeeded()
}
}
Xcode 14 + Swift 5
This is how I made it.
First step - configuring of table view for dynamic height headers usage:
In viewViewDidLoad you need to add:
tableView.sectionHeaderHeight = UITableView.automaticDimension
tableView.estimatedSectionHeaderHeight = 40
This also can be done in xib/storyboard where your tableView is located instead of configuring in code:
Second step - creation of header view:
You need to create custom view to use as table's header. For example view with label as a subview, pinned with constraints to superview. Any view that contains some subviews that could cause it to have different height. The main thing - you should set up content of header with constraints to make it resize itself.
Third step - configuration of tableView's delegate:
In your tableView delegate implement viewForHeaderInSection method and just return configured instance of your custom header view.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
IMPORTANT - heightForHeaderInSection method shouldn't be implemented, just don't add it.
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
I'm creating a screen, imagine the facebook profile screen.. A tableview and the first cell is an image. The goal is that this image maintains an aspect ratio, so with different screen sizes I don't have to worry about sizing it..
I can't get this to work with any view, even if I set specific constraints, the cell won't set the correct height..
I have a little project showing constraints, in this link..
My VC Code:
class ViewController: UITableViewController{
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.dataSource = self
self.tableView.delegate = self
self.tableView.estimatedRowHeight = 100
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.reloadData()
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
return cell
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
}
My constrains:
If the height of the table view cell is basically a function of the table view's width, it might be easier to implement the heightForRowAtIndexPath delegate method to return the width of the table view multiplied by the ratio you want. That would take constraints out of the picture entirely, and probably be more efficient.
This is what you should do:
Insert a table view header view
Update the frame height keep the desired aspect ratio in the viewWillLayoutSubviews function.
class ViewController: UITableViewController {
#IBOutlet weak var headerView: UIView!
override func viewWillLayoutSubviews() {
var frame = headerView.frame;
// Check and see if the aspect ratio of the frame
// of the header view is the desired aspect ratio.
if frame.size.height != frame.width * 0.5 {
// If it is not, update the frame
frame.size.height = frame.width * 0.5;
headerView.frame = frame;
// reset the header view
self.tableView.tableHeaderView = headerView
}
}
}