Autolayout

1.屏幕適配 系統(tǒng)適配

什么是適配笆搓?
適應(yīng)、兼容各種不同的情況

移動(dòng)開(kāi)發(fā)中趣竣,適配的常見(jiàn)種類
系統(tǒng)適配:針對(duì)不同版本的操作系統(tǒng)進(jìn)行適配
屏幕適配:針對(duì)不同大小的屏幕尺寸進(jìn)行適配

屏幕適配
iPhone的尺寸:3.5inch武福、4.0inch4.7inch骇塘、5.5inch
iPad的尺寸:7.9inch伊履、9.7inch
屏幕方向: 豎屏 橫屏

1-設(shè)備分辨率.png

2.Autoresizing

在Autolayout之前,有Autoresizing可以作屏幕適配款违,但局限性較大唐瀑,有些任務(wù)根本無(wú)法完成
相比之下,Autolayout的功能比Autoresizing強(qiáng)大很多

3.Autolayout

Autolayout是一種自動(dòng)布局技術(shù)奠货,專門(mén)用來(lái)布局UI界面
Autolayout自iOS 6開(kāi)始引入,由于Xcode 4的不給力座掘,當(dāng)時(shí)并沒(méi)有得到很大推廣
iOS 7(Xcode 5)開(kāi)始递惋,Autolayout的開(kāi)發(fā)效率得到很大的提升
蘋(píng)果官方也推薦開(kāi)發(fā)者盡量使用Autolayout來(lái)布局UI界面
Autolayout能很輕松地解決屏幕適配的問(wèn)題

Autolayout的2個(gè)核心概念:參照 約束

2-Autolayout約束處理.png
3-Autolayout相對(duì).png
4-Autolayout對(duì)齊.png

Autolayout的警告和錯(cuò)誤:
警告:控件的frame不匹配所添加的約束, 比如
比如約束控件的寬度為100, 而控件現(xiàn)在的寬度是110

錯(cuò)誤:缺乏必要的約束, 比如
只約束了寬度和高度, 沒(méi)有約束具體的位置

兩個(gè)約束沖突, 比如
1個(gè)約束控件的寬度為100, 1個(gè)約束控件的寬度為110

4.代碼實(shí)現(xiàn)Autolayout

代碼實(shí)現(xiàn)Autolayout的步驟
利用NSLayoutConstraint類創(chuàng)建具體的約束對(duì)象
添加約束對(duì)象到相應(yīng)的view

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代碼實(shí)現(xiàn)Autolayout的注意點(diǎn):

1>要先禁止autoresizing功能,設(shè)置view的下面屬性為NO

view.translatesAutoresizingMaskIntoConstraints = NO;

2>添加約束之前溢陪,一定要保證相關(guān)控件都已經(jīng)在各自的父控件上
3>不用再給view設(shè)置frame

4.1NSLayoutConstraint

一個(gè)NSLayoutConstraint對(duì)象就代表一個(gè)約束

創(chuàng)建約束對(duì)象的常用方法

+(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 :與參照控件之間的關(guān)系
view2 :參照的控件
attr2 :約束的類型(做怎樣的約束)
multiplier :乘數(shù)
c :常量

自動(dòng)布局的核心計(jì)算公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

4.2添加約束的規(guī)則

在創(chuàng)建約束之后萍虽,需要將其添加到作用的view上
在添加時(shí)要注意目標(biāo)view需要遵循以下規(guī)則:
1)對(duì)于兩個(gè)同層級(jí)view之間的約束關(guān)系,添加到它們的父view上

5-兩個(gè)同層級(jí)view之間的約束添加到它們的父view上.png

2)對(duì)于兩個(gè)不同層級(jí)view之間的約束關(guān)系形真,添加到他們最近的共同父view上

6-兩個(gè)不同層級(jí)view之間的約束添加到他們最近的共同父view上.png

3)對(duì)于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系杉编,添加到層次較高的父view上

7-有層次關(guān)系的兩個(gè)view之間的約束添加到層次較高的父view上.png

5.VFL語(yǔ)言 Visual Format Language 可視化格式語(yǔ)言

VFL是蘋(píng)果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語(yǔ)言

8-Visual Format Language.png
H:[cancelButton(72)]-12-[acceptButton(50)]
//canelButton寬72,acceptButton寬50咆霜,它們之間間距12

H:[wideView(>=60@700)]
//wideView寬度大于等于60point邓馒,該約束條件優(yōu)先級(jí)為700
//(優(yōu)先級(jí)最大值為1000,優(yōu)先級(jí)越高的約束越先被滿足)

V:[redBox][yellowBox(==redBox)]
//豎直方向上蛾坯,先有一個(gè)redBox光酣,其下方緊接一個(gè)高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
//水平方向上,F(xiàn)ind距離父view左邊緣默認(rèn)間隔寬度脉课,之后是FindNext距離Find間隔默認(rèn)寬度救军;
//再之后是寬度不小于20的FindField,它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度倘零。
//(豎線“|” 表示superview的邊緣)

使用VFL來(lái)創(chuàng)建約束數(shù)組

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format 
                                 options:(NSLayoutFormatOptions)opts
                                 metrics:(NSDictionary *)metrics
                                   views:(NSDictionary *)views;

