Autoresizing / Autolayout / VFI / Masonry / sizeClasses

如何適配?

  • 不同版本適配
  • 不同屏幕尺寸適配,不同屏幕方向(橫豎屏)

點與像素

  • 1抓艳、用戶:屏幕是由無數(shù)個像素組成的,開發(fā)者:屏幕是由無數(shù)個點組成的帚戳,點又是由像素組成的
  • 2玷或、非retina與retina屏
    • 非retina屏幕(3GS) : 1個點由1個像素組成
    • retina屏幕:1個點由2 x 2個像素組成

設(shè)備分辨率

fbl.png

自動布局的多種方式

1、Autoresizing

  • 都是約束父子關(guān)系, 所以Autoresizing只能約束父子控件之間的關(guān)系, 不能約束兄弟控件之間的關(guān)系

  • 方式一:storyboard實現(xiàn)

    • 注意: Storyboard中勾選上左邊, 就代表當前控件和父控件的左邊的距離是固定的


      Snip20151026_14.png
  • 方式二:純代碼實現(xiàn)

    • 注意1:代碼中的上下左右和Storyboard中的是相反的
      • Storyboard中勾選上左邊, -> 當前控件和父控件的左邊的距離是固定的
      • 代碼中如果寫上FlexibleLeftMargin片任,->當前控件和父控件的左邊是可拉伸的
  • 規(guī)律

     UIViewAutoresizingFlexibleLeftMargin // 左邊可以伸縮
     UIViewAutoresizingFlexibleRightMargin // 右邊可以伸縮
     UIViewAutoresizingFlexibleTopMargin // 頂部可以伸縮
     UIViewAutoresizingFlexibleBottomMargin // 底部可以伸縮
     
     // 以下兩個和Storyboard中的是一樣的
     UIViewAutoresizingFlexibleWidth // 寬度可以伸縮
     UIViewAutoresizingFlexibleHeight // 高度可以伸縮
  • 代碼實現(xiàn)偏友,紅色View隨著其父控件的寬度與高度拉伸而拉伸
    • 效果:


      Snip20151026_15.png
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1.創(chuàng)建父控件
    UIView *greenView = [[UIView alloc] init];
    greenView.frame = CGRectMake(0, 0, 200, 200);
    greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenView];
    self.greenView = greenView;
    
    // 2.創(chuàng)建子控件
    UIView *redView = [[UIView alloc] init];
    redView.frame = CGRectMake(0, 0, 100, 100);
    redView.backgroundColor = [UIColor redColor];
    [greenView addSubview:redView];
    
    // 3.設(shè)置子控件的autoresizing
   
    // 紅色子控件,隨著父控件对供,寬度與高度可拉伸
    redView.autoresizingMask = UIViewAutoresizingFlexibleWidth |
                               UIViewAutoresizingFlexibleHeight;
}

- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
{
    self.greenView.frame =  CGRectMake(0, 0, 300, 300);   
}
  • 點擊視圖位他,讓父控件寬高增大,子控件也隨父控件拉伸了


    Snip20151026_17.png

Autolayout 自動布局

1产场、Autolayout 代碼實現(xiàn)

  • 在創(chuàng)建約束之后鹅髓,需要將其添加到作用的view上
  • 約束規(guī)則
    • 對于兩個同層級view之間的約束關(guān)系,添加到它們的父view上


      1.png
    • 對于兩個不同層級view之間的約束關(guān)系京景,添加到他們最近的共同父view上


      2.png
  • 對于有層次關(guān)系的兩個view之間的約束關(guān)系窿冯,添加到層次較高的父view上


    3.png
  • 一個NSLayoutConstraint對象就代表一個約束
  • 創(chuàng)建約束對象的常用方法
+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1relatedBy:(NSLayoutRelation)relationtoItem:(id)view2attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplierconstant:(CGFloat)c;
  • 自動布局的核心計算公式
obj1.property1=(obj2.property2* multiplier)+constantvalue
需求:設(shè)置一個redView寬高100,現(xiàn)實在屏幕中間

+代碼實現(xiàn)Autolayout的注意點

  • 1确徙、如果通過代碼來設(shè)置Autolayout約束, 那么必須先禁用Autoresizing
