為什么使用AutoLayout:
由于市場上iPhone手機屏幕尺寸越來越多,為了對應一一不同的屏幕尺寸有更好的自動布局機制.
a 當需要展示的內(nèi)容很多并且尺寸不固定晰搀;
b 程序需支持屏幕旋轉(zhuǎn)(主要是iPad程序砚亭,iPhone程序橫屏的場景有點? ? ? ? ? ? 非主流);
c 程序通用于iPhone和iPad;
目前有3種方法可以使用:
(1)最基本的約束實現(xiàn)方式俩檬;
(2)特殊格式化語言的約束實現(xiàn)方式;
(3)第三方UIView-AutoLayout
以上內(nèi)容是參考別人博客,具體地址找不到了...
一 使用故事板的約束布局
今天學習了AutoLayout,首先是使用故事板畫圖來創(chuàng)建如下圖:
創(chuàng)建約束需要注意的地方:
1.按住control鍵連接到父視圖;
2. 如果有錯誤出現(xiàn)紅色的說明約束沒有完整或者不正確
3.如果設置一個視圖與另一個視圖等寬或者等高 ,其約束是在父視圖中
4.若設置一個視圖的寬度則往水平方向拉到該視圖的一端即可,高度便是往垂直方向拉.
5.在以上的button控件中,如果指定了button的寬和高,只需設置上,左約束 .如果再設置右,下便會使約束出錯.
6.注意每個視圖(控件)都需消除自動布局.
7.更新約束.
二 使用代碼創(chuàng)建約束
創(chuàng)建約束步驟:
1.創(chuàng)建視圖
2.消除視圖的自動布局
3.定義約束名
4.構(gòu)建映射
5.使用VFL創(chuàng)建約束
6.添加約束
具體實現(xiàn)如下:
- (void) createTreeView {
UIView *redView = [[UIView alloc] init];
//消除自帶的自動布局
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
//創(chuàng)建button
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
//設置button標題
[button setTitle:@"點擊" forState:UIControlStateNormal];
[button setTintColor:[UIColor whiteColor]];
button.backgroundColor = [UIColor grayColor];
button.translatesAutoresizingMaskIntoConstraints = NO;
//添加button
[redView addSubview:button];
UIView *greenView = [[UIView alloc] init];
//消除自帶的自動布局
greenView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
UIView *blueView = [[UIView alloc] init];
//消除自帶的自動布局
blueView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
//約束
NSString *hVFL1 = @"H:|-space-[redView(==greenView)]-betweenSP-[greenView]-space-|";
NSString *hVFL2 = @"H:|-space-[blueView]-space-|";
NSString *leftVFL = @"V:|-space-[redView(==blueView)]-betweenSP-[blueView]-space-|";
NSString *rightVFL = @"V:|-space-[greenView(==blueView)]-betweenSP-[blueView]-space-|";
NSString *buttonHVFL = @"H:|-space-[button(==30)]";
NSString *buttonVVFL = @"V:|-space-[button(==30)]";
//構(gòu)建映射
NSDictionary *metrics = @{@"space":@20,@"betweenSP":@20};
NSDictionary *views = @{@"redView":redView,@"greenView":greenView,@"blueView":blueView,@"button":button};
//創(chuàng)建約束
NSArray *hConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL1
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
NSArray *hConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL2
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
NSArray *leftConstraints = [NSLayoutConstraint constraintsWithVisualFormat:leftVFL
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
NSArray *rightConstraints = [NSLayoutConstraint constraintsWithVisualFormat:rightVFL
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
NSArray *buttonConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:buttonHVFL
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
NSArray *buttonConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:buttonVVFL
options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];
//添加約束
[self.view addConstraints:hConstraints1];
[self.view addConstraints:hConstraints2];
[self.view addConstraints:leftConstraints];
[self.view addConstraints:rightConstraints];
[redView addConstraints:buttonConstraints1];
[redView addConstraints:buttonConstraints2];
}
運行效果:
三 視圖有簡單布局改變
當需要產(chǎn)生比較簡單的動畫或者動態(tài)布局發(fā)生變化時,就需要autolayout:
[self.view layoutIfNeeded];