I have Tableview for showing food orders placed by clients. which contains Horizontal UIStackview. In UIStackView
In UIStackview There is few one / two lined label and one UITableView which is used to show orderItems. Inner tableview has fixed height constant (greater then or equal + 750 Priority) and will be
changed with content size. height and scrolling disabled.
inner tableview has two labels. and heigh is automatic Dimension
I want main tableview cell height should be increased automatically as per inner tableview items. so I apply to main tableview
self.tblOrders.rowHeight = UITableViewAutomaticDimension
self.tblOrders.estimatedRowHeight = 45
and In tableview cell subclass
override func awakeFromNib() {
super.awakeFromNib()
self.tblOrderMaster.dataSource = self
self.tblOrderMaster.delegate = self
self.tblOrderMaster.estimatedRowHeight = 45
self.tblOrderMaster.rowHeight = UITableViewAutomaticDimension
self.selectionStyle = .none
self.layoutIfNeeded()
self.tblOrderMaster.isScrollEnabled = false
}
Inner tableview datasource array
var orderData:[ODOrderDataMaster] = [] {
didSet {
self.tblOrderMaster.reloadData()
self.layoutIfNeeded()
self.const_Height_tblOrderMaster.constant = self.tblOrderMaster.contentSize.height
self.layoutIfNeeded()
}
}
Question: When I scroll main tableview it is not correctly resized as per subitems.while initially it is showing correct.
I have almost tried everything like layoutIfNeeded. layoutSubviews. setNeedsDisplay.
I have also implemented willDisplayCell but not success.
I think issue is when I reload inner tableview. and when it is finished reload how can i inform to main tableview and how can i update height constant of inner tableview
Please let me know if anyone need more info.
I appreciate any help or suggestion
Add these 2 lines before the end of cellForRowAt in main & inner tableViews
cell.layoutSubviews()
cell.layoutIfNeeded()
return cell
Also you may try add layoutSubviews method in main cell subclass and do this
self.tblOrderMaster.layoutIfNeeded()
and in viewDidLayoutSubviews of controller of the main tableView and do this
self.tblOrders.layoutIfNeeded()
Try adding this to the tblOrders :
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.contentView.setNeedsLayout()
cell.contentView.layoutIfNeeded()
}
Why don't you do it based on the rowcount of the inner tableView for example let's say your inner tableview has a rowheight of 30 points than to set the parenttableview rowheight all you have to do is to multiply the rowcount of the child tableview by the rowheight and you will get exactly what you want.
I have tried almost all the possible solutions but each has some problems. So I have found another workaround to fix this It can not be called perfect solution but yes it works for me
In tableview cell, I have added One Hidden Label which is Top : 0 , Bottom : 0 , left : 0 and right : 0
Now
// This is temp label which help to calulate height to tableview
if let orderMaster = restObj.orderDataMaster {
var tempText = ""
for orderMasterObject in orderMaster {
tempText += (orderMasterObject.item?.name ?? "") + "\n" + " "
if let subItems = orderMasterObject.masterSubitem {
let result = subItems.reduce("", { (result, subItem) -> String in
return result + (subItem.subitem?.name ?? "") + ","
})
tempText += result + "\n" + " "
}
tempText += "\n"
}
cell.lblTemp.text = tempText
}
self.view.layoutIfNeeded()
cell.setNeedsLayout()
cell.delegate = self
What here done is, Inner tableview's cell has labels which grow as per text. So That temp label has same text (masterSubitem) in my case, in short I have replicated inner tableview cell in that label as we have provided All Four constrains to label so when it will grow our tableview cell will grow along with it.
Hope it is helpful to someone who is facing the same issue If any of you can post another working solution I will happily accept it :)
Related
I am trying to make a UITableView line up with the height sizing of paragraphs in a UITextView. Example: The timestamps to the left are what I am trying to do. I changed my code to use UIView's instead of TVcells to see what was wrong and you can see the orange view is overlapping the cyan one, meaning that the views don't actually line up but they overlap. NOTE: I am wanting to use the TableView not UIView's I am having trouble understanding how the text heights are calculated in iOS. I am using the below code to get the heights of each paragraph:
let liveParagraphView = textView.selectionRects(for: txtRange).reduce(CGRect.null) { $0.union($1.rect) }
After this I calculate the height of each then feed that into my UITableView heightForRowAt
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let models = getParagraphModel()
let height = models[indexPath.row].height
let finalHeight = models[indexPath.row].height
let heightValue = finalHeight
return CGFloat(heightValue);
}
Every line has different height values but even when using these values it's not lining up. The problem seems to be that every line calculates a Y Position which is not directly under the line before it. It's ON TOP OF!! Resulting in the UITableView not being alined when new cells are added and that 'overlay' of the selectionRects isn't taken into account. Am I correct by this? How could I go about achieving this?
Swift 5
Firstly you should set your textView (which is in the cell) dynamic height:
textView.translatesAutoresizingMaskIntoConstraints = true
textView.sizeToFit()
textView.isScrollEnabled = false
Then calculate your textView's number of lines in textDidChange etc. for update tableView's layout.
let numOfLines = (yourTextView.contentSize.height / yourTextView.font.lineHeight) as? Int
When textView's text one line down you should update tableView layout:
tableView.beginUpdates()
tableView.endUpdates()
And then you should set your tableView cell's intrinsicContentSize for dynamic rowHeight:
Set your cell's (which is the contains textView) layout without static height,
Set your tableView's rowHeight and estimatedRowHeight:
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 44 // whatever you want
So now you have tableView cell with dynamicHeight
I am having a view at the top of my tableViewController. The view is called viewBackground. It is there to show the post the user clicked on and the table cells will show the comments.
What I want to do is to resize the viewBackground depending on the size of the label theLabel. I have done this in the cells by setting the label in the cells to 0 lines and by implementing this little code :
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 205
How do I do the same with my viewBackground?
This is a picture of the tableView:
You can create table view with two sections. First section will contain selected post; second section - comments. If you need, i can provide some code.
Added this code and it helped!
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let headerView = tableView.tableHeaderView {
let height = headerView.systemLayoutSizeFittingSize(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
}
}
}
I suggest to make a header for your current tableView -instead of adding an external view above it-, and then you can follow this answer, it should helps you of how you can calculate the label's string height and returning it in the tableView(_:heightForRowAt:) method.
Hope this helped.
Check out the second UILabel inside of the pink UITableViewCell. As you can see, the text inside it is cut-off. I've been trying to get the height of this UILabel to correctly expand or shrink as a function of how much text is plugged into it - and its not working.
• I'm using AutoLayouts
• The UILabel is pinned on all 4 sides to the ContentView - which of course is inside the UITableViewCell
• The Cells are all Static cells by the way, not Prototype cells.
• Here's the code I'm using:
(in viewWillAppear)
descriptionLabel.text = " < a bunch of text goes here > "
descriptionLabelSize = descriptionLabel.sizeThatFits(descriptionLabel.bounds.size)
// here's a global var I use to store the height:
descriptionLabelHeight = descriptionLabelSize.height
then, in viewDidAppear (and FYI, I also tried putting the following in will and didLayoutSubviews and in all sorts of other permutations:)
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
var newFrame = descriptionLabel.frame
newFrame.size.height = descriptionLabelHeight
descriptionLabel.frame = newFrame
descriptionLabel.setNeedsLayout()
view.layoutIfNeeded()
}
Finally, in heightForRowAtIndexPath I use the global var to adjust the TableViewCell's height:
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0: return 50
case 1: return descriptionLabelHeight+20 // the + 20 is for padding & margin
default: return 50
}
}
The result is mixed: the height of the Label - and the Cell housing it - does adjust - but not enough. It always ends up being too short. And I don't mean that it just cuts off a couple of words, its way too short, cutting off multiple sentences.
But again: the height does adjust. And that's the weird part. Its working - just not enough.
Any tips would be greatly appreciated!
You need to tell table view to dynamically scale the cells based on content:
tableView.rowHeight = UITableViewAutomaticDimension
Then, you can remove your implementation of heightForRowAtIndexPath: - cells should scale automatically. Remember to setup layout constraints correctly though. Without it dynamic sizing won't work.
I have been struggling this issue for 3 days and still can not figure it out. I do hope anyone here can help me.
Currently, i have an UITableView with customized cell(subclass of UITableViewCell) on it. Within this customized cell, there are many UILabels and all of them are set with Auto Layout (pining to cell content view) properly. By doing so, the cell height could display proper height no matter the UILabel is with long or short text.
The problem is that when i try to set one of the UILabels (the bottom one) to be hidden, the content view is not adjusted height accordingly and so as cell.
What i have down is i add an Hight Constraint from Interface Builder to that bottom label with following.
Priority = 250 (Low)
Constant = 0
Multiplier = 1
This make the constrain with the dotted line. Then, in the Swift file, i put following codes.
override func viewDidLoad() {
super.viewDidLoad()
//Setup TableView
tableView.allowsMultipleSelectionDuringEditing = true
//For tableView cell resize with autolayout
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 200
}
func tableView(tableView: UITableView, willSelectRowAtIndexPath indexPath: NSIndexPath) -> NSIndexPath? {
let cell = tableView.cellForRowAtIndexPath(indexPath) as! RecordTableViewCell
cell.lbLine.hidden = !cell.lbLine.hidden
if cell.lbLine.hidden != true{
//show
cell.ConstrainHeightForLine.priority = 250
}else{
//not show
cell.ConstrainHeightForLine.priority = 999
}
//tableView.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.None)
return indexPath
}
The tricky thing is that when i call tableView.reloadRowAtIndexPaths(), the cell would display the correct height but with a bug that it has to be trigger by double click (selecting) on the same row rather than one click.
For this, i also try following code inside the willSelectRowAtIndexPath method, but none of them is worked.
cell.contentView.setNeedsDisplay()
cell.contentView.layoutIfNeeded()
cell.contentView.setNeedsUpdateConstraints()
Currently the result is as following (with wrong cell Height):
As showed in the Figure 2, UILabel 6 could be with long text and when i hide this view, the content view is still showing as large as it before hiding.
Please do point me out where i am wrong and i will be appreciated.
I finally change the code
tableView.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.None)
to the following
tableView.reloadData()
Then, it work perfectly.
However, i don't really know the exactly reason on it. Hope someone can still comment it out.
Update
I have revised the question completely after my latest findings.
Goal
My goal is to implement the following effect:
There is a simple table view
The user selects a row
The selected row expands, revealing another label below the original one
Please note that I am aware, that this can be achieved by inserting/deleting cells below the selected one, I already have a successful implementation using that method.
This time, I want to try to achieve this using Auto Layout constraints.
Current status
I have a sample project available for anyone to check, and also opened an issue. To summarize, here's what I've tried so far:
I have the following views as actors here:
The cell's content view
A top view, containing the main label ("main view")
A bottom view, below the main view, containing the initially hidden label ("detail view")
I have set up Auto Layout constraints within my cell the following way (please note that this is strictly pseudo-language):
mainView.top = contentView.top
mainView.leading = contentView.leading
mainView.trailing = contentView.trailing
mainView.bottom = detailView.top
detailView.leading = contentView.leading
detailView.trailing = contentView.trailing
detailView.bottom = contentView.bottom
detailView.height = 0
I have a custom UITableViewCell subclass, with multiple outlets, but the most important here is an outlet for the height constraint mentioned previously: the idea here is to set its constant to 0 by default, but when the cell is selected, set it to 44, so it becomes visible:
override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
detailViewHeightConstraint.constant = selected ? detailViewDefaultHeight : 0
UIView.animateWithDuration(0.3) {
self.layoutIfNeeded()
}
}
I have the following result:
So the effect is working, but not exactly how I originally imagined. Instead of pushing the main view up, I want the cell's height to grow when the detail view is shown, and shrink back when it's hidden.
I have examined my layout hierarchy during runtime:
The initial state is OK. The height of the content view is equal to the height of my main view (in this case, it's 125 points).
When the cell is selected, the height constraint of the detail view is increased to 44 points and the two views are properly stacked vertically.But instead of the cell's content view extending, but instead, the main view shrinks.
Question
What I need is the following: the height of table view cell's content view should be equal to
the height of the main view, when the detail view's height constraint is 0 (currently this works)
main view height + detail view height when the detail view's height constraint is set properly (this does not work).
How do I have to set my constraints to achieve that?
After a significant amount of research, I think I've found the solution with the help of this great article.
Here are the steps needed to make the cell resize:
Within the Main, and Detail Views, I have originally set the labels to be horizontally and vertically centered. This isn't enough for self sizing cells. The first thing I needed is to set up my layout using vertical spacing constraints instead of simple alignment:
Additionally you should set the Main Container's vertical compression resistance to 1000.
The detail view is a bit more tricky: Apart from creating the appropriate vertical constraints, you also have to play with their priorities to reach the desired effect:
The Detail Container's Height is constrained to be 44 points, but to make it optional, set its priority to 999 (according to the docs, anything lower than "Required", will be regarded such).
Within the Detail Container, set up the vertical spacing constraints, and give them a priority of 998.
The main idea is the following:
By default, the cell is collapsed. To achieve this, we must programmatically set the constant of the Detail Container's height constraint to 0. Since its priority is higher than the vertical constraints within the cell's content view, the latter will be ignored, so the Detail Container will be hidden.
When we select the cell, we want it to expand. This means, that the vertical constraints must take control: we set the priority Detail Container's height constraint to something low (I used 250), so it will be ignored in favor of the constraints within the content view.
I had to modify my UITableViewCell subclass to support these operations:
// `showDetails` is exposed to control, whether the cell should be expanded
var showsDetails = false {
didSet {
detailViewHeightConstraint.priority = showsDetails ? lowLayoutPriority : highLayoutPriority
}
}
override func awakeFromNib() {
super.awakeFromNib()
detailViewHeightConstraint.constant = 0
}
To trigger the behavior, we must override tableView(_:didSelectRowAtIndexPath:):
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
tableView.deselectRowAtIndexPath(indexPath, animated: false)
switch expandedIndexPath {
case .Some(_) where expandedIndexPath == indexPath:
expandedIndexPath = nil
case .Some(let expandedIndex) where expandedIndex != indexPath:
expandedIndexPath = nil
self.tableView(tableView, didSelectRowAtIndexPath: indexPath)
default:
expandedIndexPath = indexPath
}
}
Notice that I've introduced expandedIndexPath to keep track of our currently expanded index:
var expandedIndexPath: NSIndexPath? {
didSet {
switch expandedIndexPath {
case .Some(let index):
tableView.reloadRowsAtIndexPaths([index], withRowAnimation: UITableViewRowAnimation.Automatic)
case .None:
tableView.reloadRowsAtIndexPaths([oldValue!], withRowAnimation: UITableViewRowAnimation.Automatic)
}
}
}
Setting the property will result in the table view reloading the appropriate indexes, giving us a perfect opportunity to tell the cell, if it should expand:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! ExpandableTableViewCell
cell.mainTitle = viewModel.mainTitleForRow(indexPath.row)
cell.detailTitle = viewModel.detailTitleForRow(indexPath.row)
switch expandedIndexPath {
case .Some(let expandedIndexPath) where expandedIndexPath == indexPath:
cell.showsDetails = true
default:
cell.showsDetails = false
}
return cell
}
The last step is to enable self-sizing in viewDidLoad():
override func viewDidLoad() {
super.viewDidLoad()
tableView.contentInset.top = statusbarHeight
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 125
}
Here is the result:
Cells now correctly size themselves. You may notice that the animation is still a bit weird, but fixing that does not fall into the scope of this question.
Conclusion: this was way harder than it should be. 😀 I really hope to see some improvements in the future.
This is in obj-c, but I'm sure you'll handle that:
Add in your viewDidLoad:
self.tableView.estimatedRowHeight = self.tableView.rowHeight;
self.tableView.rowHeight = UITableViewAutomaticDimension;
This will enable self sizing cells for your tableView, and should work on iOS8+