适配布局-ios

于 2015-11-21 13:26:00 发布
阅读量79 收藏
点赞数
原文链接：http://www.cnblogs.com/jiafuyang/p/4983611.html
版权

// 系统的约束代码

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    UIView *superView = self.view;

    

    UIView *viewDemo = [[UIView alloc] init];

    viewDemo.translatesAutoresizingMaskIntoConstraints = NO;

    viewDemo.backgroundColor = [UIColor orangeColor];

    [superView addSubview:viewDemo];

    

    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

    [superView addConstraints:@[

　　　　　　　　　　　// viewDemo顶部距离父视图superView顶部距离为padding.top(即为：10)，

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTopmultiplier:1 constant:padding.top],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier:1constant:padding.left],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottomrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 constant:-padding.bottom]

                               ]];

}

// 注：若是把右边约束去掉，改为如下语句

// [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]

// 则viewDemo的宽度变为superView的0.5倍！！

//***************************************************

// VFL语言

　 UIView *viewLeft = [[UIView alloc] init];

    viewLeft.translatesAutoresizingMaskIntoConstraints = NO;

    viewLeft.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:viewLeft];

    

    UIView *viewRight = [[UIView alloc] init];

    viewRight.translatesAutoresizingMaskIntoConstraints = NO;

    viewRight.backgroundColor = [UIColor redColor];

    [self.view addSubview:viewRight];

    // horizontal：水平方向距左边10，距右边10

    //简单说来，NSDictionaryOfVariableBindings(scrollView)就等于@{@”scrollView”: scrollView}

    NSDictionary *constraintDict = NSDictionaryOfVariableBindings(viewLeft,viewRight);

    NSArray *hConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewLeft]-(10)-|"options:0 metrics:nil views:constraintDict];

    // vertical： 垂直方向距顶部30，控件高度100

    NSArray *vConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[viewLeft(100)]"options:0 metrics:nil views:constraintDict];

    // 添加到父视图上

    [self.view addConstraints:hConstraintArrayLeft];

    [self.view addConstraints:vConstraintArrayLeft];

    

    NSArray *hConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewRight]-(10)-|" options:0 metrics:nil views:constraintDict];

    // viewRight距viewLeft的垂直距离为50

    NSArray *vConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewLeft]-(50)-[viewRight(200)]" options:0 metrics:nil views:constraintDict];

    [self.view addConstraints:hConstraintArrayRight];

    [self.view addConstraints:vConstraintArrayRight];

//***************************************************

// 三方库：Masonry

// 居中

// 快速定义一个weakSelf，用于block里面，防止循环引用

#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self

    WS(ws);

    

    UIView *sv = [UIView new];

    

    sv.backgroundColor = [UIColor orangeColor];

    // 在做autoLayout之前 一定要先将view添加到superView上 否则会报错

    [self.view addSubview:sv];

    [sv mas_makeConstraints:^(MASConstraintMaker *make) {

        // 居中

        make.center.equalTo(ws.view);

        // 设置size

        make.size.mas_equalTo(CGSizeMake(300, 300));

    }];

 

3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
int padding1 = 10;
[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.mas_equalTo(sv.mas_centerY);
     make.left.equalTo(sv.mas_left). with .offset(padding1);
     make.right.equalTo(sv3.mas_left). with .offset(-padding1);
     make.height.mas_equalTo(@150);
     make.width.equalTo(sv3);
}];
[sv3 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.mas_equalTo(sv.mas_centerY);
     make.left.equalTo(sv2.mas_right). with .offset(padding1);
     make.right.equalTo(sv.mas_right). with .offset(-padding1);
     make.height.mas_equalTo(@150);
     make.width.equalTo(sv2);
}];

代码效果

06.PNG

这里我们在两个子view之间互相设置的约束 可以看到他们的宽度在约束下自动的被计算出来了

4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
UIScrollView *scrollView = [UIScrollView  new ];
scrollView.backgroundColor = [UIColor whiteColor];
[sv addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(sv). with .insets(UIEdgeInsetsMake(5,5,5,5));
}];
UIView *container = [UIView  new ];
[scrollView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(scrollView);
     make.width.equalTo(scrollView);
}];
int count = 10;
UIView *lastView = nil;
for  ( int i = 1 ; i <= count ; ++i )
{
     UIView *subv = [UIView  new ];
     [container addSubview:subv];
     subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
                                       saturation:( arc4random() % 128 / 256.0 ) + 0.5
                                       brightness:( arc4random() % 128 / 256.0 ) + 0.5
                                            alpha:1];
     
     [subv mas_makeConstraints:^(MASConstraintMaker *make) {
         make.left.and.right.equalTo(container);
         make.height.mas_equalTo(@(20*i));
         
         if  ( lastView )
         {
             make.top.mas_equalTo(lastView.mas_bottom);
         }
         else
         {
             make.top.mas_equalTo(container.mas_top);
         }
     }];
     
     lastView = subv;
}
[container mas_makeConstraints:^(MASConstraintMaker *make) {
     make.bottom.equalTo(lastView.mas_bottom);
}];

