码迷,mamicode.com
首页 > 其他好文 > 详细

AutoLayout三、九宫格

时间:2015-07-23 00:29:01      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

 

 使用Masonry完成九宫格的约束设置,效果如图所示:

技术分享

 

首先里面的 每一项 又是一个单独的View, 外面套一个容器View

 

ItemView:

- (void)initSubviews {
    
    self.userInteractionEnabled = YES;
    _imageView.userInteractionEnabled = YES;
    _titleLabel.userInteractionEnabled = YES;
    
    @weakify(self);
    CGFloat width = _imageView.image.size.width;
    [_imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        @strongify(self);
        make.top.mas_equalTo(self.mas_top);//图片贴顶部
        make.centerX.mas_equalTo(self);//图片居中
        make.width.mas_equalTo(width);//等于图片宽度
    }];
    
    [_titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        @strongify(self);
        make.top.mas_equalTo(self.imageView.mas_bottom).offset(20);//文字隔图片下20
        make.centerX.mas_equalTo(self.imageView);//居中
        make.bottom.mas_equalTo(self.mas_bottom);//文字底部贴superView
    }];
}

 

//九宫格布局约束核心代码

NSInteger Columns = 3;
CGFloat ItemHeight = 80;
CGFloat Gap = 35;

__block UIView *lastView = nil;
    for (int i = 0; i < self.shareList.count; i++) {
        ZSYInviteFriendsItemView *item = _shareList[i];
        [_shareView addSubview:item];
        
        [item mas_makeConstraints:^(MASConstraintMaker *make) {
            
            if (lastView) {
                make.width.equalTo(lastView.mas_width);
            } else {
                make.size.mas_equalTo(CGSizeMake((SCREEN_WIDTH - Gap * (Columns + 1))/Columns, ItemHeight));
            }
            
            if (i % Columns == 0) {
                make.left.equalTo(item.superview).offset(Gap);
            }
            else{
                make.left.equalTo(lastView.mas_right).offset(Gap);
            }
            if (i % Columns == (Columns -1)) {
                make.right.equalTo(item.superview).offset(-Gap);
            }
            int top = (i / Columns) * Gap + ( i / Columns * ItemHeight);
            make.top.equalTo(item.superview).offset(top);
            
            lastView = item;
        }];
    }

 

AutoLayout三、九宫格

标签:

原文地址:http://www.cnblogs.com/xiongzenghui/p/4669028.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!