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];//縱向約束}
例3:
- (void)viewDidLoad {UIView *view_nav = [[UIView alloc] init];view_nav.translatesAutoresizingMaskIntoConstraints = NO;view_nav.backgroundColor = [UIColorFactory colorNav];[self.view addSubview:view_nav];self.mUAccounts_table = [[UITableView alloc] init];self.mUAccounts_table.delegate = self;self.mUAccounts_table.dataSource = self;self.mUAccounts_table.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:self.mUAccounts_table];//AutoLayout進行約束NSDictionary *views_dic = @{@"view_nav":view_nav,@"mUAccounts_table":self.mUAccounts_table};NSDictionary *metrics_dic = @{@"Top":@0,@"Bottom":@0,@"Left":@0,@"Right":@0, @"ScreenWidth":@((float)ScreenWidth), @"tabBar_height":@(self.tabBarController.tabBar.frame.size.height), @"Table_height":@((float)ScreenHeight-64-49)};//當等寬或者等高時,將相同方向的兩個視圖拆分成同個方向的2個約束[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-Left-[view_nav(ScreenWidth)]" options:NSLayoutFormatAlignAllLeft metrics:metrics_dic views:views_dic]];[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-Top-[view_nav(64)]-[mUAccounts_table(Table_height)]" options:0 metrics:metrics_dic views:views_dic]];[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[mUAccounts_table(ScreenWidth)]" options:0 metrics:metrics_dic views:views_dic]];}
5.1注意:
1).有可能出現-(void)updateViewConstraints;不自動調用的情況,可以直接在viewDidLoad中添加[self updateViewConstraints];進行調用。
2).VFL的結構1:－距離－對象(尺寸)－距離,不能出現-距離-距離的情況。
3).當出現Unable to simultaneously satisfy constraints時意味著約束之間有沖突,不能滿足所有約束。
4).限定一個視圖的約束一般通過與其他視圖的位置和自身寬高總共4個約束,或者全部與其他視圖約束,自身不做寬高約束。(4個約束靈活形成一個適配的視圖)
5).約束對象注意,父視圖添加約束,自身寬高約束則是自身當做父視圖來約束。
6).當出現等寬和等高的情況時,可將同一個方向的兩個視圖約束拆分成同個方向的2個約束。
新聞熱點
疑難解答
