在自动布局中展开更改方向和屏幕大小的视图

时间:2014-10-01 06:01:02

标签: ios iphone autolayout

我有一个UIImageView,我需要在更改方向和屏幕尺寸时展开(高度和宽度)。我正在使用自动布局约束。

    topImageView.contentMode = UIViewContentModeScaleAspectFit;
    topImageView.backgroundColor = [UIColor clearColor];
    topImageView.layer.cornerRadius = 5.0f;
    topImageView.clipsToBounds = YES;
    topImageView.translatesAutoresizingMaskIntoConstraints = NO;

    if(login_DO.logoPath)
        [topImageView loadImage:login_DO.logoPath];

    [self.view addSubview:topImageView];

    NSArray *horizontalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-(%i)-[topImageView(%f)]",X_OFFSET,VIEW_FRAME_WIDTH-X_OFFSET*2]
                                            options:0 metrics:nil views:@{@"topImageView": topImageView}];

    NSArray *verticalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|-(%f)-[topImageView(80)]",navHeight]
                                            options:0 metrics:nil views:@{@"topImageView": topImageView}];

    [self.view addConstraints:horizontalConstraints];
    [self.view addConstraints:verticalConstraints];    

    NSLayoutConstraint *leadingMarginForImageConstraint = [NSLayoutConstraint
                                                 constraintWithItem:topImageView attribute:NSLayoutAttributeLeadingMargin
                                                 relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.view attribute:
                                                 NSLayoutAttributeLeadingMargin multiplier:1.0 constant:X_OFFSET];

    NSLayoutConstraint *topMarginForImageConstraint = [NSLayoutConstraint
                                                           constraintWithItem:topImageView attribute:NSLayoutAttributeTopMargin
                                                           relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.view attribute:
                                                           NSLayoutAttributeTopMargin multiplier:1.0 constant:VIEW_FRAME_WIDTH-X_OFFSET*2];

    [self.view addConstraints:@[ leadingMarginForImageConstraint,
                                 topMarginForImageConstraint]];

但图像没有扩展。我是汽车布局的新手。我错过了任何约束吗?

2 个答案:

答案 0 :(得分:5)

您可以将imageBottomConstraint从-navHeight更改为底部的其他值。 避免使用VIEW_FRAME_WIDTH导致更改方向时更改。

UIView *superview = self.view;
 NSLayoutConstraint *imageTopConstraint = [NSLayoutConstraint
                                                  constraintWithItem:topImageView attribute:NSLayoutAttributeTop
                                                  relatedBy:NSLayoutRelationEqual toItem:superview
                                                  attribute:NSLayoutAttributeTop multiplier:1.0 constant:navHeight];
    NSLayoutConstraint *imageBottomConstraint = [NSLayoutConstraint
                                                     constraintWithItem:topImageView attribute:NSLayoutAttributeBottom
                                                     relatedBy:NSLayoutRelationEqual toItem:superview
                                                     attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-navHeight];
    NSLayoutConstraint *imageLeftConstraint = [NSLayoutConstraint
                                                   constraintWithItem:topImageView attribute:NSLayoutAttributeLeft
                                                   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
                                                   NSLayoutAttributeLeft multiplier:1.0 constant:X_OFFSET];
    NSLayoutConstraint *imageRightConstraint = [NSLayoutConstraint
                                                    constraintWithItem:topImageView attribute:NSLayoutAttributeRight
                                                    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
                                                    NSLayoutAttributeRight multiplier:1.0 constant:-X_OFFSET];
[superview addConstraints:@[imageBottomConstraint ,
                            imageLeftConstraint, imageRightConstraint,
                            imageTopConstraint]];

获取更多帮助,请查看http://www.tutorialspoint.com/ios/ios_auto_layouts.htm

或尝试使用https://github.com/marcoarment/CompactConstraint

让我知道它是否有帮助。

答案 1 :(得分:1)

我测试了以下代码,它在Globe.png中添加了ImageView并添加了约束,因此它就像您描述的那样显示。区别在于将所有侧边夹到superview(self.view),然后将约束分配给superview:

-(void)addImageView{
    topImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Globe.png"]]; // Added test image
    topImageView.contentMode = UIViewContentModeScaleAspectFit;
    topImageView.backgroundColor = [UIColor clearColor];
    topImageView.layer.cornerRadius = 5.0f;
    topImageView.clipsToBounds = YES;
    topImageView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:topImageView];

    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:topImageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];

    NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:topImageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];

    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:topImageView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0];

    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:topImageView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];

    [self.view addConstraints:@[topConstraint, bottomConstraint, leftConstraint, rightConstraint]];  //Note constraints are added to the superView
}