你的位置:首页 > 操作系统

[操作系统]IOS开发之UI布局


前言:本篇随笔会经常更新,随着本人对布局的深入学习,会不断补充新的知识、新的使用技巧、新的认识等等。

 

1、Autoresizing(在代码中使用)

先简单的看看下面的代码,以及左边运行出来的效果,然后后面就会对iPhone模拟器进行旋转,再看看效果,然后结合代码中的autoresizingMask属性来体会一下:

横屏之后,说明竖屏默认的frame(0,0,100,500)换到横屏之后会默认在中间一些的位置,但是因为上面设置autoresizingMask属性是左边和上边自动伸缩:

以上就是基本的autoresizing在代码中的使用。

 

2、Autolayout的使用(代码中使用)

在Autolayout之前,有Autoresizing可以做屏幕适配,但是局限性很大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的相对关系)。

相比之下,Autolayout的功能就比Autoresizing的功能就强大的多,它能解决任何控件之间的关系。

 

AutoLayout的2个核心概念:

  ①约束:通过给控件添加约束,来决定控件的位置和尺寸。

    使用AutoLayout就需要创建约束类创建约束对象:

      NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];

  ②参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)。

 

如果会使用Autolayout就可以不需要考虑Frame值了。

 

在实际开发中,如果要使用AutoLayout,要注意一个问题,有的苹果Cocoa框架提供UIView或者自定义的UIView可能默认设置了相关Autoresizing,那么可能会和你后面添加的AutoLayout代码相互冲突,所以就需要下面的代码,将Autoresizing自动转换为AutoLayout:

   然后下面代码来使用AutoLayout,我们来实现下面的效果,当然旋转成竖屏还是要这样的布局哦,不然自动布局还有啥意义:

  

在代码实现之前,我需要补充几个知识:

 

 

 1 - (void)viewDidLoad { 2   [super viewDidLoad]; 3   // 1.创建蓝色的view 4   UIView *blueView = [[UIView alloc] init]; 5   blueView.backgroundColor = [UIColor blueColor]; 6   // 禁止autoresizing自动转为autolayout的约束 7   blueView.translatesAutoresizingMaskIntoConstraints = NO; 8   [self.view addSubview:blueView]; 9    10   // 2.创建红色的view 11   UIView *redView = [[UIView alloc] init]; 12   redView.backgroundColor = [UIColor redColor]; 13   // 禁止autoresizing自动转为autolayout的约束 14   redView.translatesAutoresizingMaskIntoConstraints = NO; 15   [self.view addSubview:redView]; 16    17   // 设置约束 18   /*****蓝色view的约束****/ 19   // 左边的约束 20   // 左边约束 21   NSLayoutConstraint *leftlc_b = \ 22    [NSLayoutConstraint constraintWithItem:blueView 23                  attribute:NSLayoutAttributeLeft 24                  relatedBy:NSLayoutRelationEqual 25                    toItem:self.view 26                  attribute:NSLayoutAttributeLeft 27                 multiplier:1.0 28                  constant:30]; 29   [self.view addConstraint:leftlc_b]; 30    31   // 底部约束 32   NSLayoutConstraint *bottomlc_b = \ 33   [NSLayoutConstraint constraintWithItem:blueView 34                  attribute:NSLayoutAttributeBottom 35                  relatedBy:NSLayoutRelationEqual 36                   toItem:self.view 37                  attribute:NSLayoutAttributeBottom 38                 multiplier:1.0 39                  constant:-30]; 40   [self.view addConstraint:bottomlc_b]; 41    42   // 右边约束 43   NSLayoutConstraint *rightlc_b = \ 44   [NSLayoutConstraint constraintWithItem:blueView 45                  attribute:NSLayoutAttributeRight 46                  relatedBy:NSLayoutRelationEqual 47                   toItem:redView 48                  attribute:NSLayoutAttributeLeft 49                 multiplier:1.0 50                  constant:-30]; 51   [self.view addConstraint:rightlc_b]; 52    53   // 宽度约束 54   NSLayoutConstraint *wlc_b = \ 55   [NSLayoutConstraint constraintWithItem:blueView 56                  attribute:NSLayoutAttributeWidth 57                  relatedBy:NSLayoutRelationEqual 58                   toItem:redView 59                  attribute:NSLayoutAttributeWidth 60                 multiplier:1.0 61                  constant:0]; 62   [self.view addConstraint:wlc_b]; 63    64   // 高度约束 65   NSLayoutConstraint *hlc_b = \ 66   [NSLayoutConstraint constraintWithItem:blueView 67                  attribute:NSLayoutAttributeHeight 68                  relatedBy:NSLayoutRelationEqual 69                   toItem:nil 70                  attribute:NSLayoutAttributeNotAnAttribute 71                 multiplier:0.0 72                  constant:50]; 73   [blueView addConstraint:hlc_b]; 74  75   /*****红色view的约束****/ 76   // 右边约束 77   NSLayoutConstraint *rightlc_r = \ 78   [NSLayoutConstraint constraintWithItem:redView 79                  attribute:NSLayoutAttributeRight 80                  relatedBy:NSLayoutRelationEqual 81                   toItem:self.view 82                  attribute:NSLayoutAttributeRight 83                 multiplier:1.0 84                  constant:-30]; 85   [self.view addConstraint:rightlc_r]; 86    87   // 顶部对齐 88   NSLayoutConstraint *toplc_r = \ 89   [NSLayoutConstraint constraintWithItem:redView 90                  attribute:NSLayoutAttributeTop 91                  relatedBy:NSLayoutRelationEqual 92                   toItem:blueView 93                  attribute:NSLayoutAttributeTop 94                 multiplier:1.0 95                  constant:0]; 96   [self.view addConstraint:toplc_r]; 97    98   // 底部对齐 99   NSLayoutConstraint *bottomlc_r = \100   [NSLayoutConstraint constraintWithItem:redView101                  attribute:NSLayoutAttributeBottom102                  relatedBy:NSLayoutRelationEqual103                   toItem:blueView104                  attribute:NSLayoutAttributeBottom105                 multiplier:1.0106                  constant:0];107   [self.view addConstraint:bottomlc_r];108 109 }

 

 

补充: