你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS頁面自動布局 之 NSLayoutConstraint基礎篇

IOS頁面自動布局 之 NSLayoutConstraint基礎篇

編輯:IOS開發綜合
使用AutoLayout之前需要知道以下兩點:   1.必須設置 translatesAutoresizingMaskIntoConstraints為NO。   2.如果是viewControl則AutoLayout適配寫在[- updateViewConstraints]中;    如果是view則AutoLayout適配寫在[- updateConstraints]中。        一、要講解的方法:    
 1 /* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" 
 2  If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
 3  */
 4 +(instancetype)constraintWithItem:(id)view1 
 5                         attribute:(NSLayoutAttribute)attr1 
 6                         relatedBy:(NSLayoutRelation)relation 
 7                            toItem:(id)view2
 8                         attribute:(NSLayoutAttribute)attr2 
 9                        multiplier:(CGFloat)multiplier 
10                          constant:(CGFloat)c;        
 

 

  參數說明:   第一個參數 view1: 要設置的視圖;   第二個參數 attr1: view1要設置的屬性,稍後詳解;   第三個參數 relation: 視圖view1和view2的指定屬性之間的關系,稍後詳解;   第四個參數 view2: 參照的視圖;   第五個參數 attr2: 參照視圖view2的屬性,稍後詳解;   第六個參數 multiplier: 視圖view1的指定屬性是參照視圖view2制定屬性的多少倍;   第七個參數 c: 視圖view1的指定屬性需要加的浮點數。       根據參數的講解,得出計算公式如下:   view1.attr1 [= , >= , <=] view2.attr2 * multiplier + c;       參數詳解:   1、NSLayoutAttribute    
 1 typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
 2     NSLayoutAttributeLeft = 1, 
 3     NSLayoutAttributeRight,
 4     NSLayoutAttributeTop,
 5     NSLayoutAttributeBottom,
 6     NSLayoutAttributeLeading,
 7     NSLayoutAttributeTrailing,
 8     NSLayoutAttributeWidth,
 9     NSLayoutAttributeHeight,
10     NSLayoutAttributeCenterX,
11     NSLayoutAttributeCenterY,
12     NSLayoutAttributeBaseline,
13     NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
14     NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
15     
16     
17     NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
18     NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
19     NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
20     NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
21     NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
22     NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
23     NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
24     NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
25     
26     NSLayoutAttributeNotAnAttribute = 0
27 };
 

 

  分三部分解釋 NSLayoutAttribute     第一部分:常用的   NSLayoutAttributeLeft: CGRectGetMinX(view.frame);   NSLayoutAttributeRight: CGRectGetMaxX(view.frame);   NSLayoutAttributeTop: CGRectGetMinY(view.frame);   NSLayoutAttributeBottom: CGRectGetMinY(view.frame);   NSLayoutAttributeWidth: CGRectGetWidth(view.frame);   NSLayoutAttributeHeight: CGRectGetHeight(view.frame);   NSLayoutAttributeCenterX: view.center.x;   NSLayoutAttributeCenterY:view.center.y ;   NSLayoutAttributeBaseline: 文本底標線,在大多數視圖中等同於NSLayoutAttributeBottom; 在少數視圖,如UILabel,是指字母的底部出現的位置;   NSLayoutAttributeLastBaseline: 相當於NSLayoutAttributeBaseline;   NSLayoutAttributeFirstBaseline: 文本上標線;   NSLayoutAttributeNotAnAttribute: None;       第二部分: 根據國家使用習慣不同表示的意思不同   NSLayoutAttributeLeading: 在習慣由左向右看的地區,相當於NSLayoutAttributeLeft;在習慣從右至左看的地區,相當於NSLayoutAttributeRight;   NSLayoutAttributeTrailing: 在習慣由左向右看的地區,相當於NSLayoutAttributeRight;在習慣從右至左看的地區,相當於NSLayoutAttributeLeft;       第三部分:ios8新增屬性,各種間距,具體用法下節介紹   NSLayoutAttributeLeftMargin,   NSLayoutAttributeRightMargin,   NSLayoutAttributeTopMargin,   NSLayoutAttributeBottomMargin,   NSLayoutAttributeLeadingMargin,   NSLayoutAttributeTrailingMargin,   NSLayoutAttributeCenterXWithinMargins,   NSLayoutAttributeCenterYWithinMargins,        從網上找了一張圖,標注以上屬性       2、NSLayoutRelation   1 typedef NS_ENUM(NSInteger, NSLayoutRelation) { 2     NSLayoutRelationLessThanOrEqual = -1, 3     NSLayoutRelationEqual = 0, 4     NSLayoutRelationGreaterThanOrEqual = 1, 5 };  NSLayoutRelationLessThanOrEqual: <=;    NSLayoutRelationEqual: =;    NSLayoutRelationGreaterThanOrEqual: >=;       二、要講解的方法   1、獲取當前view中所有的 NSLayoutConstraint   1 - (NSArray *)constraints NS_AVAILABLE_IOS(6_0); 2、舊版方法,將指定的NSLayoutConstraint添加到頁面或者從頁面中移除    
1 1 - (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead, set NSLayoutConstraint's active property to YES.
2 2 - (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead use +[NSLayoutConstraint activateConstraints:].
3 3 - (void)removeConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead set NSLayoutConstraint's active property to NO.
4 4 - (void)removeConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead use +[NSLayoutConstraint deactivateConstraints:].

 

  3、ios8新加方法,激活或者停用指定約束    
1 /* The receiver may be activated or deactivated by manipulating this property.  Only active constraints affect the calculated layout.  Attempting to activate a constraint whose items have no common ancestor will cause an exception to be thrown.  Defaults to NO for newly created constraints. */
2 @property (getter=isActive) BOOL active NS_AVAILABLE(10_10, 8_0);
3 
4 /* Convenience method that activates each constraint in the contained array, in the same manner as setting active=YES. This is often more efficient than activating each constraint individually. */
5 + (void)activateConstraints:(NSArray *)constraints NS_AVAILABLE(10_10, 8_0);
6 
7 /* Convenience method that deactivates each constraint in the contained array, in the same manner as setting active=NO. This is often more efficient than deactivating each constraint individually. */
8 + (void)deactivateConstraints:(NSArray *)constraints NS_AVAILABLE(10_10, 8_0);
 

 

    三、Coding Time   a> 設置視圖view1為 寬度=20的正方形   兩種寫法,第一種 寬度=20,高度=20   1     [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]]; 2     [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]];     第二種 寬度=20, 高度=寬度   1     [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]]; 2     [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];     第二種方法的優勢是,如果想修改view1的大小,只需要修改一處。   b>設置視圖view1.frame.origin.x = 視圖view2.frame.origin.x    
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0];

//舊版方法
//[self addConstraint:leftConstraint];

//新版方法1
[NSLayoutConstraint activateConstraints:@[leftConstraint]]; 
//新版方法2
leftConstraint.active = YES;

 


  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved