使用自动布局时，可以优雅地隐藏和显示视图

时间：2013-03-18 11:33:36

标签： ios autolayout

我认为可能有一种方法可以使用自动布局轻松隐藏和显示连续按钮，以便视图可以自动排列，具体取决于哪些是可见的。

例如，假设我有两个按钮，我总是希望在一个框架中居中：

// pseudo visual format code:
|-----[star][download]-----|

当我按下下载时，我现在想看到三个按钮:( pause是重新标记的download按钮; cancel是以前隐藏的按钮）

|--[star][cancel][pause ]--|

我想我可能总是有三个按钮，但是可能会覆盖宽度以使视图在状态之间优雅地生动？我认为可能有一种更加语义的方式来实现从自动布局结构中添加和删除视图。有什么想法吗？

3 个答案:

答案 0 :(得分：0)

我已经整理了一个小样本，展示了如何使用自定义UIView子类完成此操作。在下面的示例中，我使用了AutoLayout framework中的this answer，我建议您也这样做;它使约束代码保持清晰易读。

一般方法是，您必须保持指向将左侧按钮的后沿绑定到右侧的前沿的键约束的指针，然后使用这些指针动态添加/删除约束。一般来说，你不想做太多的事情，因为性能会受到影响，但是响应用户操作的一小部分是可以的。

我的观点如下：

@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

并按照以下方式实施：

#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

要使视图真正起作用，还有很多工作要做，但希望你能看到采用的一般方法。

答案 1 :(得分：0)

使用Autolayout将（5）按钮设置在另一个上面。

//在ViewDidLoad上：设置取消＆amp;暂停按钮隐藏

-(void) viewDidLoad
{
   [_pauseBtn setHidden:YES];
   [_cancelBtn setHidden:YES];
}

//关于Downlaod行动

-(IBAction) downloadClick (UIButton *) sender
{
    [_pauseBtn setHidden:NO];
    [_cancelBtn setHidden:NO];
    [sender setHidden:YES];
}

答案 2 :(得分：-3)

这只能从代码中实现处理constraints： http://www.techotopia.com/index.php/Implementing_iOS_6_Auto_Layout_Constraints_in_Code

相关问题
最新问题