iOS開發-UI篇-AutoLayout

標籤：

1.概述:隨著iOS裝置的更新迭代,螢幕適配問題也變得愈發重要,應運而生了Autolayout。在Xcode4.1和OS X10.7之後才起效。

2.簡介:Apple提供了2種方式布局Autolayout,用xib來布局;另一種利用代碼進行布局,在Apple的sdk中提供了2個類庫:NSLayoutManager和NSLayoutConstraint。NSLayoutManager類主要是配合NSTextStorage,NSTextContainer實現NSCoding協議用來布局text視圖,而NSLayoutConstraint類則是布局整個視圖結構(著重介紹)。

3.原理:Autolayout的主要思想就是約束。在NSLayoutConstraint類中,有一個最重要的類方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

實現的公式是"view1.attr1 = view2.attr2 * multiplier + constant".建立2個視圖之間的約束聯絡(第二視圖可以為nil)。但是用這個方法的簡單明了,缺點就是太過繁瑣複雜.但是我們推薦使用VFL進行布局。

4.1內容:

1).當我們使用Autolayout時,我們要摒棄Xcode自動適應設定,將translatesAutoresizingMaskIntoConstraints＝NO;不然會造成視圖混亂。

2).遵從“高內聚”的原則,在UIView.h類中系統定義了- (void)updateConstraints;在UIViewController.h類中系統定義了- (void)updateViewConstraints;Overrides must call super or send -updateConstraints to the view=>即[super updateViewConstraints];

3).最基本的添加約束的方法:建立一個view對象,建立一個NSLayoutConstraint約束對象,constraintWithItem進行約束設定,view對象中添加約束。

4.2內容:

1).Autolayout還提供了VFL(Visual Format Language)來約束,+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

//format:傳入單獨每個view的約束語句;查詢xcode的api的Visual Format Syntax。

2).Autolayout步驟:建立一個view,並且添加到父視圖中去顯示－>［父視圖 addConstraints:(約束數組)］－>傳入參數，format具體約束語句,opts可置為nil,metrics傳入距離參數(用參數代替魔數),views傳入相應的視圖控制項,metrics和views是為format服務的。

3).例1:

- (void)updateViewConstraints{    [super updateViewConstraints];//override初始化        UIView *view1 = [[UIView alloc] init];    view1.translatesAutoresizingMaskIntoConstraints = NO;//取消自動布局    view1.backgroundColor = [UIColor blueColor];    [self.view addSubview:view1];        NSDictionary *views_Dic = @{@"view1":view1};//約束的控制項        NSString *hLayoutStr = @"H:|-(==100)-[view1(==100)]";//H:代表橫向,｜代表相對於父視圖,－代資料表條件約束距離,()裡面的所有表示約束距離,[]裡面表示約束的視圖對象,這句話表示:橫向從左至右,相對於父視圖距離100像素,view1的寬為100    NSString *vLayoutStr = @"V:|-(==100)-[view1(==50)]";//V:代表縱向,｜代表相對於父視圖,－代資料表條件約束距離,()裡面的所有表示約束距離,[]裡面表示約束的視圖對象,這句話表示:縱向從上到下,相對於父視圖距離100像素,view1的高為50        NSArray *hLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:hLayoutStr options:0 metrics:nil views:views_Dic];    NSArray *vLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:vLayoutStr options:0 metrics:nil views:views_Dic];    [self.view addConstraints:hLayoutArr];    [self.view addConstraints:vLayoutArr];}

例2:

- (void)updateViewConstraints{    [super updateViewConstraints];//override初始化        UIView *view1 = [[UIView alloc] init];    view1.translatesAutoresizingMaskIntoConstraints = NO;    view1.backgroundColor = [UIColor blueColor];    [self.view addSubview:view1];        UIView *view2 = [[UIView alloc] init];    view2.translatesAutoresizingMaskIntoConstraints = NO;    view2.backgroundColor = [UIColor greenColor];    [self.view addSubview:view2];        NSDictionary *views_Dic = @{@"view1":view1,@"view2":view2};    NSDictionary *views_metrics = @{@"Top":@50,@"Right":@20};        NSString *hLayoutStr = @"H:|-(==100)-[view1(==100)]-[view2(view1)]-Right-|";//表示:從父視圖的左邊開始,約束100像素,約束view1的寬為100像素,約束view2的寬與view1等寬,約束距離父視圖右邊的距離為20像素。    NSString *vLayoutStr = @"V:|-(100)-[view1(==100)]-[view2(==100)]";            NSArray *hLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:hLayoutStr options:0 metrics:views_metrics views:views_Dic];    NSArray *vLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:vLayoutStr options:0 metrics:views_metrics views:views_Dic];    [self.view addConstraints:hLayoutArr];//橫向約束    [self.view addConstraints:vLayoutArr];//縱向約束}

 

iOS開發-UI篇-AutoLayout