屏幕適配(控件相對位置不變)

1.屏幕適配---主要是一個屏幕橫豎屏。

Snip20160429_2.png
  • 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功能
  • 只設(shè)置寬和高的時候女轿,需要用到水平居中(水平方向上中間),與豎直居中壕翩。


    Snip20160429_4.png
    • 下面通過面板設(shè)置谈喳。


      Snip20160429_3.png
    • 如果用代碼添加控件用代碼來實現(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約束的 意思
Snip20160429_6.png
  • 下圖就是要設(shè)置的約束(只能添約束不能改約束)
  • 其中選擇等寬等高要按著cmd鍵挽绩,選擇兩個控件膛壹。然后下圖Equal.......
Snip20160429_9.png
  • 主要的警報


    Snip20160429_7.png
  • 一般添加約束的思路是在腦海中勾畫控件與主控件的關(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 新建約束對象用到的方法是
Snip20160504_1.png
  • 例如

    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];
}
  • 核心計算公式


    Paste_Image.png
  • 蘋果的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];
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肺孵,一起剝皮案震驚了整個濱河市攻人,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌悬槽,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瞬浓,死亡現(xiàn)場離奇詭異初婆,居然都是意外死亡,警方通過查閱死者的電腦和手機猿棉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門磅叛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人萨赁,你說我怎么就攤上這事弊琴。” “怎么了杖爽?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵敲董,是天一觀的道長。 經(jīng)常有香客問我慰安,道長腋寨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任化焕,我火速辦了婚禮萄窜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘撒桨。我一直安慰自己查刻,他們只是感情好,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布凤类。 她就那樣靜靜地躺著穗泵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谜疤。 梳的紋絲不亂的頭發(fā)上火欧,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天棋电,我揣著相機與錄音,去河邊找鬼苇侵。 笑死赶盔,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的榆浓。 我是一名探鬼主播于未,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼陡鹃!你這毒婦竟也來了烘浦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤萍鲸,失蹤者是張志新(化名)和其女友劉穎闷叉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體脊阴,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡握侧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嘿期。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片品擎。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖备徐,靈堂內(nèi)的尸體忽然破棺而出萄传,到底是詐尸還是另有隱情,我是刑警寧澤蜜猾,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布秀菱,位于F島的核電站,受9級特大地震影響蹭睡,放射性物質(zhì)發(fā)生泄漏答朋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一棠笑、第九天 我趴在偏房一處隱蔽的房頂上張望梦碗。 院中可真熱鬧,春花似錦蓖救、人聲如沸洪规。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽斩例。三九已至,卻和暖如春从橘,著一層夾襖步出監(jiān)牢的瞬間念赶,已是汗流浹背础钠。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叉谜,地道東北人旗吁。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像停局,于是被迫代替她去往敵國和親很钓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

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

  • 前言 iPhone自誕生以來袁稽,隨著其屏幕尺寸不斷的多樣化,屏幕適配的技術(shù)一直在發(fā)展更新擒抛。目前推汽,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,363評論 24 170
  • 屏幕適配 本章節(jié)主要還是說明如何讓應(yīng)用程序能夠適配在蘋果不同的屏幕和如何讓應(yīng)用中的內(nèi)容在不同的屏幕下能夠正常的放置...
    AlanGe閱讀 697評論 0 2
  • 一、屏幕適配-autoresizing簡單使用 1闻葵、為什么要屏幕適配? > iphone手機屏幕尺寸呈現(xiàn)多樣化癣丧。 ...
    方圓十里不留母狗閱讀 519評論 0 0
  • 1.尺寸適配1.原因 iOS7中所有導航欄都為半透明槽畔,導航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,099評論 1 4
  • 1 內(nèi)部類:在類中定義的類,成為內(nèi)部類.一個類的存在依賴于另一個類胁编,如果這個類獨立存在沒有存在的價值厢钧,所以可以把他...
    孫睿888閱讀 273評論 0 0