iOS頁(yè)面布局

iOS頁(yè)面布局及適配

一、固定布局frame(x, y, w, h)

UIEdgeInsets edge = UIEdgeInsetsMake(10, 10, 10, 10);
CGSize superSize = view.superview.frame.size;
CGFloat width = superSize.width - edge.left - edge.right;
CGFloat heitht = superSize.height - edge.top - edge.bottom;
view.frame = CGRectMake(edge.left, edge.top, width, heitht);

局限性:位置固定,不能隨父view大小的改變而改變

二、Autoresizing Mask

enum {
   UIViewAutoresizingNone                 = 0,
   UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
   UIViewAutoresizingFlexibleWidth        = 1 << 1,
   UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
   UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
   UIViewAutoresizingFlexibleHeight       = 1 << 4,
   UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin 自動(dòng)調(diào)整與superView左邊的距離,保證與左邊的距離和右邊的距離和原來(lái)距左邊和右邊的距離的比例不變。比如原來(lái)距離為20,30,調(diào)整后的距離應(yīng)為60,90,即60/20=90/30。
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight比較常用。

適用性:讓橫豎屏適配相對(duì)簡(jiǎn)單
讓子控件可以隨父控件的行為發(fā)生相應(yīng)的改變
局限性:只能解決子控件和父控件的相對(duì)關(guān)系問(wèn)題, 不能解決兄弟控件的相對(duì)關(guān)系問(wèn)題

三、AutoLayout
iOS6開(kāi)始引入AutoLayout,是一種基于約束的、描述性的布局系統(tǒng),主要功能是使用約束,對(duì)視圖進(jìn)行相對(duì)布局,以適應(yīng)不同屏幕尺寸的變換及屏幕的旋轉(zhuǎn)
iOS7時(shí),因?yàn)橹挥?.5英寸及4英寸兩種尺寸,寬度一樣,高度不同,比較好適配,所以AutoLayout并沒(méi)有普及。
iOS8時(shí),添加了4.7英寸,三種屏幕尺寸,必須考慮適配問(wèn)題。

[self addConstraints:@[ [NSLayoutConstraint constraintWithItem:self.cellScrollView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:10.0],
                 [NSLayoutConstraint constraintWithItem:self.cellScrollView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10.0],
                 [NSLayoutConstraint constraintWithItem:self.cellScrollView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0 constant:10.0],
                 [NSLayoutConstraint constraintWithItem:self.cellScrollView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10.0]];
view1.attr1 = view2.attr2 * multiplier + constant

對(duì)于兩個(gè)同層級(jí)view之間的約束關(guān)系,添加到他們的父view上
對(duì)于兩個(gè)不同層級(jí)view之間的約束關(guān)系,添加到他們最近的共同父view上
對(duì)于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系,添加到層次較高的父view上

容易出現(xiàn)的問(wèn)題:
添加約束之前,一定要保證相關(guān)控件都已經(jīng)在各自的父控件上, 否則crash
約束不夠(添加必要的約束條件或者調(diào)整優(yōu)先級(jí))
約束出現(xiàn)沖突(刪掉沖突的約束條件)

四、Masonry
Autolayout的方法太繁瑣,Masonry框架可以讓我們更輕松的為控件添加約束。

define MAS_SHORTHAND_GLOBALS使用全局宏定義,可以使equalTo等效于mas_equalTo

define MAS_SHORTHAND使用全局宏定義, 可以在調(diào)用masonry方法的時(shí)候不使用mas_前綴

1、Masonry使用方法

// 僅僅會(huì)添加新的約束
[myView mas_makeConstraints:^(MAConstraintMaker *make){
  // 在這個(gè)block里面, 利用make對(duì)象為控件添加約束
  make.size.mas_equalTo(CGSize(100, 100)); // 尺寸約束
  make.center.mas_equalTo(self.view); // 位置約束: 居中
}];

// 將以前所有的約束都刪掉, 重新添加約束
[myView mas_remakeConstraints:^(MAConstraintMaker *make){

}];

// 覆蓋以前的某些特定的約束
[myView mas_updateConstraints:^(MAConstraintMaker *make){

}];

2、約束的類(lèi)型
1.尺寸: width\height\size
2.邊界: left\leading\right\trailing\top\bottom\edges
3.中心點(diǎn): center\centerX\centerY\baseline
4.偏移量: offset\insets\sizeOffset\contentOffset

  1. priority()約束優(yōu)先級(jí)(0~1000),multipler乘因數(shù), dividedBy除因數(shù)

3、約束的關(guān)系
equalTo
lessThanOrEqualTo
greaterThanOrEqualTo
mas_equalTo:這個(gè)方法會(huì)對(duì)參數(shù)進(jìn)行封裝( 可以跟數(shù)據(jù)和對(duì)象 )
equalTo:這個(gè)方法不會(huì)對(duì)參數(shù)進(jìn)行封裝( 后面括號(hào)里面必須是對(duì)象 )

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(superview.mas_top).with.offset(padding.top);
        make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
        make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,119評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,382評(píng)論 3 415
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 176,038評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,853評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,616評(píng)論 6 408
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,112評(píng)論 1 323
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,192評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,355評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,869評(píng)論 1 334
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,727評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,928評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,467評(píng)論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,165評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,570評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,813評(píng)論 1 282
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,585評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,892評(píng)論 2 372

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