參考鏈接:
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).
3勾邦、Autoresizing簡介
<1>、Autoresizing的啟用
-
Xcode5之后割择,新建的項目默認使用AutoLayout眷篇。Autoresizing默認不啟用,我們可以去掉use Auto Layout荔泳,Use Size Classes前面的對勾來啟用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};
-
上下左右四條
紅色的線分別表示此視圖距離父視圖
的上下左右邊的約束各式多少惦界; -
中間兩條
上下交叉的線表示节槐,此視圖的高度
與寬度
是否隨著父視圖的變化而按比例變化顾画。
<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;