```objc

redView.translatesAutoresizingMaskIntoConstraints = NO;

   - 2醒串、通過代碼添加Autolayout約束, 添加約束之前必須保證控件已經(jīng)在父控件上了
   - 3、不用再給view設(shè)置frame

+ 創(chuàng)建約束 方法分析: [NSLayoutConstraint constraintWithItem: .......]

```objc
   /*
     Item == first item
     attribute == first item需要設(shè)置的約束類型
     relatedBy == Relatio(等于)
     toItem ==  Second item
     attribute == Second item的約束類型
     multiplier == 乘以
     constant == 加上多少
     */
// redView 的 centerX = self.view的centerX * 1.0 + 0.0
NSLayoutConstraint *xCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
  • 代碼實現(xiàn)
 // 1.創(chuàng)建控件
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

2鄙皇、基于Autolayout的動畫

  • 注意: 強制更新界面:會更新當前控件和當前控件所有的子控件
 [添加了約束的view layoutIfNeeded];
  • 代碼實現(xiàn):動畫
#import "ViewController.h"
@interface ViewController ()
// 約束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topCos;
@property (weak, nonatomic) IBOutlet UIView *redView;
@end

@implementation ViewController

- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
{
    self.topCos.constant += 150;
    [UIView animateWithDuration:2.0 animations:^{
        // 強制更新界面
        // 會更新當前控件和當前控件所有的子控件
        [self.redView layoutIfNeeded];
    }];
}
@end

VFL添加約束

  • Visual Format Language芜赌,“可視化格式語言”,VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言

  • VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)]
pcanelButton寬72伴逸,acceptButton寬50缠沈,它們之間間距12

H:[wideView(>=60@700)]
pwideView寬度大于等于60point,該約束條件優(yōu)先級為700(優(yōu)先級最大值為1000错蝴,優(yōu)先級越高的約束越先被滿足)

V:[redBox][yellowBox(==redBox)]
豎直方向上洲愤,先有一個redBox,其下方緊接一個高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上漱竖,F(xiàn)ind距離父view左邊緣默認間隔寬度禽篱,之后是FindNext距離Find間隔默認寬度;再之后是寬度不小于20的FindField馍惹,它和FindNext以及父view右邊緣的間距都是默認寬度躺率。(豎線“|”表示superview的邊緣)
  • VFL的使用
    • 使用VFL來創(chuàng)建約束數(shù)組
pformat:VFL語句
popts:約束類型
pmetrics:VFL語句中用到的具體數(shù)值
pviews:VFL語句中用到的控件
+(NSArray*)constraintsWithVisualFormat:(NSString*)format options:(NSLayoutFormatOptions)optsmetrics:(NSDictionary*)metrics views:(NSDictionary*)views;
  • 創(chuàng)建一個字典(內(nèi)部包含VFL語句中用到的控件)的快捷宏定義
NSDictionaryOfVariableBindings(...)
Snip20151026_18.png

Masonry 第三方框架

  • 注意: 在Storyboard中約束是可以重復(fù)添加的, 通過Masonry添加約束也是可以重復(fù)的, 要注意重復(fù)添加導(dǎo)致的錯誤和沖突
  • 添加玛界、更新、移除約束
    • 添加約束 makeConstraints:
      • 每次都會添加新的約束, 也就是會導(dǎo)致重復(fù)添加

