1.屏幕適配---主要是一個屏幕橫豎屏。
1.1 3gs與4主要用frame。bounds塘砸。center進行布局∥钭叮【frame掉蔬,bound 都是固定的】
-
1.2 ipad出現(xiàn),iphone橫屏
- 出現(xiàn)Autoresizing技術(shù)
- 讓子控件可以跟隨父控件的行為自動發(fā)生相應(yīng)的變化矾瘾。
- 關(guān)閉Autoloyout功能
- 出現(xiàn)Autoresizing技術(shù)
-
只設(shè)置寬和高的時候女轿,需要用到水平居中(水平方向上中間),與豎直居中壕翩。
-
下面通過面板設(shè)置谈喳。
- 如果用代碼添加控件用代碼來實現(xiàn)autoresing如下
-
UIView *blueView = [[UIView alloc] init];
blueView .backgroudColor = [UIColor blueColor];
CGFoat wh = 100;
CGFoat x = self.view.frame,size.width -wh;
CGFoat y = self.view.frame.size.heigh - wh;
blueView.frame = CGRectMake(x,y,100,100);
//左邊伸縮
blueView.outoresizingMask = UIViewAutoresizingFlexbleLeftMargin |UIViewAutoresizingFlexibleTopMargin |.............
//頂部伸縮
[self.view addSubviews:blueView]
- 只能解決父子關(guān)系,不能解決兄弟關(guān)系戈泼。子控件可以在父控件里拉伸婿禽,或者挨著父控件。
2.在Autoresizing之后出現(xiàn)了Autolayout(功能強大)---參照與約束
- 先打開use Auto Layout如下圖大猛,Alignment對齊的意思扭倾,Constraints約束的 意思
- 下圖就是要設(shè)置的約束(只能添約束不能改約束)
- 其中選擇等寬等高要按著cmd鍵挽绩,選擇兩個控件膛壹。然后下圖Equal.......
-
主要的警報
- 一般添加約束的思路是在腦海中勾畫控件與主控件的關(guān)系,然后就是控件的寬度與高度.
- 有一個比較控件比較特殊唠亚,就是UILable,約束的時候只需要約束top,left,以及weight链方。其中寬度可以小于某一個值,這樣就會text,很少也能被包裹灶搜。
- 兩個控件的在父控件中祟蚀,他們兩個之間的約束在父控件中工窍。
-約束的修改需要拿到控件然后用,
self.spacingContraint.constant = 50;
self.withContraint.constant = 100;
- 如果做動畫需要加上控件名字 layoutIFNeed前酿。(在動畫函數(shù)的參數(shù)的block中)患雏。換句話就是說控件調(diào)用 layoutIFNeed。
[UIView animateWithDuration:1 animations:^{
[self layoutIfNeeded];
} completion:^(BOOL finished) {
//repeat!
[self animateWithInvertedInsets:!invertedInsets];
}];
2.代碼實現(xiàn)autolayout罢维。
- 2.1 每個線代表一個約束對象淹仑。
- 2.2 新建約束對象用到的方法是
- 例如
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
// 不要將AutoresizingMask轉(zhuǎn)為Autolayout的約束
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];// 添加寬度約束:100
/************************** 藍色 **************************/
// 添加高度約束:40
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
[blueView addConstraint:heightConstraint];
// 添加左邊約束:blueView的左邊距離父控件左邊有20的間距
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftConstraint];
// 添加右邊約束:blueView的右邊距離父控件右邊有20的間距
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:rightConstraint];
// 添加頂部約束:blueView的頂部距離父控件頂部有20的間距
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
[self.view addConstraint:topConstraint];
/************************** 紅色 **************************/
// 添加高度約束:藍色等高
NSLayoutConstraint *heightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
[self.view addConstraint:heightConstraint2];
// 添加左邊約束:redView的左邊 == 父控件的中心x
NSLayoutConstraint *leftConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
[self.view addConstraint:leftConstraint2];
// 添加頂部約束:redView的頂部距離blueView的底部有20的間距
NSLayoutConstraint *topConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:topConstraint2];
// 添加右邊約束:redView的右邊 == blueView的右邊
NSLayoutConstraint *rightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
[self.view addConstraint:rightConstraint2];
}
-
核心計算公式
- 蘋果的vfl(舊的項目)
NSNumber *margin = @20;
// 添加水平方向的約束
NSString *vfl = @"H:|-margin-[blueView]-margin-|";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView);//傳進去一個對象生成一個字典。
NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertrics views:views];
[self.view addConstraints:constraints];
// 添加豎直方向的間距
NSNumber *height = @40;
NSString *vfl2 = @"V:|-margin-[blueView(height)]";
NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
[self.view addConstraints:constraints2];
- 兩個控件(兩種方法結(jié)合---VFL與outolayout結(jié)合)
NSNumber *margin = @20;
// 添加水平方向的約束
NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
[self.view addConstraints:constraints];
// 添加豎直方向的間距
NSNumber *height = @40;
NSString *vfl2 = @"V:[blueView(height)]-margin-|";
NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
[self.view addConstraints:constraints2];
//添加紅色剩余的約束
NSLayoutConstraint *redContraint1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
NSLayoutConstraint *redContraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
[self.view addConstraint:redContraint1];
[self.view addConstraint:redContraint2];