format :VFL語(yǔ)句
opts :約束類型
metrics :VFL語(yǔ)句中用到的具體數(shù)值
views :VFL語(yǔ)句中用到的控件
創(chuàng)建一個(gè)字典(內(nèi)部包含VFL語(yǔ)句中用到的控件)的快捷宏定義

NSDictionaryOfVariableBindings(...)

6.基于Autolayout的動(dòng)畫(huà)

在修改了約束之后唱遭,只要執(zhí)行下面代碼,就能做動(dòng)畫(huà)效果

[UIView animateWithDuration:1.0 animations:^{
    [添加了約束的view layoutIfNeeded];
}];

7.Masonry

目前最流行的Autolayout第三方框架
用優(yōu)雅的代碼方式編寫(xiě)Autolayout
省去了蘋(píng)果官方惡心的Autolayout代碼
大大提高了開(kāi)發(fā)效率
框架地址: https://github.com/SnapKit/Masonry

7.1mas_equalTo和equalTo

默認(rèn)情況下
mas_equalTo有自動(dòng)包裝功能呈驶,比如自動(dòng)將20包裝為@20
equalTo沒(méi)有自動(dòng)包裝功能

如果添加了下面的宏拷泽,那么mas_equalTo和equalTo就沒(méi)有區(qū)別

#define MAS_SHORTHAND_GLOBALS
// 注意:這個(gè)宏一定要添加到#import "Masonry.h"前面

7.2mas_width和width

默認(rèn)情況下
width是make對(duì)象的一個(gè)屬性,用來(lái)添加寬度約束用的袖瞻,表示對(duì)寬度進(jìn)行約束
mas_width是一個(gè)屬性值跌穗,用來(lái)當(dāng)做equalTo的參數(shù),表示某個(gè)控件的寬度屬性

如果添加了下面的宏虏辫,mas_width也可以寫(xiě)成width

#define MAS_SHORTHAND

mas_height蚌吸、mas_centerX以此類推

以下方法都僅僅是為了提高可讀性,可有可無(wú)

- (MASConstraint *)with {
    return self;
}

- (MASConstraint *)and {
    return self;
}

8.有了Autolayout的UILabel

在沒(méi)有Autolayout之前砌庄,UILabel的文字內(nèi)容總是居中顯示羹唠,導(dǎo)致頂部和底部會(huì)有一大片空缺區(qū)域

有Autolayout之后奕枢,UILabel的bounds默認(rèn)會(huì)自動(dòng)包住所有的文字內(nèi)容,頂部和底部不再會(huì)有空缺區(qū)域

9-Autolayout化的UILabel.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末佩微,一起剝皮案震驚了整個(gè)濱河市缝彬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哺眯,老刑警劉巖谷浅,帶你破解...
    沈念sama閱讀 221,548評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異奶卓,居然都是意外死亡一疯,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)夺姑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)墩邀,“玉大人,你說(shuō)我怎么就攤上這事盏浙∶级茫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,990評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵废膘,是天一觀的道長(zhǎng)竹海。 經(jīng)常有香客問(wèn)我,道長(zhǎng)丐黄,這世上最難降的妖魔是什么站削? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,618評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮孵稽,結(jié)果婚禮上许起,老公的妹妹穿的比我還像新娘。我一直安慰自己菩鲜,他們只是感情好园细,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著接校,像睡著了一般猛频。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛛勉,一...
    開(kāi)封第一講書(shū)人閱讀 52,246評(píng)論 1 308
  • 那天鹿寻,我揣著相機(jī)與錄音,去河邊找鬼诽凌。 笑死毡熏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的侣诵。 我是一名探鬼主播痢法,決...
    沈念sama閱讀 40,819評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼狱窘,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了财搁?” 一聲冷哼從身側(cè)響起蘸炸,我...
    開(kāi)封第一講書(shū)人閱讀 39,725評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尖奔,沒(méi)想到半個(gè)月后搭儒,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡提茁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評(píng)論 3 340
  • 正文 我和宋清朗相戀三年淹禾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甘凭。...
    茶點(diǎn)故事閱讀 40,488評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡稀拐,死狀恐怖火邓,靈堂內(nèi)的尸體忽然破棺而出丹弱,到底是詐尸還是另有隱情,我是刑警寧澤铲咨,帶...
    沈念sama閱讀 36,181評(píng)論 5 350
  • 正文 年R本政府宣布躲胳,位于F島的核電站,受9級(jí)特大地震影響纤勒,放射性物質(zhì)發(fā)生泄漏坯苹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評(píng)論 3 333
  • 文/蒙蒙 一摇天、第九天 我趴在偏房一處隱蔽的房頂上張望粹湃。 院中可真熱鬧,春花似錦泉坐、人聲如沸为鳄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,331評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)孤钦。三九已至,卻和暖如春纯丸,著一層夾襖步出監(jiān)牢的瞬間偏形,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,445評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工觉鼻, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留俊扭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,897評(píng)論 3 376
  • 正文 我出身青樓坠陈,卻偏偏與公主長(zhǎng)得像统扳,于是被迫代替她去往敵國(guó)和親喘帚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容