iOS開發(fā)使用NSLayoutConstraint添加約束

參考鏈接:

http://www.reibang.com/p/2ca8ab057511
http://www.reibang.com/p/b637d3d21606
https://blog.cnbluebox.com/blog/2014/09/09/appkai-fa-zhe-xu-yao-wei-iphone6zuo-chu-gai-bian/
http://www.reibang.com/p/a4812b01a2a3
http://blog.lessfun.com/blog/2014/10/17/ios-autolayout-vs-autosizing/
http://zhuhaibobb.blog.163.com/blog/static/2744006720143712913273/
http://www.cnblogs.com/cxbblog/p/4166876.html

一捐晶、屏幕適配的發(fā)展史及簡介

1菲语、屏幕適配發(fā)展的路線:

1.純代碼計算frame(最早是通過計算frame實現布局)
2.autoresizing(僅適用于約束父子控件之間的關系)
3.AutoLayout(iOS6/2012年、iPhone5被引入租悄,比autoresizing更加高級谨究,旨在替代autoresizing恩袱,可以設置任何控件之間的關系)
4.sizeClass(iOS8出現泣棋,用于解決越來越多的屏幕尺寸的適配問題)。

2畔塔、為什么總是在變換屏幕布局的方式潭辈?

 在iPhone3gs時代鸯屿,手機的屏幕尺寸有且只有一種,也就是3.5英寸把敢。開發(fā)app的時候寄摆,根本不用考慮同一個視圖在不同尺寸的屏幕上顯示的問題。iOS開發(fā)者完全可以**用純代碼的方式**把一個控件的frame寫死修赞。而后來隨著蘋果公司的不斷推出新機型婶恼,隨著屏幕的尺寸變大和布局時候的復雜程度越來越大,在使用寫死frame的方法是滿足不了需求的柏副,所以最后蘋果公司為了開發(fā)者能夠更好的工作就逐漸推出了autoresizing,AutoLayout(iOS 6.0),sizeClass(iOS).
iPhone屏幕尺寸

3勾邦、Autoresizing簡介

<1>、Autoresizing的啟用
  • Xcode5之后割择,新建的項目默認使用AutoLayout眷篇。Autoresizing默認不啟用,我們可以去掉use Auto Layout荔泳,Use Size Classes前面的對勾來啟用Autoresizing蕉饼,如下圖:


    去掉圖中的對勾
Autoresizing
<2>、Autosizing的特性
當UIView的autoresizesSubviews是YES時(默認是YES), 那么在其中的子view會根據它自身的autoresizingMask屬性來自動適應其與superView之間的位置和大小玛歌。
通俗易懂的話語來講就是:當父視圖被拉伸的時候昧港,子視圖能夠適配父視圖的新大小。其原理是沾鳄,子視圖有一個masks慨飘,用于指定與父視圖上下左右邊緣的距離,以及自身寬高的關系译荞。比如瓤的,指定子視圖的右邊緣緊跟著父視圖的右邊緣,那么父視圖變大之后吞歼,子視圖還是貼在父視圖的右邊圈膏。這在大部分簡單布局情況下非常有效冠场。
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) { UIViewAutoresizingNone = 0, UIViewAutoresizingFlexibleLeftMargin = 1 << 0, UIViewAutoresizingFlexibleWidth = 1 << 1, UIViewAutoresizingFlexibleRightMargin = 1 << 2, UIViewAutoresizingFlexibleTopMargin = 1 << 3, UIViewAutoresizingFlexibleHeight = 1 << 4, UIViewAutoresizingFlexibleBottomMargin = 1 << 5};
Autoresizing在xib與故事版上的體現
分析圖
  • 上下左右四條紅色的線分別表示此視圖距離父視圖的上下左右邊的約束各式多少惦界;
  • 中間兩條上下交叉的線表示节槐,此視圖的高度寬度是否隨著父視圖的變化而按比例變化顾画。
<3>翰绊、Autosizing的局限性

Autoresizing的局限性就是只能表現父與子的關系
而無法表達兄弟視圖之間的關系.

4禁熏、Autolayout

<1>徐伐、簡介

??????Autolayout是一種布局技術锣吼,專門用來布局UI界面的得湘,它其實是相當于Autosizing的增強版本杖玲,Autolayout的出現給開發(fā)中復雜界面的布局帶來了很大的方便。

