iOS－NSLayoutConstraint-代码实现自动布局的函数用法说明

最新推荐文章于 2023-10-07 20:01:10 发布

iOSmling

最新推荐文章于 2023-10-07 20:01:10 发布

阅读量1k

点赞数

分类专栏： ios

本文链接：https://blog.csdn.net/q862171879/article/details/44494483

版权

ios 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

适配建议

1、以后的应用程序，都使用AutoLayout, 不要再用绝对定位。
2、使用类似网页的方式来设计界面。
3、设计师好，程序员也好，尽量使用点这个单位进行思考，而不要使用像素。比如，你需要做44 x 66个点的按钮，2x模式，就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点，就是手机上导航栏，工具栏的高度。假如用像素思考，容易使得做出的图片过大或者过小。
4、非矢量素材，就可以做尺寸最大的，之后再进行缩小。比如你需要兼容3x的屏幕，就直接做最高那种图片。
5、而当使用Flash之类的矢量工具来做素材的时候，应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图，3倍图，因为矢量放大不失真。不要建立一个3x的场景，导出成大图片，再进行缩小，这样就容易失真。更理想的是直接使用矢量图。
6、假如是那种导航栏，工具栏之类的背景图，需要横跨整个屏幕。可以只切一小块，让程序拉伸，拉伸方式是保持两边的像素不动，只拉伸最中间的一列像素。需要拉伸的话，横方向就不要出现一些渐变色。
7、按钮的点击区域，不应该少于44像素，就算按钮的图片看起来比较小，也应该使得点按钮周围的透明区也有反应。
8、可以按照你当前最方便测试机子的型号来做一些主要预览图，效果图。比如你手头有iPhone 5，可以按照iPhone 5的尺寸，320 x 568个点，需要兼容iPhone 6 Plus，就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机，就选较大的，之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式，需要另外处理。
9、上面说的是应用的处理方式，游戏会有些特殊。现在很多游戏，按照1136 x 768的像素尺寸来设计场景，这样可以同时兼容iPad和iPhone，并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素，iPhone 6在2x模式下，是1136 * 640。这种尺寸，可以简单将场景居中显示，各自将场景拉伸到最大。

NSLayoutConstraint-代码实现自动布局的函数用法说明

1

2

3

4

5

6

7

[NSLayoutConstraint constraintWithItem:(id)item

attribute:(NSLayoutAttribute)attribute

relatedBy:(NSLayoutRelation)relation

toItem:(id)otherItem

attribute:(NSLayoutAttribute)otherAttribute

multiplier:(CGFloat)multiplier

constant:(CGFloat)constant]

参数说明:

第一个参数:指定约束左边的视图view1

第二个参数:指定view1的属性attr1，具体属性见文末。

第三个参数:指定左右两边的视图的关系relation，具体关系见文末。

第四个参数:指定约束右边的视图view2

第五个参数:指定view2的属性attr2，具体属性见文末。

第六个参数:指定一个与view2属性相乘的乘数multiplier

第七个参数:指定一个与view2属性相加的浮点数constant

这个函数的对照公式为:

view1.attr1 <relation> view2.attr2 * multiplier + constant

注意:

1.如果你想设置的约束里不需要第二个view，要将第四个参数设为nil，第五个参数设为NSLayoutAttributeNotAnAttribute

举例:

 
        1 
      
        2 
      
        3 
      
        4 
      
        5 
      
        6 
      
        7 
      
        [NSLayoutConstraint constraintWithItem:view1 
       
        attribute:NSLayoutAttributeLeft 
       
        relatedBy:NSLayoutRelationEqual 
       
        toItem:view2 
       
        attribute:NSLayoutAttributeRight 
       
        multiplier:1 
       
        constant:10]

翻译过来就是:view1的左侧，在，view2的右侧，再多10个点，的地方。

附视图的属性和关系的值:

 
        1 
      
        2 
      
        3 
      
        4 
      
        5 
      
        6 
      
        7 
      
        8 
      
        9 
      
        10 
      
        11 
      
        12 
      
        13 
      
        14 
      
        15 
      
        16 
      
        17 
      
        18 
      
        19 
      
        20 
      
        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的区别是left/right永远是指左右，而leading/trailing在某些从右至左习惯的地区会变成，leading是右边，trailing是左边。

屏幕兼容的问题

为了让我们的应用在不容尺寸的屏幕下都能 “正常”的表示，我们尽量不要把数据写死。

大多数可视元素都是一个矩形区域，当然这个矩形区域有坐标的，我们有了这个区域坐标就能确定可视元素的现实位置了。

但是iphone5 和以前的屏幕不一样了，在以前的设备中，我们可以添加一个 xx.@2x.png 来适应retina屏幕，但是iphoen5咋办呢？

ios 引入了 Auto Layout 的东东，这个要和UIViewAutoresizing 区分下。

看下面代码

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *aView = [[UIView alloc] init];
    aView.backgroundColor = [UIColor redColor];

//为了不和autosizing冲突，我们设置No

    [aView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.view addSubview:aView];

    UIView *bView = [[UIView alloc] init];
    bView.backgroundColor = [UIColor blueColor];
    [bView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.view addSubview:bView];

    NSDictionary *views = NSDictionaryOfVariableBindings(aView, bView);

//NSDictionaryOfVariableBindings 宏其实 NSDictionaryOfVariableBindings(v1, v2, v3) 等效于 [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil];
    [self.view addConstraints:
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(>=50)-[aView(100)]"
                                             options:0
                                             metrics:nil
                                               views:views]];

    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[aView(50)]"
                                             options:0
                                             metrics:nil
                                               views:views]];

    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView(==aView)]"
                                             options:0
                                             metrics:nil
                                               views:views]];
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:[bView(==aView)]"
                                             options:0
                                             metrics:nil
                                               views:views]];

    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:bView
                                  attribute:NSLayoutAttributeLeft
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:aView
                                  attribute:NSLayoutAttributeRight
                                 multiplier:1
                                   constant:10]];
    //添加一个限制等效于 bView.frame.origin.x = (aView.frame.origin.x +aView.frame.size.width) * 1 + 10,好像是这样的！个人觉得！

它是一种依赖关系，bView依赖aView，这样就算aView变了，bView也会跟着变换。
    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:bView
                                  attribute:NSLayoutAttributeTop
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:aView
                                  attribute:NSLayoutAttributeTop
                                 multiplier:1
                                   constant:0]];

    [aView release];
    [bView release];
}

constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:

Create a constraint of the form "view1.attr1 <relation> view2.attr2 * multiplier + constant".

属性

最后的结果就是 “view1.attr1 < >= 或者 == 或者 <= > view2.attr2 * multiplier + constant”

这个博客写的也比较好： http://www.cnblogs.com/warrior/p/3630372.html

另一个例子：

UIView *view1 = [[UIView alloc] init];
UIView *view2 = [[UIView alloc] init];
[self.view addSubview:view1];
[self.view addSubview:view2];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view2.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor blueColor];
view2.backgroundColor = [UIColor grayColor];

//set view1 height and width10
[view1 addConstraint:[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:100]];

[view1 addConstraint:[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:100]];

//set relationship between topView and view119
[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1
constant:50]];

[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0]];


//set view2 height and width13
[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view2
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:view1
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0]];

[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view2
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:view1
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0]];


//set relationship between view1 and view216
[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view2
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:view1
attribute:NSLayoutAttributeRight
multiplier:1
constant:100]];

[self.view addConstraint:[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:view2
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0]];