AutoLayout

来源:互联网 发布:擦枪字幕组怎么样知乎 编辑:程序博客网 时间:2024/05/16 05:43

1 . .storyboard文件和 .xib简单描述

.storyboard文件和 .xib文件本质上都是xml文件,内部是对其上控件的描述,内部并不包含任何类的说明,前期的编辑只是对控件的描述。当程序运行的时候,加载.storyboard和.xib文件时需要需要生成具体的对象才能显示,右侧控制面板Show the Identity instpector->Custom Class->Class 是指定界面加载时生成的对象类型。

Show the Attributes inspector ->Simulated Metrics->Size 是修改左侧控制器编辑时大小,不会影响运行时的实际大小

2 . 约束

约束:约束是由已知控件frame来确定位置控件frame。
约束原则:能确定控件frame即可,多了少了都不好。

这里写图片描述

NSLayoutConstraint:约束类。
约束公式:
这里写图片描述
点击左侧约束,右侧面板是对此约束关系(约束公式)的呈现,
Label.Leading Equal Superview.Leading*1+15
Label.Leading–label的x坐标 Equal–= Superview.Leading–父视图坐标(0,0)

2 .1 xib/storyboard托拉拽自动布局:
1、编辑面板右下角pin面板 2 . 菜单栏 Editor->pin 3 .直接拉取,单个控件–点击控件+ctrl拉取到本身设置自身约束,两个控件–点击控件+ctrl拉取到另一控件设置控件之间约束

2,代码调整自动布局
点击左侧面板约束拉取到代码中

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *labelHeightLayout;

点击按钮修改约束

- (IBAction)touch:(id)sender {//    self.labelHeightLayout.constant+=10;    [UIView animateWithDuration:0.5 animations:^{        self.labelHeightLayout.constant+=10;        //重新布局,否则动画无效果        [self.view layoutIfNeeded];    }];}

3 .storyboard界面之间传值
这里写图片描述
segue的Id
这里写图片描述
启动动画和启动主页面

正向传值:正向传值使用UIStoryboardSegue
反向传值:反向传值使用代理

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {    NSLog(@"哈哈%@",segue.identifier);    if ([segue.identifier isEqualToString:@"gotoNext"]) {    //segue.destinationViewController 相当于实例化下一个对象    //正向传值使用segue        [segue.destinationViewController setSomeThing:@"这里是viewController"];    //反向传值使用代理          [segue.destinationViewController setDelegate:self];    }}

4,代码实现自动布局

这里写图片描述

//如果是自身控件的宽度/高度/比例 这三个约束,创建的约束对象添加到自己视图上。如果是其他约束,创建的约束对象添加到父视图上面。
//约束的类NSLayoutContraint

//如果想要实现自动布局,视图要把这个属性设置为NO;默认是YES;

_redView.translatesAutoresizingMaskIntoConstraints=NO;_yellowView.translatesAutoresizingMaskIntoConstraints=NO;

//用来添加约束

-(void)addContraints{    //红色视图的左边距约束    NSLayoutConstraint * redC1=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:10];    //红色视图上边距约束    NSLayoutConstraint * redC2=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:10];    //红色视图右边距约束//    NSLayoutConstraint * redC3=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10];    //红色视图,下边距约束//    NSLayoutConstraint * redC4=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10];    //红色视图自身宽度约束    NSLayoutConstraint * redC5=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];    //红色视图自身高度约束    NSLayoutConstraint * redC6=[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];    //如果是自身控件的宽度/高度/比例 这三个约束,创建的约束对象添加到自己视图上;也可以加在父视图上面。如果是其他约束,创建的约束对象添加到父视图上面。    [self.view addConstraints:@[redC1,redC2,redC5,redC6]];    //平级两个视图之间的关系    //红色视图和黄色视图的水平间距;    NSLayoutConstraint * yellowRedHSpaceC=[NSLayoutConstraint constraintWithItem:_yellowView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:_redView attribute:NSLayoutAttributeTrailing multiplier:1 constant:10];    //红色视图和黄色视图的垂直距离    NSLayoutConstraint * yelloRedVSpaceC=[NSLayoutConstraint constraintWithItem:_yellowView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_redView attribute:NSLayoutAttributeBottom multiplier:1 constant:10];    //设置黄色视图自身的宽高比    NSLayoutConstraint * yellowRate=[NSLayoutConstraint constraintWithItem:_yellowView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_yellowView attribute:NSLayoutAttributeHeight multiplier:2.0 constant:0];    //设置黄色视图相对于红色视图的宽度    NSLayoutConstraint * yellowRedWidth=[NSLayoutConstraint constraintWithItem:_yellowView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_redView attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0];    [self.view addConstraints:@[yellowRedHSpaceC,yelloRedVSpaceC,yellowRate,yellowRedWidth]];}

5,flv实现自动布局

_redView.translatesAutoresizingMaskIntoConstraints=NO; _yellowView.translatesAutoresizingMaskIntoConstraints=NO;
-(void)addConstrains{    //使用vlf语言添加约束    /*     第一个参数:vlf格式的字符串,描述约束关系        描述字符串:        "H:" 表示是水平方向上的约束;        "V:" 垂直方向上的约束;        "|-10-[view]" 距离父视图左边距/上边距为10"|-[view]" 距离父视图左边距/上边距为0很奇怪,左总会有16"[view]-10-|" 离父视图右边距/下边距为10"[view(100)]" view的宽度/高度为100"[view(>=10,<=100)]" view的宽度/高度大于等于10,小于等于100"[view(==view1)]" view的宽度/高度等于view1的宽度/高度        "[view]-10-[view1]" view和view1的水平/垂直间距为10"[view]-[view1]" view和view1的间距默认为8"[view(200@1000)]" view宽度200,优先级1000;     第二个参数:一般固定写0;     第三个参数:一般固定nil;     第四个参数:一个约束中用到的视图对象的字典;字典要求key是视图对象的变量名,value是该视图对象。     */    NSArray * constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[_redView(100)]-[_yellowView]-10-|" options:0 metrics:nil views:@{@"_redView":_redView,@"_yellowView":_yellowView}];    NSArray * constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_redView(100)]-[_yellowView(==_redView)]" options:0 metrics:nil views:@{@"_redView":_redView,@"_yellowView":_yellowView}];    [self.view addConstraints:constraints1];    [self.view addConstraints:constraints2];}
0 0
原创粉丝点击