AutoLayout隨筆

為什么使用AutoLayout:

由于市場上iPhone手機屏幕尺寸越來越多,為了對應一一不同的屏幕尺寸有更好的自動布局機制.

a 當需要展示的內(nèi)容很多并且尺寸不固定晰搀;

b 程序需支持屏幕旋轉(zhuǎn)(主要是iPad程序砚亭,iPhone程序橫屏的場景有點? ? ? ? ? ? 非主流);

c 程序通用于iPhone和iPad;

目前有3種方法可以使用:

(1)最基本的約束實現(xiàn)方式俩檬;

(2)特殊格式化語言的約束實現(xiàn)方式;

(3)第三方UIView-AutoLayout

以上內(nèi)容是參考別人博客,具體地址找不到了...

一 使用故事板的約束布局

今天學習了AutoLayout,首先是使用故事板畫圖來創(chuàng)建如下圖:


創(chuàng)建約束需要注意的地方:

1.按住control鍵連接到父視圖;

2. 如果有錯誤出現(xiàn)紅色的說明約束沒有完整或者不正確

3.如果設置一個視圖與另一個視圖等寬或者等高 ,其約束是在父視圖中

4.若設置一個視圖的寬度則往水平方向拉到該視圖的一端即可,高度便是往垂直方向拉.

5.在以上的button控件中,如果指定了button的寬和高,只需設置上,左約束 .如果再設置右,下便會使約束出錯.

6.注意每個視圖(控件)都需消除自動布局.

7.更新約束.

二 使用代碼創(chuàng)建約束

創(chuàng)建約束步驟:

1.創(chuàng)建視圖

2.消除視圖的自動布局

3.定義約束名

4.構(gòu)建映射

5.使用VFL創(chuàng)建約束

6.添加約束

具體實現(xiàn)如下:

- (void) createTreeView {

UIView *redView = [[UIView alloc] init];

//消除自帶的自動布局

redView.translatesAutoresizingMaskIntoConstraints = NO;

redView.backgroundColor = [UIColor redColor];

[self.view addSubview:redView];

//創(chuàng)建button

UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

//設置button標題

[button setTitle:@"點擊" forState:UIControlStateNormal];

[button setTintColor:[UIColor whiteColor]];

button.backgroundColor = [UIColor grayColor];

button.translatesAutoresizingMaskIntoConstraints = NO;

//添加button

[redView addSubview:button];

UIView *greenView = [[UIView alloc] init];

//消除自帶的自動布局

greenView.translatesAutoresizingMaskIntoConstraints = NO;

greenView.backgroundColor = [UIColor greenColor];

[self.view addSubview:greenView];

UIView *blueView = [[UIView alloc] init];

//消除自帶的自動布局

blueView.translatesAutoresizingMaskIntoConstraints = NO;

blueView.backgroundColor = [UIColor blueColor];

[self.view addSubview:blueView];

//約束

NSString *hVFL1 = @"H:|-space-[redView(==greenView)]-betweenSP-[greenView]-space-|";

NSString *hVFL2 = @"H:|-space-[blueView]-space-|";

NSString *leftVFL = @"V:|-space-[redView(==blueView)]-betweenSP-[blueView]-space-|";

NSString *rightVFL = @"V:|-space-[greenView(==blueView)]-betweenSP-[blueView]-space-|";

NSString *buttonHVFL = @"H:|-space-[button(==30)]";

NSString *buttonVVFL = @"V:|-space-[button(==30)]";

//構(gòu)建映射

NSDictionary *metrics = @{@"space":@20,@"betweenSP":@20};

NSDictionary *views = @{@"redView":redView,@"greenView":greenView,@"blueView":blueView,@"button":button};

//創(chuàng)建約束

NSArray *hConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL1

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

NSArray *hConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL2

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

NSArray *leftConstraints = [NSLayoutConstraint constraintsWithVisualFormat:leftVFL

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

NSArray *rightConstraints = [NSLayoutConstraint constraintsWithVisualFormat:rightVFL

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

NSArray *buttonConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:buttonHVFL

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

NSArray *buttonConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:buttonVVFL

options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:views];

//添加約束

[self.view addConstraints:hConstraints1];

[self.view addConstraints:hConstraints2];

[self.view addConstraints:leftConstraints];

[self.view addConstraints:rightConstraints];

[redView addConstraints:buttonConstraints1];

[redView addConstraints:buttonConstraints2];

}

運行效果:

三 視圖有簡單布局改變

當需要產(chǎn)生比較簡單的動畫或者動態(tài)布局發(fā)生變化時,就需要autolayout:

[self.view layoutIfNeeded];

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末放椰,一起剝皮案震驚了整個濱河市匈辱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌球涛,老刑警劉巖劣针,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異亿扁,居然都是意外死亡捺典,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門从祝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來襟己,“玉大人,你說我怎么就攤上這事哄褒∠◇” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵呐赡,是天一觀的道長退客。 經(jīng)常有香客問我,道長链嘀,這世上最難降的妖魔是什么萌狂? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮怀泊,結(jié)果婚禮上茫藏,老公的妹妹穿的比我還像新娘。我一直安慰自己霹琼,他們只是感情好务傲,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布凉当。 她就那樣靜靜地躺著,像睡著了一般售葡。 火紅的嫁衣襯著肌膚如雪看杭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天挟伙,我揣著相機與錄音楼雹,去河邊找鬼。 笑死尖阔,一個胖子當著我的面吹牛贮缅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播介却,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼谴供,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筷笨?” 一聲冷哼從身側(cè)響起憔鬼,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胃夏,沒想到半個月后轴或,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡仰禀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年照雁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片答恶。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡饺蚊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出悬嗓,到底是詐尸還是另有隱情污呼,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布包竹,位于F島的核電站燕酷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏周瞎。R本人自食惡果不足惜苗缩,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望声诸。 院中可真熱鬧酱讶,春花似錦、人聲如沸彼乌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至灶挟,卻和暖如春宫纬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背膏萧。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蝌衔,地道東北人榛泛。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像噩斟,于是被迫代替她去往敵國和親曹锨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

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