How to display a hidden part right underneath the submit button after it's clicked?

Question

So, I'm trying to make a hidden part visible after clicking the submit button. More specifically, this part should be a TableView that will display user selections/entries before they hit the submit button. Is there a way to do that?

Please see the images as examples.

I have tried to use ExpandableTableViewController 2.0 in CocoaPods. It uses a Tableview Controller to make table cells expandable. However, I couldn't figure out how to implement/connect it into my ViewController. If you have a better way to do it, please let me know!

Thank you in advance for your help!

To show a table with data you can simply have it first hidden like tableView.hidden = true in viewDidLoad and then tableView.hidden = false when the user clicks the submit button. About ExpandableTableViewController you can check it's documentation and see how integrate it in your app. — Marcos Reboucas, Aug 27 '16 at 00:55
If you simply set the hidden = true, there will still be a large empty space left for the table, between the submit button and the Back & Next button — WoShiNiBaBa, Aug 27 '16 at 02:26

score 1 · Answer 1 · answered Aug 27 '16 at 05:32

1

In your viewDidLoad(), hide the table, and move your "Back" & "Next" view up, using self.Backview.center.y += 350 (or however many pixels needed to make it close).

Then once you receive an entry, unhide it, and slide the backView down, using

UIView.animateWithDuration(0.5, delay: 0.0,
                               options: [.CurveEaseOut], animations: {

        self.backView.center.y -= 350

        }, completion: nil)

This animation provides a nice sliding view, and eases in, giving the illusion of a slide. This is an effect I have implemented before and really works well.

Good Luck!

answered Aug 27 '16 at 05:32

Jake Braden

489
5
15

Thanks for your help. I used your method and tried to first unhide the table by clicking on the submit button. However, every time I click on the submit button, the Backview will be moved up by 350. Also, there is still an empty space left for the table view. – WoShiNiBaBa Aug 28 '16 at 02:37
`code` override func viewDidLoad() { super.viewDidLoad() //Function: hide/show table view tableHideFunctionTest.hidden = true //Function: move the Backview up to cover the table view self.backView.center.y += 296 } @IBAction fund submitClicked(sender: UIButton) { tableHide.hidden = false UIView.animateWithDuration(0.5, delay: 0.0, options: [.CurveEaseOut], animations: { self.backView.center.y -= 296 }, completion: nil) } – WoShiNiBaBa Aug 28 '16 at 02:45

Janmenjaya · Accepted Answer · 2016-08-28T05:21:16.360

You can also manage the height constraint of UITableView's in your code to get the expand/collapse effect

Here is the sample code

@interface ViewController ()
{
    BOOL toggleToshow;
}
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *heightConstraintTbl;

- (IBAction)btnSubmitClicked;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    toggleToshow = YES;
    self.heightConstraintTbl.constant = 0;

}

- (IBAction)btnSubmitClicked {

    [UIView animateWithDuration:1 animations:^{
        self.heightConstraintTbl.constant = toggleToshow?285:0;

        toggleToshow = !toggleToshow;

        [self.view layoutIfNeeded]; // Make sure to Call this for getting nimation effect
    }];

}

Here is the swift version

import UIKit

class AnimateViewController: UIViewController {

    var toggleToshow = true;

    @IBOutlet weak var heightConstraintTbl: NSLayoutConstraint!

    @IBAction func btnSubmitClicked() {

        UIView.animateWithDuration(1, animations: { () -> Void in

            if self.toggleToshow{
                self.heightConstraintTbl.constant = 285
            }else{
                self.heightConstraintTbl.constant = 0
            }

            self.toggleToshow = !self.toggleToshow

            self.view.layoutIfNeeded(); // Make sure to Call this for getting nimation effect
        })
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        toggleToshow = true;
        self.heightConstraintTbl.constant = 0;

        // Do any additional setup after loading the view.
    }

Happy coding...

See the screen shot to link the constraint

Hi @Janmenjaya, thank you so much for your help. The screen-record looks awesome. I was wondering if you could write them in swift. It would be a great help. Thanks again! — WoShiNiBaBa, Aug 28 '16 at 02:49
@ WoShiNiBaBa, I have added the swift version of code, Please look at code. Please mark the answer as accepted if you find it useful. — Janmenjaya, Aug 28 '16 at 03:42
Thank you for the quick reply. Could you tell me which element does this line " @IBOutlet weak var heightConstraintTbl: NSLayoutConstraint!" connect to? It doesn't let me connect to the tableview. — WoShiNiBaBa, Aug 28 '16 at 05:09
Open story board, then select the table view, go to size inspector, click the height constraint of tableView in Constraints section, then double click the height Constraint, now you can see the constraint to connect, for your better understanding I am adding the screenshot in my answer, feel free to ask if any difficulties you face. — Janmenjaya, Aug 28 '16 at 05:21

How to display a hidden part right underneath the submit button after it's clicked?

2 Answers2