AutoLayout隨筆

為什么使用AutoLayout:

由于市場上iPhone手機屏幕尺寸越來越多,為了對應一一不同的屏幕尺寸有更好的自動布局機制.

a 當需要展示的內容很多并且尺寸不固定;

b 程序需支持屏幕旋轉(主要是iPad程序,iPhone程序橫屏的場景有點? ? ? ? ? ? 非主流);

c 程序通用于iPhone和iPad;

目前有3種方法可以使用:

(1)最基本的約束實現方式;

(2)特殊格式化語言的約束實現方式;

(3)第三方UIView-AutoLayout

以上內容是參考別人博客,具體地址找不到了...

一 使用故事板的約束布局

今天學習了AutoLayout,首先是使用故事板畫圖來創建如下圖:


創建約束需要注意的地方:

1.按住control鍵連接到父視圖;

2. 如果有錯誤出現紅色的說明約束沒有完整或者不正確

3.如果設置一個視圖與另一個視圖等寬或者等高 ,其約束是在父視圖中

4.若設置一個視圖的寬度則往水平方向拉到該視圖的一端即可,高度便是往垂直方向拉.

5.在以上的button控件中,如果指定了button的寬和高,只需設置上,左約束 .如果再設置右,下便會使約束出錯.

6.注意每個視圖(控件)都需消除自動布局.

7.更新約束.

二 使用代碼創建約束

創建約束步驟:

1.創建視圖

2.消除視圖的自動布局

3.定義約束名

4.構建映射

5.使用VFL創建約束

6.添加約束

具體實現如下:

- (void) createTreeView {

UIView *redView = [[UIView alloc] init];

//消除自帶的自動布局

redView.translatesAutoresizingMaskIntoConstraints = NO;

redView.backgroundColor = [UIColor redColor];

[self.view addSubview:redView];

//創建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)]";

//構建映射

NSDictionary *metrics = @{@"space":@20,@"betweenSP":@20};

NSDictionary *views = @{@"redView":redView,@"greenView":greenView,@"blueView":blueView,@"button":button};

//創建約束

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];

}

運行效果:

三 視圖有簡單布局改變

當需要產生比較簡單的動畫或者動態布局發生變化時,就需要autolayout:

[self.view layoutIfNeeded];

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容