UIView中的Autolayout问题

时间:2014-08-21 08:43:41

标签: ios objective-c uiview

我在这里为一个简单的问题寻求帮助。我的应用程序在3.5“和4”屏幕上运行,但视图不在两个尺寸的中心(检查视图的图像)。我正在使用自动布局,也试图重置建议的约束。当我将标签带到一个视图的中心时,它在另一个视图中没有正确定位。请帮助我卡住

3.5" and 4"

2 个答案:

答案 0 :(得分:1)

您需要向需要居中的视图添加4个约束。

引脚:
1.宽度。
2.身高。

对齐:
3.集装箱中的水平中心 4.容器中的垂直中心。

答案 1 :(得分:0)

将所有子视图包裹在容器内的红色广泛背景之外:UIView:

@property (nonatomic, strong) UIView *container;

[self.container addSubview:greyBox];
[self.container addSubview:getStarted];
...

[self.view addSubview:self.redBG];
[self.view addSubview:self.container];

将约束更新为相对于容器视图而不是self.view。

然后将容器视图集中到self.view:

// ---------------------------------------------------------------
// centers the container view to your view controller's vivew
// ---------------------------------------------------------------
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.container attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.container attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

这样,您的子视图似乎始终居中。

我认为您目前遇到的问题是您已经抵消了#39;每个子视图相对于self.view的上边缘的位置。你可以在一个屏幕上看到它,但是当你的屏幕变长时,它看起来是错误的。

使用上面的视图容器方法,您可以动态添加任意数量的子视图,并且它仍然居中,假设您的子视图连接到容器视图的顶部和底部边缘,如帐篷。

在容器视图中浮动子视图将导致容器具有0高度而不起作用。

更新

不确定您是如何设置IB约束的,您可能希望显示它们的屏幕截图。

也许您没有在IB中正确设置约束。也许你可以改进你的约束设置,类似于我在下面提供的约束设置,看它是否修复了它。

这是我上面提到的方法的演示:

4英寸iPhone屏幕:

4 inch iPhone screenshot

3.5英寸iPhone屏幕:

3.5 inch iPhone screenshot

请注意两个屏幕截图如何显示白色框在视图中居中。

这是我使用的代码:

头文件

// HEADER FILE
#import <UIKit/UIKit.h>

@interface MainViewController : UIViewController

@property (nonatomic, strong) UIView *gradient;

@property (nonatomic, strong) UIView *container;
@property (nonatomic, strong) UIView *whiteBox;
@property (nonatomic, strong) UILabel *label1;
@property (nonatomic, strong) UIButton *getStarted;
@property (nonatomic, strong) UILabel *label2;

@end

实施档案

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

    [self initView];
    [self initConstraints];
}

-(void)initView
{
    self.gradient = [[UIView alloc] init];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    gradientLayer.frame = self.view.frame;

    UIColor *redColor = [UIColor colorWithRed:157.0/255.0 green:37.0/255.0 blue:29.0/255.0 alpha:1.0];
    UIColor *pinkColor = [UIColor colorWithRed:216.0/255.0 green:101.0/255.0 blue:100.0/255.0 alpha:1.0];

    gradientLayer.startPoint = CGPointMake(0.5, 0.0);
    gradientLayer.endPoint = CGPointMake(0.5, 1.0);
    gradientLayer.colors = @[(id)redColor.CGColor,
                             (id)pinkColor.CGColor,
                             (id)redColor.CGColor];

    [self.gradient.layer insertSublayer:gradientLayer atIndex:0];


    // container view
    self.container = [[UIView alloc] init];


    // white box
    self.whiteBox = [[UIView alloc] init];
    self.whiteBox.backgroundColor = [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1.0];
    self.whiteBox.layer.shadowColor = [UIColor blackColor].CGColor;
    self.whiteBox.layer.shadowOffset = CGSizeMake(0.0, 3.0);
    self.whiteBox.layer.shadowOpacity = 0.5;
    self.whiteBox.layer.shadowRadius = 3.0;

    self.label1 = [[UILabel alloc] init];
    self.label1.text = @"Label 1 Text Goes Here";
    self.label1.textAlignment = NSTextAlignmentCenter;
    self.label1.textColor = redColor;

    self.getStarted = [[UIButton alloc] init];
    [self.getStarted setTitle:@"Get Started" forState:UIControlStateNormal];
    [self.getStarted setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.getStarted.backgroundColor = redColor;

    self.label2 = [[UILabel alloc] init];
    self.label2.text = @"Version 1.3 (log enabled)";
    self.label2.textAlignment = NSTextAlignmentCenter;
    self.label2.textColor = [UIColor darkGrayColor];
    self.label2.font = [UIFont fontWithName:@"Arial" size:14];


    [self.whiteBox addSubview:self.label1];
    [self.whiteBox addSubview:self.getStarted];
    [self.whiteBox addSubview:self.label2];

    [self.container addSubview:self.whiteBox];

    [self.view addSubview:self.gradient];
    [self.view addSubview:self.container];
}

-(void)initConstraints
{
    self.gradient.translatesAutoresizingMaskIntoConstraints = NO;
    self.container.translatesAutoresizingMaskIntoConstraints = NO;
    self.whiteBox.translatesAutoresizingMaskIntoConstraints = NO;
    self.label1.translatesAutoresizingMaskIntoConstraints = NO;
    self.getStarted.translatesAutoresizingMaskIntoConstraints = NO;
    self.label2.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"gradient": self.gradient,
                 @"container": self.container,
                 @"whiteBox": self.whiteBox,
                 @"label1": self.label1,
                 @"getStarted": self.getStarted,
                 @"label2": self.label2
                 };

    // gradient constraint
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[gradient]|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[gradient]|" options:0 metrics:nil views:views]];


    // container constraitns
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.container
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1.0
                                                           constant:0.0]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.container
                                                          attribute:NSLayoutAttributeCenterY
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterY
                                                         multiplier:1.0
                                                           constant:0.0]];

    // white box constraints

    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[whiteBox(280)]-10-|" options:0 metrics:nil views:views]];
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[whiteBox]-10-|" options:0 metrics:nil views:views]];

    // white box subview constraints

    [self.whiteBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[label1]-10-|" options:0 metrics:nil views:views]];
    [self.whiteBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[getStarted]-10-|" options:0 metrics:nil views:views]];
    [self.whiteBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[label2]-10-|" options:0 metrics:nil views:views]];

    [self.whiteBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[label1]-20-[getStarted(40)]-15-[label2]-5-|" options:0 metrics:nil views:views]];


}