AutoLayout介紹
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,郊區(qū)企業(yè)網(wǎng)站建設,郊區(qū)品牌網(wǎng)站建設,網(wǎng)站定制,郊區(qū)網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,郊區(qū)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
AutoLayout的功能要比AutoResizing強大的多。
當對一個UIView對象使用了AutoLayout布局后,意味著放棄了通過對象的frame進行修改視圖的位置、尺寸。
AutoLayout使約束條件,通過自動布局引擎,計算view對象的frame。
可以認為在AutoLayout中view對象的frame是一個只讀的屬性。
約束的核心公式:
view1.attr1 = (view2.attr2 * multiplier) + constraint
其中obj2可以是nil
除了=關系外,還可以是>= <=的關系
代碼適配
添加約束的步驟:
1)禁止被適配view的AutoResizing功能
- (BOOL)translatesAutoresizingMaskIntoConstraints - (void)setTranslatesAutoresizingMaskIntoConstraints:(BOOL)flag
2)創(chuàng)建約束對象NSLayoutConstraint
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c
參數(shù)即約束的核心公式
NSLayoutRelation枚舉:
enum {
NSLayoutRelationLessThanOrEqual = -1,
NSLayoutRelationEqual = 0,
NSLayoutRelationGreaterThanOrEqual = 1,
};
typedef NSInteger NSLayoutRelation;NSLayoutAttribute枚舉:
typedef enum: NSInteger {
NSLayoutAttributeLeft = 1,
NSLayoutAttributeRight,
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,
NSLayoutAttributeTrailing,
NSLayoutAttributeWidth,
NSLayoutAttributeHeight,
NSLayoutAttributeCenterX,
NSLayoutAttributeCenterY,
NSLayoutAttributeBaseline,
NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
NSLayoutAttributeFirstBaseline,
NSLayoutAttributeLeftMargin,
NSLayoutAttributeRightMargin,
NSLayoutAttributeTopMargin,
NSLayoutAttributeBottomMargin,
NSLayoutAttributeLeadingMargin,
NSLayoutAttributeTrailingMargin,
NSLayoutAttributeCenterXWithinMargins,
NSLayoutAttributeCenterYWithinMargins,
NSLayoutAttributeNotAnAttribute = 0} NSLayoutAttribute;3)在UIView對象上添加約束對象
- (void)addConstraint:(NSLayoutConstraint *)constraint - (void)addConstraints:(NSArray *)constraints
將約束添加到哪個view對象上應按照以下規(guī)則:
對于同級view之間的約束關系,添加到它們的父控件上
對于不同級view之間的約束關系,添加到最近的共同父控件上
對于有層級關系的兩個view之間約束關系,添加到層次較高的的空間上
注意:約束不能重復添加,不能缺少必要的約束
添加約束的過程中非常容易出現(xiàn)無法計算出frame的情況
UIView的其他操作約束的方法:
- (NSArray *)constraints - (void)removeConstraint:(NSLayoutConstraint *)constraint - (void)removeConstraints:(NSArray *)constraints
AutoLayout的補充
AutoLayout的動畫:
代碼中如果修改了約束的數(shù)值,則執(zhí)行下面的代碼,就能產生相應的動畫效果。
[UIView animateWithDuration:1.0 animations:^{
[view layoutIfNeeded];
}];哪個view中的約束變化了,哪個view對象調用layoutIfNeed方法
約束的變化應在動畫之前完成。
UILabel、UIButton這類顯示文字的控件使用AutoLayout的好處:
使用了恰當?shù)募s束,能夠使其尺寸自動匹配。
如設置了UILabel對象的上、左、右的規(guī)定邊距,則UILabel的尺寸會根據(jù)文字自動適應。
約束的VFL方式
Visual Format Language,可視化格式語言,是蘋果公司為了簡化AutoLayout的編碼而推出的抽象語言。
其實不能稱之為“語言”,可以認為這僅僅是一種“語法”,其目的是減少代碼使用AutoLayout的編程量
但實際減少的程度有限,有些約束的功能使用VFL也無法完成,但在實現(xiàn)一些簡單約束時非常有效。
NSLayoutConstraint的另一個創(chuàng)建方法:
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary*)views
format參數(shù):VFL語句
views參數(shù):VFL中出現(xiàn)的對象“鍵值對”
metrics:占位符
返回一組約束對象
VFL語句示意:

