IOS自动布局Autolayout约束添加方法

一.xib界面中使用按钮添加

Alignment类型的约束添加

alignment约束有9个可添加的类型。

其中最下面的两个分别是Horizontally:垂直居中对齐;Vertically:水平居中对起;可以设置一个参数,就是偏移量,可以设置为正数或负数,正数是水平向右,负数是水平向左

上面七个都要选中多个View时才可以用,也就是说他不是针对某一个view的布局,而是几个兄弟view关系的体现,分别可以设置leading、trailing、top、buttom、CenterX、CenterY、Baselines七种。

Lead当前实际坐标哪个在上面其他选中的就等于他,比如实际的上下坐标为A、B、C,那么选中ABC,进行lead约束之后,就会是B.lead=A.lead,C.lead=A.lead。大家都向最上面的A靠齐。

PIN

PIN,是使用最广泛的约束,其中可以设置某一个View的宽度和高度,某一个view到父View四周的距离,某一个view到四周相邻其他View的距离。设置某多个View宽度或者高度相同,或者按照比例分配,

PIN中还可以设置Align中的多选性质的七个属性,但是不能设置便宜参数,只能设置对齐。

二.xib中拖动添加约束


另外在xib页面还可以拖动添加约束,按住control,点击并拖动某一个view,就会出现一条线,将这条线拖动空白部位,就可以设置点击的View与父View相关的约束,拖动到某一个兄弟View就可以设置该View与这个兄弟View相关的约束。

拖动除了在xib的界面中拖动以外,在xib的View列表中按住Control键拖动一个View到另一个View或者父View也可以添加他们之间的约束。

三.使用系统方法类代码添加约束

代码添加约束主要思想与界面中类似。比如我们要添加一个约束,ViewOne的CenterX等于父View的CenterX,就初始化一个如下的约束对象

//_ViewOne.center.x = self.view.center.x;

NSLayoutConstraint* nowLayOut = [NSLayoutConstraint

constraintWithItem:_ViewOne//被约束View对象

attribute:NSLayoutAttributeCenterX//被约束的值

relatedBy:NSLayoutRelationEqual//约束类型

toItem:self.view//约束依赖对象

attribute:NSLayoutAttributeCenterX//约束的值

multiplier:1.0f

constant:0//偏移量

];

[self.viewaddSubview:nowLayOut];

然后将该约束加入到最大的父View中就可以了。

有一点需要注意,如果需要使用autolayout布局某控件就必须设置该控件Autoresizing属性为NO。

[_ViewOnesetTranslatesAutoresizingMaskIntoConstraints:NO];

四.使用VFL语言代码添加约束

使用代码布局时除了使用系统的对象和方法以外还有一种VFL语言添加约束的方法。下面先看一段使用VFL布局的代码

-(void)InitLayout

{

//-------------------------------------------下面是进行页面布局的代码

//需要进行界面布局的控件或者View需要设置该参数

[m_loginViewsetTranslatesAutoresizingMaskIntoConstraints:NO];

[m_addrViewsetTranslatesAutoresizingMaskIntoConstraints:NO];

[m_logoViewsetTranslatesAutoresizingMaskIntoConstraints:NO];

//添加将进行界面布局的界面元素

NSDictionary*dict=NSDictionaryOfVariableBindings(m_loginView,m_logoView,m_addrView);

//初始化常量

//登录View

intlwidthNull=(self.view.frame.size.width-m_loginViewWidth)/2;

//LogoView

intllogoWidth=286/2;

intllogoHight=103/2;

intllogoWidthNull=(self.view.frame.size.width-llogoWidth)/2;

//addrView

intladdrWidth=300/2;

intladdrHight=18/2;

intladdrWidthNull=(self.view.frame.size.width-laddrWidth)/2;

intlhightNull=(self.view.frame.size.height-m_loginViewHight-llogoHight-laddrHight)/4;

NSDictionary*metrics

=@{@"LoginViewWidth":[[NSNumberalloc]initWithInt:m_loginViewWidth],

@"LoginViewHight":[[NSNumberalloc]initWithInt:m_loginViewHight],

@"LoginWidthNull":[[NSNumberalloc]initWithInt:lwidthNull],

@"LogoWidth":[[NSNumberalloc]initWithInt:llogoWidth],

@"LogoHight":[[NSNumberalloc]initWithInt:llogoHight],

@"LogoWidthNull":[[NSNumberalloc]initWithInt:llogoWidthNull],

@"AddrWidth":[[NSNumberalloc]initWithInt:laddrWidth],

@"AddrHight":[[NSNumberalloc]initWithInt:laddrHight],

@"AddrWidthNull":[[NSNumberalloc]initWithInt:laddrWidthNull],

@"AllHightNull":[[NSNumberalloc]initWithInt:lhightNull]};

//编辑并加入界面限制

NSString*vfl0 =@"H:|-LoginWidthNull-[m_loginView(LoginViewWidth)]-LoginWidthNull-|";

NSString*vfl1 =@"H:|-LogoWidthNull-[m_logoView(LogoWidth)]-LogoWidthNull-|";

NSString*vfl2 =@"H:|-AddrWidthNull-[m_addrView(AddrWidth)]-AddrWidthNull-|";

NSString*vfl3 =@"V:|-AllHightNull-[m_logoView(LogoHight)]-AllHightNull-[m_loginView(LoginViewHight)]-AllHightNull-[m_addrView(AddrHight)]-AllHightNull-|";

[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:vfl0options:0metrics:metricsviews:dict]];

[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:vfl1options:0metrics:metricsviews:dict]];

[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:vfl2options:0metrics:metricsviews:dict]];

[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:vfl3options:0metrics:metricsviews:dict]];

}

第一步跟系统方法一样,先将需要布局添加约束的view对象的Autoresizing属性设置为NO。

第二步将需要布局的View都添加组成一个字典。

第三步组织布局时需要使用的常量,也组成一个字典。这些常量主要就是一些间隔距离,偏移量等数据。

第四步组建VFL约束语句,这里组建VFL语句其实就是用之前的常量和需要被约束的对象组成一个特殊的字符串。

第五步将组建好的VFL约束语句加入到父View中实现约束。这与系统方法类似。

五.第三方库添加约束

除了以上所说的几种方法之外,还有一些优秀的第三方库可以添加autolayout约束,比如masonry,大家可以了解一下。无论用什么方法,其实思想都一样,大家可以在实践中多体会。

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

推荐阅读更多精彩内容