自動佈局Autoresizing autolayout VFL

屏幕適配發展歷程:

代碼計算 frame->autoresizing(父子控件之間的關係)->autolayout(任何控件都能產生關係)-> sizeclass(對屏幕適配進行分類,真正佈局還是 autolayout)

一、autoresizing:

1.兩個屬性:autoresizingMask,autoresizesSubviews
autoresizingMask的枚舉值:

iewAutoresizingNone                 = 0,            // 不會隨着父視圖改變
UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,    // 調整左邊,保證右邊
UIViewAutoresizingFlexibleWidth        = 1 << 1,    // 調整寬度,保證左右
UIViewAutoresizingFlexibleRightMargin  = 1 << 2,    // 調整右邊,保證左邊
UIViewAutoresizingFlexibleTopMargin    = 1 << 3,    // 調整頂部,保證底部
UIViewAutoresizingFlexibleHeight       = 1 << 4,    // 調整高度,保證上下
UIViewAutoresizingFlexibleBottomMargin = 1 << 5     // 調整底部,保證底部

二、autolayout:
核心概念:約束 參照
autolayout 和 frame 一樣必須設置 xywh
思路:

1> 創建控件並取消 autoresizing功能
blueView.translateAutoresizingMaskIntoConstraints = NO;
2> 創建約束
NSLayoutConstraint *blueLeftCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
3> 添加約束
約束一定要添加到父 View 上
[self.view addConstraint:blueLeftCon];

自動佈局核心公式:

blueView.NSLayoutAttributeLeft = self.view.NSLayoutAttributeLeft * 1.0 + 30;

三、VFL 語言
H:水平 V:豎直 |邊界 -距離 [控件(控件寬/高)] [控件A(==控件B)]

思路:

1> 創建控件並取消 autoresizing功能
blueView.translateAutoresizingMaskIntoConstraints = NO;

2> 創建約束 VFL
// 水平:blueView 距離父 view 左邊界30,距離父 view 的右邊界
NSString *hVFL = @"H:|-30-[blueView]-30-|";
NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:0 metrics:nil views:@{@"blueView" : blueView}];


//@"V:|-30-[blueView(50)]-30-[redView(==blueView)]

3> 添加約束
self.view addConstraints:hCons];

注意:VFL 是不能進行算術運算的,有的話只能用 autolayout創建約束。

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format:VFL 語句
opts:約束類型
metrics:VFL語句中用到的具體數值
views:VFL語句中用到的控件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章