Gracefully hiding and showing views when using autolayout - ios

Question

I thought there might be a way to easily hide and show a button in a row using auto layout so that views could be automatically arranged neatly depending on which are visible.
For example, say I have two buttons that I always want centered in a frame:
// pseudo visual format code:
|-----[star][download]-----|
When I press download I want now to see three buttons: (pause is the download button relabelled; cancel is a previously hidden button)
|--[star][cancel][pause ]--|
I thought I could perhaps have all three buttons always present but perhaps override the width to make the view gracefully animate between states? I thought there might be a more semantic way to achieve the adding and removing of views from the auto layout structure. Any thoughts?

Answer 1

I've put together a small sample showing how this could be done using a custom UIView subclass. In the example below, I've used the AutoLayout framework from this answer and I'd recommend you do the same; it keeps the constraint code clean and legible.
The general approach is that you have to keep pointers to the key constraints that bind the trailing edge of the left-hand buttons to the leading edge of those to the right and then use those pointers to dynamically add/remove constraints. Generally, you don't want to do too much of that because performance will suffer, but a small amount in response to a user action is OK.
My view is declared thus:
#protocol TSDownloadViewDelegate;
#interface TSDownloadView : UIView
#property (strong, nonatomic) id<TSDownloadViewDelegate> delegate;
#end
#protocol TSDownloadViewDelegate <NSObject>
- (void) downloadStartedInDownloadView:(TSDownloadView*)downloadView;
- (void) downloadPausedInDownloadView:(TSDownloadView *)downloadView;
- (void) downloadCancelledInDownloadView:(TSDownloadView*)downloadView;
#end
And implemented like this:
#import "UIView+AutoLayout.h"
#import "TSDownloadView.h"
static const CGFloat kMargin = 20.0;
#interface TSDownloadView ()
// Our buttons
#property (strong, nonatomic) UIButton * starButton;
#property (strong, nonatomic) UIButton * cancelButton;
#property (strong, nonatomic) UIButton * downloadButton;
// State tracking
#property (nonatomic) BOOL downloading;
#property (nonatomic) BOOL constraintsUpdated;
// The constraint governing what's tied to the right hand side of the starButton
#property (weak, nonatomic) NSLayoutConstraint *starRightConstraint;
// The constraint governing what's tied to the left hand side of the downloadButton
#property (weak, nonatomic) NSLayoutConstraint *downloadLeftConstraint;
#end
#implementation TSDownloadView
- (void) initializator
{
_starButton = [UIButton buttonWithType:UIButtonTypeSystem];
_cancelButton = [UIButton buttonWithType:UIButtonTypeSystem];
_downloadButton = [UIButton buttonWithType:UIButtonTypeSystem];
_starButton.translatesAutoresizingMaskIntoConstraints = NO;
_cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
_downloadButton.translatesAutoresizingMaskIntoConstraints = NO;
_starButton.titleLabel.textAlignment = NSTextAlignmentCenter;
_cancelButton.titleLabel.textAlignment = NSTextAlignmentCenter;
_downloadButton.titleLabel.textAlignment = NSTextAlignmentCenter;
[_starButton setTitle:#"Star" forState:UIControlStateNormal];
[_cancelButton setTitle:#"Cancel" forState:UIControlStateNormal];
[_downloadButton setTitle:#"Download" forState:UIControlStateNormal];
[_downloadButton addTarget:self action:#selector(downloadClicked:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:_starButton];
[self addSubview:_cancelButton];
[self addSubview:_downloadButton];
_cancelButton.hidden = YES;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
[self initializator];
}
return self;
}
- (id) initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if( self )
{
[self initializator];
}
return self;
}
- (void)downloadClicked:(id)sender
{
self.downloading = !self.downloading;
if( self.downloading )
{
[self.downloadButton setTitle:#"Pause" forState:UIControlStateNormal];
self.cancelButton.hidden = NO;
// Remove previous constraints
[self removeConstraint:self.starRightConstraint];
[self removeConstraint:self.downloadLeftConstraint];
// |--[star][cancel][pause ]--|
self.starRightConstraint = [self.starButton autoPinEdge:ALEdgeRight toEdge:ALEdgeLeft ofView:self.cancelButton withOffset:-kMargin];
self.downloadLeftConstraint = [self.downloadButton autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.cancelButton withOffset:kMargin];
// Tell delegate what's happened
if( self.delegate )
[self.delegate downloadStartedInDownloadView:self];
}
else
{
[self.downloadButton setTitle:#"Download" forState:UIControlStateNormal];
self.cancelButton.hidden = YES;
// Remove previous constraints
[self removeConstraint:self.starRightConstraint];
[self removeConstraint:self.downloadLeftConstraint];
// |-----[star][download]-----|
self.starRightConstraint = [self.starButton autoPinEdge:ALEdgeRight toEdge:ALEdgeLeft ofView:self.downloadButton withOffset:-kMargin];
self.downloadLeftConstraint = nil;
// Tell delegate what's happened
if( self.delegate )
[self.delegate downloadPausedInDownloadView:self];
}
}
- (void) updateConstraints
{
[super updateConstraints];
if( self.constraintsUpdated ) return;
self.constraintsUpdated = YES;
// Now put our constraints in place
// Make sure the button hugs the label and doesn't get stretched
// just because there's space available
[self.starButton setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
// Pin the starButton to the top, left and bottom edges of its superview
[self.starButton autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:kMargin];
[self.starButton autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:kMargin];
[self.starButton autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:kMargin];
// Repeat for the other buttons
[self.cancelButton setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
[self.cancelButton autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:kMargin];
[self.cancelButton autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:kMargin];
[self.downloadButton setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
[self.downloadButton autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:kMargin];
[self.downloadButton autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:kMargin];
[self.downloadButton autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:kMargin];
// These two are special. We keep a reference to them so we can replace
// them later. Note that since the cancelButton is hidden at the start,
// the initial value for downloadLeftConstraint is simply nil.
self.starRightConstraint = [self.starButton autoPinEdge:ALEdgeRight toEdge:ALEdgeLeft ofView:self.downloadButton withOffset:-kMargin];
self.downloadLeftConstraint = nil;
}
#end
There's a lot more work to do to make the view really functional, but hopefully you can see the general approach to take.

Answer 2

Design the (5) buttons one over the other using Autolayout.
//on ViewDidLoad: set cancel & pause button to hide
-(void) viewDidLoad
{
[_pauseBtn setHidden:YES];
[_cancelBtn setHidden:YES];
}
//on Downlaod action
-(IBAction) downloadClick (UIButton *) sender
{
[_pauseBtn setHidden:NO];
[_cancelBtn setHidden:NO];
[sender setHidden:YES];
}

Answer 3

this can only be achieve handling constraints from code:
http://www.techotopia.com/index.php/Implementing_iOS_6_Auto_Layout_Constraints_in_Code