Masonry的尝试_照片墙

Masonry的主要应用

目前对于我来说 Masonry主要应用于tableView的初始化约束、自定义cell中每一行图片的位置约束

照片墙的主要步骤

1. 设置导航栏， 初始化UITableView，使用Masonry进行约束并设置代理。
2. 设置UITableView的组数行数间距等。
3. 在自定义cell中约束每一行图片的相对位置 （每一行三个图片）

自定义cell

@interface imageTableViewCell : UITableViewCell
@property (nonatomic, strong) UIImageView *image1View;
@property (nonatomic, strong) UIImageView *image2View;
@property (nonatomic, strong) UIImageView *image3View;
@end
//每一行三个图片 具体到底几个图片因人而异 喜欢几个就声明几个

	//记得在自定义cell的.m文件里也要添加头文件#import "Masonry.h"
	//自定义cell的第一个方法跟平常相同 初始化然后self.contentView addSubview:
	//第一个方法里不需要约束
- (void)layoutSubviews {
    [super layoutSubviews];
    
    [_image1View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(10);
        //第一个图片距离左侧的距离 offset(10) //offset偏移量
        make.top.equalTo(self.contentView).offset(10);
        //第一个图片距离上部的距离 offset(10) 
        //自然在第二行图片中这行代码就是距离上一行tableViewCell的距离
        make.width.equalTo(self.contentView).multipliedBy(0.3);
        //第一个图片的宽度在这行中的占比(0.3)
        //这行代码可以基本保证在各个模拟机上图片的相对位置保持不变
        make.height.equalTo(self.contentView).multipliedBy(0.9);
        //第一个图片的高度在这行中的占比(0.9)
        //因为需要两行之间的距离拉开一点 不能让图片挤在一起 所以我没有用(1.0)
        //其实我刚开始确实用的(1.0) 后面发现有点丑
    }];
    [_image2View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_image1View.mas_right).offset(10);
        //重点
        //设置第二个图片的左侧距离第一个图片右侧的距离为offset(10)
        //直接复制第一个图片的约束会让两个图片覆盖在一起
        //到底offset设置成多少取决于个人审美 你希望宽一点那就设置大一点咯
        make.top.equalTo(self.contentView).offset(10);
        make.width.equalTo(self.contentView).multipliedBy(0.3);
        make.height.equalTo(self.contentView).multipliedBy(0.9);
    }];
    [_image3View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_image2View.mas_right).offset(10);
        make.top.equalTo(self.contentView).offset(10);
        make.width.equalTo(self.contentView).multipliedBy(0.3);
        make.height.equalTo(self.contentView).multipliedBy(0.9);
    }];
    //约束的关键点就是equalTo(self.contentView) 不能写成(self.view)
}

UITableView的约束

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = @"图库"; //导航栏的title
    
    _tableView = [[UITableView alloc] init];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [self.view addSubview:_tableView];  
    //此处一定要先将_tableView添加到视图中 再进行约束 不然会导致没有任何东西
    //因为约束的时候在视图中找不到_tableView 当然没办法约束
    [_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(70); 
        //_tableView距离上方的距离 因人而异设置大小
        make.width.equalTo(@([UIScreen mainScreen].bounds.size.width));
        make.height.equalTo(@([UIScreen mainScreen].bounds.size.height));
        //宽度和高度当然是整个屏幕的宽度和高度咯
    }];
    
    [_tableView registerClass:[imageTableViewCell class] forCellReuseIdentifier:@"cell"];
    //注册自定义cell 
    // Do any additional setup after loading the view.
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 3;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 120;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        imageTableViewCell *cell = [[imageTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
        if (!cell) {
            cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        }
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        [cell.image1View setImage:[UIImage imageNamed:@"hh1.jpg"]];
        [cell.image2View setImage:[UIImage imageNamed:@"hh2.jpg"]];
        [cell.image3View setImage:[UIImage imageNamed:@"hh3.jpg"]];
        return cell;
    } else if (indexPath.row == 1) {
        imageTableViewCell *cell = [[imageTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
        if (!cell) {
            cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        }
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        //点击cell时没有灰色效果
        [cell.image1View setImage:[UIImage imageNamed:@"hh4.jpg"]];
        [cell.image2View setImage:[UIImage imageNamed:@"hh5.jpg"]];
        [cell.image3View setImage:[UIImage imageNamed:@"hh6.jpg"]];
        return cell;
    } else if (indexPath.row == 2) {
        imageTableViewCell *cell = [[imageTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
        if (!cell) {
            cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        }
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        [cell.image1View setImage:[UIImage imageNamed:@"hh7.jpg"]];
        [cell.image2View setImage:[UIImage imageNamed:@"hh8.jpg"]];
        return cell;
    }
    return 0;
}
@end

实际效果