CODEWITHSUNDEEP
iosswiftxcodeuitableviewconstraints
Ashish Bahl
Ashish Bahl

Reputation: 1492

Expand/Collapse working fine in storyboard but not in xib

I am trying to create expand/collapse view (using tableView) like this :

I

where initially only 3 key,value pairs will be displayed and when user clicks on button, it ( the table view cell ) expands and on clicking it again, it collapses.

What I mean is initially it looks like this :

Simulator screenshot

After clicking on the button, it expands.

I am setting delegate in my tableViewCell file and making a callback in the viewController.

In storyboard, I managed to make it work but when I tried doing the same using xib, there is an issue.

I know that there is some constraint issue.

For that, These are constraints that all the key(s) label have :

Key Constraints

These are the constraints that value(s) label has :

Value Constraints

Using these constraints in storyboard works fine but not in xib.

This is the button action :

@IBAction func viewMoreButtonClicked(_ sender: UIButton)
    {
        print("Selected Button = \(sender.tag)")

        if buttonDelegate != nil
        {
            if sender.isSelected
            {
                self.view.frame = CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: self.view.frame.size.width, height: 212)
            }
            else
            {
                self.view.frame = CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: self.view.frame.size.width, height: 400)
            }
//            self.view.frame = CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: self.view.frame.size.width, height: 400)
            buttonDelegate?.viewMoreButtonClickedDelegate(selectedButton: sender, currentCell: self)
        }
    }

This is the delegate callback in the viewController:

func viewMoreButtonClickedDelegate(selectedButton : UIButton, currentCell : CardTableViewCell)
    {
        DispatchQueue.main.async {
            self.selectedIndex = selectedButton.tag
            self.cartTableView.beginUpdates()
            self.cartTableView.endUpdates()
        }
    }

Can anyone help me out here as to where am I going wrong with this ?

Upvotes: 0

Views: 801

Answers (1)

Josh Heald
Josh Heald

Reputation: 3947

UIStackView gives you expand and contract behaviour when you show/hide views which it contains, and minimises the number of constraints you need. Use one of these within your table cell, to get the benefits of expanding and collapsing.

Add a vertical stack view to your xib, which should contain your key value pair views, each pair of which you should put inside a container view.

Add the container views which you want to hide, i.e. rows 4-10, to an outlet collection, I've called it moreDetailViews.

When the user taps the button, toggle the hidden state for those views:

import UIKit

class ViewController: UIViewController {

    @IBOutlet var moreDetailViews: [UIView]!

    @IBAction func viewMoreButtonClicked(_ sender: UIButton) {
        for detailView in moreDetailViews {
            detailView.isHidden = !detailView.isHidden
        }
    }
}

The views you hook up to the moreDetailViews collection will toggle between shown and hidden when the button is tapped. Set up your Stack View with a vertical axis, alignment as fill, and distribution as equal spacing, and the stack view will shrink and expand as you tap the button.

The views should have a height of their own, while the stack view needs a position but no height constraints - its height shrinks and grows as the views are added to it. You should be able to constrain the cell edges to the stack view so that it expands and contracts with the stack view but that may depend on your tableview delegate implementation.

Stack view nib settings

Upvotes: 2

Related Questions