Autolayout

Autoresizing

  • 一個在AutoLayout之前處理布局的技術 處理的層面為父子層面的控件 和Autolayout不兼容

  • 基本實現(xiàn)

  • xibstoryboard中使用Autoresizing相對比較簡單

  • 代碼實現(xiàn):

    - (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火起來
  • 核心概念:約束、參照
  • 實現(xiàn)方式:
  • xibstoryboard中使用Autolayout相對比較簡單
  • NSLayoutConstraint實現(xiàn)Autolayout
  • VFL實現(xiàn)Autolayout

代碼添加Autolayout

  • 先禁止autoresizing功能

  • view.translatesAutoresizingMaskIntoConstraints = NO;

  • 這句代碼的作用是將view自帶的一些autoresizing轉換為AutoLayout的約束,可能會與自己添加的約束產生沖突等其他問題

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

  • 因為有些約束需要添加到父控件上,如果沒有父控件那就不知道該往哪里添加了,so crash

  • 約束添加在哪個view上?

  • 一般來說一個view的約束只要有具體數值機會可以而不需要和其他的view產生關聯(lián),那么這個約束就會添加到這個view上。比如view的寬和高約束

  • 如果一個view的一些約束關聯(lián)了父控件的一些值,那么這個約束會被添加到父控件上。比如view的左邊和父控件的左邊對齊

  • 如果一個view和一個兄弟級別的view產生關聯(lián),那么約束會被添加到父控件身上。比如一個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,該約束條件優(yōu)先級為700(優(yōu)先級最大值為1000,優(yōu)先級越高的約束越先被滿足)

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

  • H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|:水平方向上,Find距離父view左邊緣默認間隔寬度,之后是FindNext距離Find間隔默認寬度;再之后是寬度不小于20的FindField,它和FindNext以及父view右邊緣的間距都是默認寬度。(豎線“|” 表示superview的邊緣)

  • VFL的使用

//使用VFL來創(chuàng)建約束數組
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format 
                                 options:(NSLayoutFormatOptions)opts 
                                 metrics:(NSDictionary *)metrics 
                                   views:(NSDictionary *)views;
format :VFL語句
opts :約束類型
metrics :VFL語句中用到的具體數值
views :VFL語句中用到的控件

創(chuàng)建一個字典(內部包含`VFL`語句中用到的控件)的快捷宏定義 這個宏可以生成和對象同名的key的字典
NSDictionaryOfVariableBindings(...)

Autolayout的常見應用

  • label的Autolayout

  • label只要有位置就可以

  • label設置寬度,然后高度會根據文字自適應

  • 有的時候在xib約束label的寬度,但是代碼中設置的文字又不足以填滿整個label,這個時候往往想文字有多寬label就有多寬,這個時候在設置label的寬度約束的時候不要設置等于某個值,而是設置小于等于某個值

  • 一個控件的高度、寬度可以設置多個約束,比如可以設置小于等于100,大于等于50這樣子

  • 一個控件的Y值可以參照上面的view1和view2兩個約束,為了避免沖突將距離view2的約束值的優(yōu)先級改為750,假如view1被從父控件中移除,那么控件的Y值將會參照view2的那個約束

  • 父控件的大小隨著子控件的內容的大小變化而變化

  • 在一個父控件的UIView設置除了高度以外的約束,然后添加子控件label,label設置除了高度以外的約束并且設置label的底部距離父控件的底部的距離是固定的,然后如果更改label的文字,那么label的高度會變化,父控件的高度也會變化

  • NSLayoutConstaints和VFL的使用

  • NSLayoutConstraints的使用 :NSLayoutConstraints 密碼:vg9y

  • VFL的使用:VFL 密碼:irrn

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容