头部效果

07.PNG

 

尾部效果

08.PNG

从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了

这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算uiscrollView的contentSize

5. [高级] 横向或者纵向等间隙的排列一组view

很遗憾 autoLayout并没有直接提供等间隙排列的方法(Masonry的官方demo中也没有对应的案例) 但是参考案例3 我们可以通过一个小技巧来实现这个目的 为此我写了一个Category

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
@implementation UIView(Masonry_LJC)
- (void) distributeSpacingHorizontallyWith:(NSArray*)views
{
     NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];
     
     for  ( int i = 0 ; i < views.count+1 ; ++i )
     {
         UIView *v = [UIView  new ];
         [spaces addObject:v];
         [self addSubview:v];
         
         [v mas_makeConstraints:^(MASConstraintMaker *make) {
             make.width.equalTo(v.mas_height);
         }];
     }    
     
     UIView *v0 = spaces[0];
     
     __weak __typeof(&*self)ws = self;
     
     [v0 mas_makeConstraints:^(MASConstraintMaker *make) {
         make.left.equalTo(ws.mas_left);
         make.centerY.equalTo(((UIView*)views[0]).mas_centerY);
     }];
     
     UIView *lastSpace = v0;
     for  ( int i = 0 ; i < views.count; ++i )
     {
         UIView *obj = views[i];
         UIView *space = spaces[i+1];
         
         [obj mas_makeConstraints:^(MASConstraintMaker *make) {
             make.left.equalTo(lastSpace.mas_right);
         }];
         
         [space mas_makeConstraints:^(MASConstraintMaker *make) {
             make.left.equalTo(obj.mas_right);
             make.centerY.equalTo(obj.mas_centerY);
             make.width.equalTo(v0);
         }];
         
         lastSpace = space;
     }
     
     [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {
         make.right.equalTo(ws.mas_right);
     }];
     
}
- (void) distributeSpacingVerticallyWith:(NSArray*)views
{
     NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];
     
     for  ( int i = 0 ; i < views.count+1 ; ++i )
     {
         UIView *v = [UIView  new ];
         [spaces addObject:v];
         [self addSubview:v];
         
         [v mas_makeConstraints:^(MASConstraintMaker *make) {
             make.width.equalTo(v.mas_height);
         }];
     }
     
     
     UIView *v0 = spaces[0];
     
     __weak __typeof(&*self)ws = self;
     
     [v0 mas_makeConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(ws.mas_top);
         make.centerX.equalTo(((UIView*)views[0]).mas_centerX);
     }];
     
     UIView *lastSpace = v0;
     for  ( int i = 0 ; i < views.count; ++i )
     {
         UIView *obj = views[i];
         UIView *space = spaces[i+1];
         
         [obj mas_makeConstraints:^(MASConstraintMaker *make) {
             make.top.equalTo(lastSpace.mas_bottom);
         }];
         
         [space mas_makeConstraints:^(MASConstraintMaker *make) {
             make.top.equalTo(obj.mas_bottom);
             make.centerX.equalTo(obj.mas_centerX);
             make.height.equalTo(v0);
         }];
         
         lastSpace = space;
     }
     
     [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {
         make.bottom.equalTo(ws.mas_bottom);
     }];
}
@end

简单的来测试一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
UIView *sv11 = [UIView  new ];
UIView *sv12 = [UIView  new ];
UIView *sv13 = [UIView  new ];
UIView *sv21 = [UIView  new ];
UIView *sv31 = [UIView  new ];
sv11.backgroundColor = [UIColor redColor];
sv12.backgroundColor = [UIColor redColor];
sv13.backgroundColor = [UIColor redColor];
sv21.backgroundColor = [UIColor redColor];
sv31.backgroundColor = [UIColor redColor];
[sv addSubview:sv11];
[sv addSubview:sv12];
[sv addSubview:sv13];
[sv addSubview:sv21];
[sv addSubview:sv31];
//给予不同的大小 测试效果
[sv11 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.equalTo(@[sv12,sv13]);
     make.centerX.equalTo(@[sv21,sv31]);
     make.size.mas_equalTo(CGSizeMake(40, 40));
}];
[sv12 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.size.mas_equalTo(CGSizeMake(70, 20));
}];
[sv13 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.size.mas_equalTo(CGSizeMake(50, 50));
}];
[sv21 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.size.mas_equalTo(CGSizeMake(50, 20));
}];
[sv31 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.size.mas_equalTo(CGSizeMake(40, 60));
}];
[sv distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];
[sv distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];
[sv showPlaceHolderWithAllSubviews];
[sv hidePlaceHolder];

代码效果

09.PNG

perfect! 简洁明了的达到了我们所要的效果

转载于:https://www.cnblogs.com/jiafuyang/p/4983611.html

diaopan3153
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值