您的位置:首页 > 其它

AutoLayout三、九宫格

2015-07-22 23:30 453 查看

 使用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;
}];
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: