Remove the unwanted space between button and line swift xcode - ios

I am new to iPhone application development.
I am designing the app like this. in this design, there are two buttons below to delete button and below to those two button, there is the line. that you are seeing in this picture.
What i want is, i want to add the line below to the delete button when those two buttons are hidden by some condition. if those two buttons visible means, that line should come below to those two button. Not below to the delete button.
I have added the following code in cellForRowAt function of TableView. it is not working.
cell.line.frame = CGRect(x: 0, y:cell.btnDelete.frame.maxY, width: cell.line.frame.width , height: 1 )
Any body can help me to solve this issue.
I have added following code to.
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
and
dataTable.rowHeight = UITableViewAutomaticDimension
dataTable.estimatedRowHeight = 100

You have to achieve this using some tricky way.Use Stack View Add Show,Hide buttons to one UIView.add all other components to another UIView.Add UIStackView to your custom cell and add constraints like this.
NSLayoutConstraint.activate([
stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
stackView.topAnchor.constraint(equalTo: topAnchor),
stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
])
set stackView distribution to .Fill.
when you want to show/hide buttons, you can add/remove the arranged subView from tableview cell stackView.If you are show/hide buttons in cellForItemAt make sure remove all arranged subviews before add.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
cell.stackView.removeArrangedSubview(cell.viewOne)
cell.stackView.removeArrangedSubview(cell.viewTwo)
if isShowBuutons {
cell.stackView.addArrangedSubview(cell.viewOne) //View with All other elements
cell.stackView.addArrangedSubview(cell.viewTwo) //View with buttons
}else{
cell.stackView.addArrangedSubview(cell.viewOne) //View with All other elements
}
}

Related

Hiding the internal views and auto adjust the height of the cell swift

According to the following screenshot I have a table view cell with couple of stack views inside the cell. I want to hide the red circled stack view when it's inside label values are empty. To achieve this specific thing what I have done is just hiding the related stack view as the following screenshot. The related stack view is hiding. That's fine. But I want it to be hidden that empty area and adjust the height of the cell accordingly. I am not using the following function as well.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 150
}
I have used the following function as well. But it's still the same.
override func viewWillAppear(_ animated: Bool) {
SalaryDetailTableView.rowHeight = UITableViewAutomaticDimension
SalaryDetailTableView.estimatedRowHeight = 65.0
}
Could anyone please help me to sort out the issue ?
https://imgur.com/a/hMYA3qT
https://imgur.com/a/Dye8pBT
From your first screenshot I can see that you are using AutoLayout. Wrap all your stack views in a base stack view, pin it to the cell and check and fix your other constraints if needed. After that, you need to specify
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
If your constraints are right, AutoLayout will take care of collapsing or expanding the cell when you hide your inner stack view.

How to use dynamic height of UITableViewCell in auto-layout and move other views to up when bottom view is hidden?

I have a UITableViewCell in xib and its outlets in corresponding UITableViewCell subclass. I am returning height of cell from
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) ->CGFloat {
return 400
}
I need to hide some views based on the data available in each row of the table and bottom view should shifted to top of the cell. When I am hiding view from cell then there is empty space left in place of hidden view & bottom views are not shifting to top part of the cell.
Here is How I am hiding cell view.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
.....
cell.opetion4.isHidden = true
cell.opetion3.isHidden = true
}
This is my cell.
After hide 2 middle labels it is looking as follows.
But I want to remove this empty space and want to shift bottom label to top as follows.
At first, make the height of UITableViewCell to UITableView.automaticDimension
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
Embed all of your questionLabels in a UIStackView (vertical) excluding bottomLabel. Set AutoLayoutConstraint between UIStackView and bottomLabel.
Set the numberOfLines property of UILabels to 0(zero).
Set the Distribution of the UIStackView as Fill
Then, in your tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell method hide the labels. And it will automatically handle the spaces between UILabels
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath) as! MyCell
cell.questionLabel1.text = labelOneText[indexPath.row]
cell.questionLabel2.text = labelTwoText[indexPath.row]
cell.questionLabel3.text = labelThreeText[indexPath.row]
if labelOneText[indexPath.row] == "" {
cell.questionLabel1.isHidden = true
}
if labelTwoText[indexPath.row] == "" {
cell.questionLabel2.isHidden = true
}
if labelThreeText[indexPath.row] == "" {
cell.questionLabel3.isHidden = true
}
return cell
}
Final Output:
First I suggest you to set UITableViewCell Height to automatic dimensions . Attach all the children to one another and last child to uiview of xib . Now hiding view does not adjust size of cell so you need to play with height constraint of uiview you are hiding .
Make height constraint as strong in IBOutlet else it will crash since cells are re-using and constraint after setting once will become nil . You need to make sure that height constraint are change according to display cell requirement , thats mean for each cell maintain some datasource that decide to show or hide the view every time when cellforrowatIndexpath method called.
Hope this helps
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) ->CGFloat {
return UITableView.automaticDimension
}
now in cell, put all your views and there siblings which you want to hide/show in UIstackview (horizontal). now if you hide one view, it will be hidden and its apace will be also hidden to no white space will be showing, and no need to handle extra constraints. it will all handled by stackview.

how to vary the tableview height based on content

