Auto Layout学习

没有限制的Auyo Layout

Stack views能通俗展示Auto Layout的能力。一个简单的Stack View决定了用户界面的横向和竖向元素。Stack View基于属性来排列这些元素

• axis:(UIStackView only)决定UIStackViews的subViews的旋转方向,是vertical还是horizontal
• orientation:(NSStackView only) 同上，不过是Macos系统开发
• distribution:决定页面布局靠着的axis
• alignment: 决定stack view的坐标

实现步骤:

1. 在XIB界面。拖入一个StackView
2. 然后再拖入子的Views
3. 可以设置space. alignment. axis对子view进行布局

解析Constraint显示

!

这个图显示的是: Red View的leading edge 一定在Blue View的尾部的8.0个点:

• Item1: 这个Item一定是一个View或者一个Layout指南
• Attribute 1: Item1上需要被限制的， 这个例子上是RedView的leading edge
• Relationship: 这个Relationship在left和right边。这个关系在下面三选一: equal、greater或less than
• Multiplier: (暂时不知道这个啥意思)The value of attribute 2 is multiplied by this floating point number. In this case, the multiplier is 1.0.
• Item 2: 这个可以为空
• Attribute 2:
• Constant: 就是限制的长度或者宽度

Auto Layout的参数

官方文档: NSLayoutAttribute

下面就是官方的一些防错误的内容(翻译)

• 位置的需要给一个比对对象
• You cannot constrain a size attribute to a location attribute.
• You cannot assign constant values to location attributes
• You cannot use a nonidentity multiplier (a value other than 1.0) with location attributes.
• For location attributes, you cannot constrain vertical attributes to horizontal attributes.
• For location attributes, you cannot constrain Leading or Trailing attributes to Left or Right attributes.

// Setting a constant height
View.height = 0.0 * NotAnAttribute + 40.0
 
// Setting a fixed distance between two buttons
Button_2.leading = 1.0 * Button_1.trailing + 8.0
 
// Aligning the leading edge of two buttons
Button_1.leading = 1.0 * Button_2.leading + 0.0
 
// Give two buttons the same width
Button_1.width = 1.0 * Button_2.width + 0.0
 
// Center a view in its superview
View.centerX = 1.0 * Superview.centerX + 0.0
View.centerY = 1.0 * Superview.centerY + 0.0
 
// Give a view a constant aspect ratio
View.height = 2.0 * View.width + 0.0

// Autolayout 布局: 动态解决Frame计算
- (UIButton *)button1
{
    if (!_button1) {
        _button1 = [UIButton buttonWithType:UIButtonTypeCustom];
        [_button1 setTitle:@"点击" forState:UIControlStateNormal];
        [_button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_button1 setBackgroundColor:[UIColor greenColor]];
        [_button1 setTranslatesAutoresizingMaskIntoConstraints:NO];
    }
    return _button1;
}

- (UIButton *)button2
{
    if (!_button2) {
        _button2 = [UIButton buttonWithType:UIButtonTypeCustom];
        [_button2 setTitle:@"点击2" forState:UIControlStateNormal];
        [_button2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_button2 setBackgroundColor:[UIColor greenColor]];
        [_button2 setTranslatesAutoresizingMaskIntoConstraints:NO];
    }
    return _button2;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    [self.view addSubview:self.button1];
    UILayoutGuide *margin = self.view.layoutMarginsGuide;
    [self.button1.topAnchor constraintEqualToAnchor:margin.topAnchor constant:60.0].active = YES;
    [self.button1.widthAnchor constraintEqualToConstant:100.0].active = YES;
    [self.button1.heightAnchor constraintEqualToConstant:50.0].active = YES;
    [self.button1.centerXAnchor constraintEqualToAnchor:margin.centerXAnchor].active = YES;
    
    [self.view addSubview:self.button2];
    UILayoutGuide *button1Margin = self.button1.layoutMarginsGuide;
    
    [self.button2.topAnchor constraintEqualToAnchor:button1Margin.bottomAnchor constant:80].active = YES;
    [self.button2.centerXAnchor constraintEqualToAnchor:button1Margin.centerXAnchor].active = YES;
    [self.button2.heightAnchor constraintEqualToConstant:50].active = YES;
    [self.button2.widthAnchor constraintEqualToConstant:200].active = YES;
    
}