iOS 页面自动布局-NSLayoutConstraint简介


使用AutoLayout之前需要知道以下两点:

1.必须设置 translatesAutoresizingMaskIntoConstraints为NO。

2.如果是viewControl则AutoLayout适配写在[- updateViewConstraints]中;

   如果是view则AutoLayout适配写在[- updateConstraints]中。

 一 方法:

/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" 
 If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
 */
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

参数说明:

第一个参数 view1: 要设置的视图;

第二个参数 attr1: view1要设置的属性,稍后详解;

第三个参数 relation: 视图view1和view2的指定属性之间的关系,稍后详解;

第四个参数 view2: 参照的视图;

第五个参数 attr2: 参照视图view2的属性,稍后详解;

第六个参数 multiplier: 视图view1的指定属性是参照视图view2制定属性的多少倍;

第七个参数 c: 视图view1的指定属性需要加的浮点数。

 

根据参数的讲解,得出计算公式如下:

view1.attr1 [= , >= , <=] view2.attr2 * multiplier + c;

参数详解:

1、NSLayoutRelation

typedef NS_ENUM(NSInteger, NSLayoutRelation) {
    NSLayoutRelationLessThanOrEqual = -1,          //小于等于
    NSLayoutRelationEqual = 0,                     //等于
    NSLayoutRelationGreaterThanOrEqual = 1,        //大于等于
};
2、NSLayoutAttribute
typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
    NSLayoutAttributeLeft = 1,                     //左侧
    NSLayoutAttributeRight,                        //右侧
    NSLayoutAttributeTop,                          //上方
    NSLayoutAttributeBottom,                       //下方
    NSLayoutAttributeLeading,                      //首部,起始边,类似左,只在某些从右向左排列的语言中和NSLayoutAttributeLeft有大区别
    NSLayoutAttributeTrailing,                     //尾部
    NSLayoutAttributeWidth,                        //宽度
    NSLayoutAttributeHeight,                       //高度
    NSLayoutAttributeCenterX,                      //X轴中心
    NSLayoutAttributeCenterY,                      //Y轴中心
    NSLayoutAttributeBaseline,                     //文本底标线
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    
    //下面的属性是设置的边距 意义和上面类似 对应左,右等边距
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    

    NSLayoutAttributeNotAnAttribute = 0            //没有属性
};


第一部分:常用的

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如果想设置的约束里不需要第二个view,要将view2参数设为nil,attr2参数设为NSLayoutAttributeNotAnAttribute

 

第二部分: 根据国家使用习惯不同表示的意思不同

NSLayoutAttributeLeading: 在习惯由左向右看的地区,相当于NSLayoutAttributeLeft;在习惯从右至左看的地区,相当于NSLayoutAttributeRight;

NSLayoutAttributeTrailing: 在习惯由左向右看的地区,相当于NSLayoutAttributeRight;在习惯从右至左看的地区,相当于NSLayoutAttributeLeft;

大致图示如下

 二 方法:

1、获取当前view中所有的 NSLayoutConstraint
@interface UIView (UIConstraintBasedLayoutInstallingConstraints)

@property(nonatomic,readonly) NSArray<__kindof NSLayoutConstraint *> *constraints NS_AVAILABLE_IOS(6_0);

2、iOS6的方法 (UIView的对象方法)将指定的NSLayoutConstraint添加到页面或者从页面中移除

- (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.
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead use +[NSLayoutConstraint activateConstraints:].
- (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.
- (void)removeConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead use +[NSLayoutConstraint deactivateConstraints:].
@end

3、ios8新加方法NSLayoutConstraint的类方法,激活或者停用指定约束

/* 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. */
@property (getter=isActive) BOOL active NS_AVAILABLE(10_10, 8_0);

/* 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. */
+ (void)activateConstraints:(NSArray<NSLayoutConstraint *> *)constraints NS_AVAILABLE(10_10, 8_0);

/* 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. */
+ (void)deactivateConstraints:(NSArray<NSLayoutConstraint *> *)constraints NS_AVAILABLE(10_10, 8_0);

三 举例

a> 设置视图view1为 宽度=20的正方形

两种写法,第一种 宽度=20,高度=20

  [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]];
  [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]];
第二种 宽度=20, 高度=宽度

  [self addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:20]];
  [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;






参考
深入剖析Auto Layout  http://www.jianshu.com/p/d060bef3d620
纯代码的autoLayout及布局动画  http://my.oschina.net/u/2340880/blog/524089
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页