如:
canelButton寬72,acceptButton寬50,它們之間間距12
H:[cancelButton(72)]-12-[acceptButton(50)]
wideView寬度大于等于60point,該約束條件優(yōu)先級為700(優(yōu)先級最大值為1000,優(yōu)先級越高的約束越先被滿足)
H:[wideView(>=60@700)]
豎直方向上,先有一個redBox,其下方緊接一個高度等于redBox高度的yellowBox
V:[redBox]-[yellowBox(==redBox)]
水平方向上,F(xiàn)ind距離父view左邊緣默認間隔寬度,之后是FindNext距離Find間隔默認寬度;再之后是寬度不小于20的FindField,它和FindNext以及父view右邊緣的間距都是默認寬度。(豎線“|” 表示superview的邊緣)
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
ZXPAutoLayout
號稱最輕巧的自動布局,簡化了NSLayoutConstraint的繁瑣,采用新穎的鏈式語法,可擴展性強,維護成為低。
使用 zxp_addAutoLayout添加布局, 如:
[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
}];單個view的布局關系:
在superview中的內邊距:
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpace)(CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpace)(CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpace)(CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpace)(CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^edgeInsets)(UIEdgeInsets insets);
如:
[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
//layout.topSpace(20);
//layout.bottomSpace(30);
//layout.leftSpace(40);
//layout.rightSpace(50);
layout.edgeInsets(UIEdgeInsetsMake(20, 30, 40, 50));
}];居中操作:
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^xCenterByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^yCenterByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^centerByView)(UIView *view,CGFloat value);
參數(shù)view應為superview
寬高操作:
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^widthValue)(CGFloat value); @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^heightValue)(CGFloat value);
如:
[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.xCenterByView(self.view, 0);
layout.yCenterByView(self.view, -100);
layout.widthValue(100);
layout.heightValue(100);
}];
兩個view的布局關系:
//與另一個view的內邊距相等 @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^edgeEqualTo)(UIView *view); //當前的top距離view為value點坐標距離 @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpaceByView)(UIView *view,CGFloat value); //當前top內邊距值與view的相等 @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpaceByView)(UIView *view,CGFloat value); @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpaceByView)(UIView *view,CGFloat value); //與view等寬 @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^widthEqualTo)(UIView *view,CGFloat value); @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^heightEqualTo)(UIView *view, CGFloat value);
如:
[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.xCenterByView(self.view, 0);
layout.yCenterByView(self.view, -100);
layout.widthValue(100);
layout.heightValue(100);
}];
[self.blueView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceByView(self.redView, 100);
layout.heightEqualTo(self.redView, 0);
layout.widthEqualTo(self.redView, 0);
layout.leftSpaceEqualTo(self.redView, 0);
}];自適應操作:(對UILabel有效)
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoHeight)(); @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoHeightByMin)(CGFloat value); @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoWidth)(); @property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoWidthByMin)(CGFloat value);
其他操作:
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^priority)(UILayoutPriority priority); //優(yōu)先級 @property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^multiplier)(CGFloat multiplier); //約束的倍數(shù)
如:
[self.blueView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceByView(self.redView, 100);
layout.heightEqualTo(self.redView, 0).multiplier(0.5);
layout.widthEqualTo(self.redView, 0);
layout.leftSpaceEqualTo(self.redView, 0);
}];
當前題目:UIKit框架(8)屏幕適配(二)
瀏覽路徑:http://chinadenli.net/article40/gsjcho.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、網(wǎng)站建設、靜態(tài)網(wǎng)站、微信小程序、定制網(wǎng)站、微信公眾號
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)