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. 利用NSLayoutConstraint类创建具体的约束对象
    2. 添加约束对象到相应的view上
    3. - (void)addConstraint:(NSLayoutConstraint *)constraint;
    4. - (void)addConstraints:(NSArray *)constraints;

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

  

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

使用自动布局是需要遵守一些约束的规则的:

  添加约束的规则(1)

    在创建约束之后,需要将其添加到作用的view上
    在添加时要注意目标view需要遵循以下规则:
    1)对于两个同层级view之间的约束关系,添加到它们的父view上

    
  添加约束的规则(2)
    2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
    

  添加约束的规则(3)
    3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
    
    在下面展示全部的代码中,我抽取一部分来理解上面约束添加规则的意思:

    

    接着再补充这个约束的类和创建对象的各个参数的意义:

      一个NSLayoutConstraint对象就代表一个约束。
      创建约束对象的常用方法

        
                view1 :要约束的控件
                 attr1 :约束的类型(做怎样的约束)
               relation :与参照控件之间的关系
                view2 :参照的控件
                 attr2 :约束的类型(做怎样的约束)
              multiplier :乘数
                   c :常量

     下面展示实现的完整代码:

  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:redView
101                                  attribute:NSLayoutAttributeBottom
102                                  relatedBy:NSLayoutRelationEqual
103                                     toItem:blueView
104                                  attribute:NSLayoutAttributeBottom
105                                 multiplier:1.0
106                                   constant:0];
107     [self.view addConstraint:bottomlc_r];
108
109 }

补充:

  

时间: 04-01

IOS开发之UI布局的相关文章

IOS开发之UI中开启动画的方式

UI中开启动画的方式 开启动画是UIImageView中的功能属性  有渐进式动画和序列帧动画 渐进式动画包括头尾式动画和block式动画 序列帧动画即为在极短时间内播放一组连续的图片所产生的动画效果 首先需要创建一个UIImageView对象为imageView1.序列帧动画基本步骤 将所要播放的图片数组赋值给UIImageView对象的animationImages属性,它就是一个数组对象 imageView.animationImages=array 设置动画的执行次数(animation

iOS开发之UI——键盘弹出屏幕上移

平时在开发中,当有输入框时,弹出的键盘有时会遮挡住下方的屏幕,为此我们可以在对输入框进行操作时使屏幕上移,避免下方屏幕被遮挡.(也可以使用ScrollView进行滑动.) #pragma mark - 屏幕上弹 -( void )textFieldDidBeginEditing:(UITextField *)textField {      //键盘高度216           //滑动效果(动画)      NSTimeInterval animationDuration = 0.30f;

iOS开发之Auto Layout入门

随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享.  什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 为什么要用Auto Layout? Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题. 在iPhone4时代开发者只需要适

iOS开发之多XIB之间相互关联

Xib link Xib 1.直接加载xib中的UIView 创建一个View1.xib, 随便设一个背景色,加一个标识UILabel, 这样好知道是这个view是哪一个view. 你可以在这个view上加作意的subview,我只是说明原理,所以这儿并没有加作何subview. 最终我的View1如下图: 由于View1会放到其它View上作为subview,所以这儿size是Freeform, Status Bar是:None. 将下面代码放到viewDidLoad中: &1这行代码就是加载

iOS开发之MVVM在项目中的应用

今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦~). 由于本人项目经验有限,关于架构设计方面的东西理解有限,我个人对MVVM的理解主要是借鉴于之前的用过的MVC的Web框架~在学校的时候用过ThinkPHP框架,和SSH框架,都是MVC的架构模式,今天MVVM与传统的MVC可谓是极为相似,也可以说是兄弟关系,也就是一家人了. 说到架构设计和团队

Android开发之UI更新交互机制与实例解析

android开发过程中,经常需要更新UI的状态和文案等.这是就需要对UI进行 更新.在android中更新UI一般有三种方法,handler机制.RunOnUiThread方法以及AsyncTask异步类方法等 本文下面就这三种方法进行了演示和代码实现. a.Handler机制通过使用消息机制来实现 b.RunOnUiThread方法是通过运行UI线程来达到更新UI的目的 c.AsyncTask是异步类,通过异步更新来更新UI 效果图如下:           (1)Java功能实现代码如下:

iOS 开发之Widget的开发及使用(下)

在iOS 开发之Widget的开发及使用(上)中都交代清楚了关于widget扩展的添加,以及布局部分的内容,下面说下关键部分:关于数据共享的操作. 在Apple发布iOS8.0以后,对App有提供一个新的扩展选择项,叫做App groups,选择宿主Target之后,在capabilities选项卡下面会找到这个选项: 那么这个选项主要是做何使用呢? iOS系统,每个开发应该都清楚,其内部程序都是遵循沙盒机制,App与App之间,是不能进行数据共享的,A 不能访问 B 的数据,同样 B 也不能访

iOS开发之Block

iOS开发之Block 1.block的含义和作用 UI开发和网络常见功能实现回调, 按钮的事件处理方法是回调方法, 网络下载后的回调处理 (1) 按钮 target-action 一个方法传入按钮中 (2) 表格视图 传入一个指针self, 回调视图控制器中的方法 (3) block 语句块, 解决回调, 理解为"匿名函数", 定义在方法里面 2.block的基本使用(语法) 涉及知识点: 定义block变量,定义block语句块 block参数和返回值 block捕获外部变量(包括

IOS开发之copy的问题

copy的目的就是修改副本,修改原始对象和副本时不会产生干扰. 定义一个不可变属性A,再定义一个可变属性B.用B做添加删除等操作后再将B赋值给A时,有些人习惯用A = B:其实这样是不安全的. 假设有下面的一段代码: ? 1 2 3 4 5 6 7 8 9 10   int main() {    NSMutableString *strM = [NSMutableString [email protected]"123"];    NSString *str = strM;    N