CODEWITHSUNDEEP
iosios5
user2478518
user2478518

Reputation:

Expand and Collapse a UIView within a UIViewController

I want to expand a view on click of a button and collapse the same.And accordingly change the frame of the data residing below the view. I have used a scrollview and then added the items to scroll.

enter image description here

enter image description here

I am able to add a new view and hide it initially and on click of (+) button I unhide that view,and hide the (+)button.

Two concerns

1) How do I manage the data below the view so the when the view is in collapse position the data should be just below the view? And when I expand it it should change the frame accordingly.
2) The label "The label is test1" is a single label. I would be showing the description there. Initially 4 lines and when we click (+) button the remaining description would be shown.So this would not be possible if I take another view as I need to take a single label or text view to display data.

-(IBAction)plusButton:(id)sender{

    [plusButton setHidden:YES];
    [expandedView setHidden:NO];

    //[mainView setFrame:CGRectMake(10, 150, 294, 400)];

}

-(IBAction)minusButton:(id)sender{
    [plusButton setHidden:NO];
    [expandedView setHidden:YES];

}

Upvotes: 1

Views: 7851

Answers (3)

Lirik
Lirik

Reputation: 3187

Seems to me like an autoresizing issue. You need to set the label's and textfields autoresizing to

UIViewAutoresizingFlexibleHeight and UIViewAutoresizingFlexibleTopMargin

I would suggest you place those labels and textfields in a "content" view with the same autoresizing properties and add that as a subview as well.

edit: (added example)

UIView *contentView = [[UIView alloc] initWithFrame:frame]; //contentView's initail frame.
UILabel *descriptionLabel = [[UILabel alloc] initWithFrame:contentView.bounds]; //in this example the label takes the whole frame of the contentView, you can change it to be smaller in height if it suits you purpose.

descriptionLabel.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin;
contentView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin;

on "+" button clicked:

[UIView animateWithDuration:0.2f animations:^{
    CGRect rect = contentView.frame;
    rect.size.height = 200;
    contentView.frame = rect;
}];

on "-" button clicked:

[UIView animateWithDuration:0.2f animations:^{
    CGRect rect = contentView.frame;
    rect.size.height = 100;
    contentView.frame = rect;
}];

Upvotes: 1

Prince Kumar Sharma
Prince Kumar Sharma

Reputation: 12641

Use animation something like that

whether it is UIView or UIlabel use anyone of them..

connect containerView outlet to contact Info label or view. and bottom view outlet to label containing "lorel ipsum... "

//on plus button click

IBOutlet UILabel *containerView;
IBOutlet UILabel *bottomView;

CGRect rect=containerView.frame;
rect.size.height=400;

CGRect rect2=bottomView.frame;
rect2.origin.y=420;

[UIView animateWithDuration:0.3 animations:^{
   [containerView setFrame:rect];
    [bottomView setFrame:rect2];
}];


//on minus button click


CGRect rect=containerView.frame;
rect.size.height=300;

CGRect rect2=bottomView.frame;
rect2.origin.y=320;

[UIView animateWithDuration:0.3 animations:^{
    [containerView setFrame:rect];
    [bottomView setFrame:rect2];
}];

Upvotes: 0

rezand
rezand

Reputation: 576

you can animate a view in and out of screen using a animation block like this, this is a example taken from one of my apps moving a view within a view resulting in a slide up from the bottom effect. 

  -(void) showFxAnimation {

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.65];
     [self.sliderFxSubView setFrame:CGRectMake(0.0f, [UIScreen mainScreen].bounds.size.height - 150,320.0f , 150.0f)];
    [UIView commitAnimations];    
}


-(void) hideFxAnimation {

    [UIView animateWithDuration:1.0 animations:^{

        [self.sliderFxSubView setFrame:CGRectMake(0.0f, 1200.0f, 320.0f, 150.0f)];

    }];

}

Upvotes: 0

Related Questions