[self.blueVeiw makeConstraints:^(MASConstraintMaker *make) {
// make.height.equalTo(100);
// }];

+ 更新約束  updateConstraints  
  - 特點: 如果沒有設(shè)置過, 就添加一個新的悼吱,如果已經(jīng)設(shè)置過了, 就更新以前設(shè)置的那一個
```objc
[self.blueVeiw updateConstraints:^(MASConstraintMaker *make) {
     make.height.equalTo(100);
 }];
  • 清空約束 remakeConstraints
[self.blueVeiw remakeConstraints:^(MASConstraintMaker *make) {
        
    }];
  • 1慎框、添加簡化宏定義
#import "ViewController.h"

//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND 
// 只要添加這個宏, 就可以去掉Masonry框架中對象訪問對象屬性前面的mas_屬性, 和方法前的mas_前綴

// 例如添加前的寫法
/*
 make.left.equalTo(self.view.mas_left).with.offset(20);
 */
// 例如添加后的寫法
/*
 make.left.equalTo(self.view.left).with.offset(20);
 */

//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
// 只要添加上這個宏, 給equalTo傳遞參數(shù)的時候, 就可以直接傳遞基本數(shù)據(jù)類型 ,系統(tǒng)會自動包裝
// 如果沒有添加上面這個宏, 那么給equalTo傳遞參數(shù)的時候, 必須傳遞對象
// 如果要傳遞基本數(shù)據(jù)類型必須使用mas_equalTo
// 只需要在導(dǎo)入Masonry.h之前, 添加上面的兩個宏, 就可以簡化代碼
#import "Masonry.h"
  • 2、實現(xiàn)紅色view是藍色寬度一半后添。笨枯。。遇西。


    Snip20151026_19.png
 // 1.創(chuàng)建兩個View, 并且添加到父控件
    UIView *blueVeiw = [[UIView alloc] init];
    blueVeiw.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueVeiw];
    self.blueVeiw = blueVeiw;
    
    UIView *redVeiw = [[UIView alloc] init];
    redVeiw.backgroundColor = [UIColor redColor];
    [self.view addSubview:redVeiw];
    
    // 2.禁止紅色View的Autgoresizing
    blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
    redVeiw.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 3.添加藍色的約束
    [blueVeiw makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.left).offset(20);
        make.right.equalTo(self.view.right).offset(-20);
        make.top.equalTo(self.view.top).offset(20);
        make.height.equalTo(50);
    }];
    
    // 4.添加紅色的約束
    [redVeiw makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(blueVeiw.bottom).offset(20);
        make.height.equalTo(blueVeiw.height);
        make.right.equalTo(blueVeiw.right);
        make.width.equalTo(blueVeiw.width).multipliedBy(0.5);
    }];

sizeClasses

sizeclasses的組成: Compact/Regular/Any
     
     圖片中的設(shè)置: height = Any & compact
     代表寬度是任意的, 高度是緊湊的
     *==Any
     - ==Compact
     + ==Regular
     前面的是寬度, 后面的是高度
     
     Any: 任意的
     compact: 緊湊的
     Regular:正常的
Snip20151026_20.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末馅精,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子粱檀,更是在濱河造成了極大的恐慌洲敢,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茄蚯,死亡現(xiàn)場離奇詭異压彭,居然都是意外死亡,警方通過查閱死者的電腦和手機渗常,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門壮不,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人皱碘,你說我怎么就攤上這事询一。” “怎么了尸执?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵家凯,是天一觀的道長缓醋。 經(jīng)常有香客問我如失,道長,這世上最難降的妖魔是什么送粱? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任褪贵,我火速辦了婚禮,結(jié)果婚禮上抗俄,老公的妹妹穿的比我還像新娘脆丁。我一直安慰自己,他們只是感情好动雹,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布槽卫。 她就那樣靜靜地躺著,像睡著了一般胰蝠。 火紅的嫁衣襯著肌膚如雪歼培。 梳的紋絲不亂的頭發(fā)上震蒋,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音躲庄,去河邊找鬼查剖。 笑死,一個胖子當著我的面吹牛噪窘,可吹牛的內(nèi)容都是我干的笋庄。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼倔监,長吁一口氣:“原來是場噩夢啊……” “哼直砂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起浩习,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤哆键,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瘦锹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體籍嘹,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年弯院,在試婚紗的時候發(fā)現(xiàn)自己被綠了辱士。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡听绳,死狀恐怖颂碘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情椅挣,我是刑警寧澤头岔,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站鼠证,受9級特大地震影響峡竣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜量九,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一适掰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧荠列,春花似錦类浪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至川队,卻和暖如春力细,著一層夾襖步出監(jiān)牢的瞬間垦搬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工艳汽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留猴贰,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓河狐,卻偏偏與公主長得像米绕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子馋艺,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容