Autolayout

Autoresizing

  • 一个在AutoLayout之前处理布局的技术 处理的层面为父子层面的控件 和Autolayout不兼容

  • 基本实现

  • xibstoryboard中使用Autoresizing相对比较简单

  • 代码实现:

    - (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.frame = CGRectMake(0, 0, 250, 250);
    [self.view addSubview:blueView];
    self.blueView = blueView;
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.frame = CGRectMake(0, 150, 250, 100);
    redView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
    [blueView addSubview:redView];
    

}

 - 常见的mask:

   ```objc
  UIViewAutoresizingNone                 = 0,
  UIViewAutoresizingFlexibleLeftMargin   = 1 << 0, 距离父控件左边的间距是伸缩的(不固定的)
 UIViewAutoresizingFlexibleRightMargin  = 1 << 2, 距离父控件右边的间距是伸缩的(不固定的)
 UIViewAutoresizingFlexibleTopMargin    = 1 << 3, 距离父控件顶部的间距是伸缩的(不固定的)
 UIViewAutoresizingFlexibleBottomMargin = 1 << 5, 距离父控件底部的间距是伸缩的(不固定的)
 UIViewAutoresizingFlexibleWidth        = 1 << 1, 宽度跟随父控件的宽度进行自动伸缩
 UIViewAutoresizingFlexibleHeight       = 1 << 4, 高度跟随父控件的高度进行自动伸缩

Autolayout

  • Autolayout用来处理父子和同级层面的问题
  • 6.0推出,7.0火起来
  • 核心概念:约束、参照
  • 实现方式:
  • xibstoryboard中使用Autolayout相对比较简单
  • NSLayoutConstraint实现Autolayout
  • VFL实现Autolayout

代码添加Autolayout

  • 先禁止autoresizing功能

  • view.translatesAutoresizingMaskIntoConstraints = NO;

  • 这句代码的作用是将view自带的一些autoresizing转换为AutoLayout的约束,可能会与自己添加的约束产生冲突等其他问题

  • 为什么先添加到父控件上然后再添加约束?

  • 因为有些约束需要添加到父控件上,如果没有父控件那就不知道该往哪里添加了,so crash

  • 约束添加在哪个view上?

  • 一般来说一个view的约束只要有具体数值机会可以而不需要和其他的view产生关联,那么这个约束就会添加到这个view上。比如view的宽和高约束

  • 如果一个view的一些约束关联了父控件的一些值,那么这个约束会被添加到父控件上。比如view的左边和父控件的左边对齐

  • 如果一个view和一个兄弟级别的view产生关联,那么约束会被添加到父控件身上。比如一个view和一个同级别的view的高度相等。但是如果他们没有共同的父控件,那么会添加到最近的父控件身上

NSLayoutConstraint的基本使用

  • obj1.property1 =(obj2.property2 * multiplier)+ constant value
+(id)constraintWithItem:(id)view1
              attribute:(NSLayoutAttribute)attr1
              relatedBy:(NSLayoutRelation)relation
                 toItem:(id)view2
              attribute:(NSLayoutAttribute)attr2 
             multiplier:(CGFloat)multiplier
               constant:(CGFloat)c;

view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
//以上的约束在生成后一定要添加在对应的view身上

VFL - Visual Format Language

  • H:[cancelButton(72)]-12-[acceptButton(50)]:canelButton宽72,acceptButton宽50,它们之间间距12

  • H:[wideView(>=60@700)]:wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

  • V:[redBox][yellowBox(==redBox)]:竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

  • H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|:水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)

  • VFL的使用

//使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format 
                                 options:(NSLayoutFormatOptions)opts 
                                 metrics:(NSDictionary *)metrics 
                                   views:(NSDictionary *)views;
format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件

创建一个字典(内部包含`VFL`语句中用到的控件)的快捷宏定义 这个宏可以生成和对象同名的key的字典
NSDictionaryOfVariableBindings(...)

Autolayout的常见应用

  • label的Autolayout

  • label只要有位置就可以

  • label设置宽度,然后高度会根据文字自适应

  • 有的时候在xib约束label的宽度,但是代码中设置的文字又不足以填满整个label,这个时候往往想文字有多宽label就有多宽,这个时候在设置label的宽度约束的时候不要设置等于某个值,而是设置小于等于某个值

  • 一个控件的高度、宽度可以设置多个约束,比如可以设置小于等于100,大于等于50这样子

  • 一个控件的Y值可以参照上面的view1和view2两个约束,为了避免冲突将距离view2的约束值的优先级改为750,假如view1被从父控件中移除,那么控件的Y值将会参照view2的那个约束

  • 父控件的大小随着子控件的内容的大小变化而变化

  • 在一个父控件的UIView设置除了高度以外的约束,然后添加子控件label,label设置除了高度以外的约束并且设置label的底部距离父控件的底部的距离是固定的,然后如果更改label的文字,那么label的高度会变化,父控件的高度也会变化

  • NSLayoutConstaints和VFL的使用

  • NSLayoutConstraints的使用 :NSLayoutConstraints 密码:vg9y

  • VFL的使用:VFL 密码:irrn

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,100评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,862评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,993评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,309评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,303评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,421评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,830评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,501评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,689评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,506评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,564评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,286评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,826评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,875评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,114评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,705评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,269评论 2 341

推荐阅读更多精彩内容