<2>淘正、代碼創(chuàng)建

可視化添加約束及介紹請參考以下鏈接:
http://www.reibang.com/p/a4812b01a2a3
??????這里主要介紹純代碼的使用方法和簡介摆马。
(1)臼闻、AutoLayout有三種設置方式
1.視圖的大小(即視圖的絕對大卸诓伞)述呐。
2.視圖的位置(視圖相對于父視圖或者兄弟視圖的位置)。
3.視圖的對齊方式(相對于父視圖或者相對于兄弟視圖)蕉毯。

方法一:

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

**參數說明:** 第一個參數:指定約束左邊的視圖view1 第二個參數:指定view1的屬性attr1 第三個參數:指定左右兩邊的視圖的關系relation 第四個參數:指定約束右邊的視圖view2 第五個參數:指定view2的屬性attr2 第六個參數:指定一個與view2屬性相乘的乘數multiplier 第七個參數:指定一個與view2屬性相加的浮點數constant
這個函數的對照公式為:
view1.attr1 <relation> view2.attr2 * multiplier + constant
注意:
1.如果你想設置的約束里不需要第二個view乓搬,要將第四個參數設為nil,第五個參數設為NSLayoutAttributeNotAnAttribute

附視圖的屬性和關系的值:
typedef
NS_ENUM(NSInteger, NSLayoutRelation) {
NSLayoutRelationLessThanOrEqual = -1,
//小于等于
NSLayoutRelationEqual = 0,
//等于
NSLayoutRelationGreaterThanOrEqual = 1,
//大于等于
};

typedef
NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1,
//左側
NSLayoutAttributeRight,
//右側
NSLayoutAttributeTop,
//上方
NSLayoutAttributeBottom,
//下方
NSLayoutAttributeLeading,
//首部
NSLayoutAttributeTrailing,
//尾部
NSLayoutAttributeWidth,
//寬度
NSLayoutAttributeHeight,
//高度
NSLayoutAttributeCenterX,
//X軸中心
NSLayoutAttributeCenterY,
//Y軸中心
NSLayoutAttributeBaseline,
//文本底標線
NSLayoutAttributeNotAnAttribute = 0
//沒有屬性
NSLayoutAttributeLeft
/NSLayoutAttributeRight
和NSLayoutAttributeLeading
/NSLayoutAttributeTrailing
的區(qū)別是left/right永遠是指左右代虾,而leading/trailing在某些從右至左習慣的地區(qū)會變成缤谎,leading是右邊,trailing是左邊褐着。
注意:為了避免Autosizing與Autolayout沖突坷澡,在使Autolayout的時候必須將用TranslatesAutoresizingMaskIntoConstraints這個屬性設置為NO。

方法二:

  • (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:
    (nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
參數列表
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末含蓉,一起剝皮案震驚了整個濱河市频敛,隨后出現的幾起案子,更是在濱河造成了極大的恐慌馅扣,老刑警劉巖斟赚,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異差油,居然都是意外死亡拗军,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門蓄喇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來发侵,“玉大人,你說我怎么就攤上這事妆偏∪婿” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵钱骂,是天一觀的道長叔锐。 經常有香客問我,道長见秽,這世上最難降的妖魔是什么愉烙? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮解取,結果婚禮上步责,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好勺择,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伦忠,像睡著了一般省核。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昆码,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天气忠,我揣著相機與錄音,去河邊找鬼赋咽。 笑死旧噪,一個胖子當著我的面吹牛,可吹牛的內容都是我干的脓匿。 我是一名探鬼主播淘钟,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼陪毡!你這毒婦竟也來了米母?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤毡琉,失蹤者是張志新(化名)和其女友劉穎铁瞒,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體桅滋,經...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡慧耍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了丐谋。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芍碧。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖号俐,靈堂內的尸體忽然破棺而出师枣,到底是詐尸還是另有隱情,我是刑警寧澤萧落,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布践美,位于F島的核電站,受9級特大地震影響找岖,放射性物質發(fā)生泄漏陨倡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一许布、第九天 我趴在偏房一處隱蔽的房頂上張望兴革。 院中可真熱鬧,春花似錦、人聲如沸杂曲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽擎勘。三九已至咱揍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棚饵,已是汗流浹背煤裙。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留噪漾,地道東北人硼砰。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像欣硼,于是被迫代替她去往敵國和親题翰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內容