I tried to vary the height of tableview based on content and I did that but the thing is below the tableView there will be a label. Whenever the table height increased or decreased, that label should be below. I tried it but that label is being at whatever the table height is given initially.If any oner helps me to do this would be great.
First remove below code if you have used in your code. We don't need it.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 50
}
Next, while setting up your UITableViewCell, make sure one of height constraint is not set. Here is an example for title and description.
/* Setup title label */
NSLayoutConstraint.activate([
titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 0),
titleLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 10),
titleLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -10),
titleLabel.heightAnchor.constraint(equalToConstant: 40)
])
/* Setup description label */
NSLayoutConstraint.activate([
descriptionLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 0),
descriptionLabel.leftAnchor.constraint(equalTo: titleLabel.leftAnchor, constant: 0),
descriptionLabel.rightAnchor.constraint(equalTo: titleLabel.rightAnchor, constant: 0),
descriptionLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0)
])
Don’t forget to set numberOfLines to zero for descriptionLabel.
Boom, you are done.
First of all, you have to take a scrollview and add your tableview and a label into the contentView. Set the height of the contentView as a dynamic and set the IBOutlet to the tableView height constraint as below.
#IBOutlet var constTableHeight : NSLayoutConstraint!
after reloading the table set constTableHeight's value
let heightTBL : CGFloat = (tblView?.contentSize.height)!
constTableHeight?.constant = heightTBL
In your viewDidLoad method, add
self.tableView.estimatedRowHeight = 44 //default table view cell height
And then add this in your class,
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
If you want that table view cell's height increase based on the label in it than you have to implement a couple of methods like this (Swift 4)
1- This method tells the cell that increases your height automatically
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
2- Implement estimated row height whatever you want let's say 140
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 140
}
3- When you place the label in the cell make sure the number of lines to "0". Add the top, leading, bottom and trailing margins to it.
override func viewDidLoad()
{
Tablename.estimatedRowHeight = 100
Tablename.rowHeight = UITableViewAutomaticDimension
}
and in your Tableview cell dont forget to give top,leading ,trailing and bottom margin to last ui component of your cell to make it dynamic in size.

Animating UIView with Autolayout animates UITableView's checkmark

I have strange behaviour. My whole view controller looks like this (vertical order):
UILabel,
UITableView,
UIView (that will slide in&out when needed). [see p.s.]
I added constraint between UIView and bottom layout guide and I'm animating it with this method:
func toggleContinueButton(_ toggleOn: Bool) {
if toggleOn {
self.buttonViewConstraint.constant = 0
} else {
self.buttonViewConstraint.constant = -80
}
UIView.animate(withDuration: 0.5) {
self.view.layoutIfNeeded()
}
}
For some strange reason this screws checkmark, which is now "flying" from outside of left margin of screen and right into correct and expected position, on the right side of selected cell. Belowe I have simple code for selecting/deselecting:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.cellForRow(at: indexPath)!.accessoryType = .checkmark
self.updateContinueButtonState()
}
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
tableView.cellForRow(at: indexPath)!.accessoryType = .none
self.updateContinueButtonState()
}
Has anybody ever met such weirdness?
p.s. tried two versions: first, where sliding UIView is hovering in&out on top of tableView, and second where sliding in UIView is shrinking tableView's height. None worked.
Its hard to say, but you might try calling layoutIfNeeded first, then changing the constraint, then calling it again inside the animation block. That gives other layout changes time to update first.

Custom cell in UITableView shifts right after swipe to edit

I just want a simple UITableView with the ability to slide left to delete. Everything works okay except the right constraint on the textview in my prototype cell seems to get shifted after swiping to delete. Here's my code for the table:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
//Uses prototype cell from Interface Builder called "CommentTableCell"
let tableCell = tableView.dequeueReusableCellWithIdentifier("CommentTableCell", forIndexPath: indexPath) as! CommentTableCell
tableCell.userInteractionEnabled = true
tableCell.selectionStyle = .None
//Sets the text for the cells in the comment table
tableCell.commentText.text = comments[indexPath.row]
tableCell.timeLabel.text = commentTimes[indexPath.row]
return tableCell
}
//As many rows in the table as there are comments
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return comments.count
}
//Allows the user to delete comments
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if (editingStyle == UITableViewCellEditingStyle.Delete) {
comments.removeAtIndex(indexPath.row)
commentsTable.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Automatic)
}
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.borderWidth = 0.75
self.view.layer.borderColor = borderColor.CGColor
self.view.layer.cornerRadius = 5.0
//Gets rid of the line between comment cells
commentsTable.separatorStyle = UITableViewCellSeparatorStyle.None
commentsTable.backgroundView = nil
//Sets the height of the row to fit text boxes
self.commentsTable.estimatedRowHeight = self.commentsTable.rowHeight
self.commentsTable.rowHeight = UITableViewAutomaticDimension
}
}
This is what it looks like after I've swiped left to edit and then swiped back right on the top cell (stackoverflow won't let me use pictures yet). Note the right sides of the gray text boxes and labels in each cell are no longer aligned. The gray text box in the cells has a right constraint of -8 so I'm also confused why there's any margin on the other cell's text boxes at all.
Thanks for any help you can give me, I'm still fairly new to Swift! I've tried to find anything like this question on stack overflow and I've come up empty.
Okay so I found a way to fix this and thought I'd post here in case anyone else runs into the same problem.
It still seems like a bug in XCode to me as I can't think of any time you might want the behavior described above. Basically, if the text box constraints in the prototype cell are set to "constrain to margins" in the Pin auto layout menu then the right horizontal constraint will be reset (as far as I can tell) randomly after you slide to delete and then slide back.
Just uncheck constrain to margins when you add those constraints and it should fix this problem!

Resources