在项目中使用Masonry实现自动布局Autolayout(1)

来源：互联网发布：python 没有cv2.cv 编辑：程序博客网时间：2024/05/23 13:38

最近都在研究Autolayout的内容，随着iPhone手机屏幕尺寸的增加，屏幕适配变得尤为重要；适配有多种方式，当然也是可以根据相对位置来适配，但是计算尺寸和代码量可能有些大（如果不嫌麻烦的话）；而另外一种就是Autolayout，网上有很多直接拖拽控件来适配界面的教程，但是自己习惯用纯代码写UI，所以还是用纯代码写。起初，看Apple的Autolayout，只能说头都大，几个简单的UI约束就要很多代码，看起来也费尽。这里有篇文章，感兴趣的可以参考了解一下：http://chun.tips/blog/2014/10/27/wei-iphone6she-ji-zi-gua-ying-bu-ju-(chun-dai-ma-shi-xian-)/。

Masonry，一个轻量级的布局框架，同时支持iOS和Mac OS X，采用DSL链式语法，只能说，这个框架很好用，github地址：Masonry 。

这个框架有比较多的属性，这里不一一列举了，比较常用的属性有，这些属性与NSLayoutAttrubute的对照表如下：

github主页上也有相关的说明、例子等。我要做成的效果如下：

具体的布局思路如下：

下面是主要代码的实现部分：

[objc] view plaincopy
//表头视图  
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section  
{  
    HeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kDeviceWidth, 2*(kDeviceHeight/9))];  
    HeaderView.backgroundColor = NAVIGATION_COLOR;  
      
    topView = [UIView new];  
    topView.backgroundColor = [UIColor clearColor];  
    [HeaderView addSubview:topView];  
    [topView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.left.and.right.equalTo(HeaderView);  
    }];  
      
    UIView *buttomView = [UIView new];  
    buttomView.backgroundColor = [UIColor clearColor];  
    [HeaderView addSubview:buttomView];  
    [buttomView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.left.right.and.bottom.equalTo(HeaderView);  
        make.top.equalTo(topView.mas_bottom);  
        make.width.and.height.equalTo(topView);  
    }];  
      
    headerImageV = [[UIImageView alloc] init];  
    headerImageV.clipsToBounds = YES;  
    headerImageV.layer.cornerRadius = (HeaderView.frame.size.height/2) / 2.0f;  
    headerImageV.image = [UIImage imageNamed:@"store.jpg"];  
    [HeaderView addSubview:headerImageV];  
    [headerImageV mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.width.equalTo(headerImageV.mas_height).multipliedBy(1);  
          
        make.width.and.height.lessThanOrEqualTo(topView);  
        make.width.and.height.equalTo(topView).with.priorityLow();  
          
        make.centerX.equalTo(topView);  
        if (didRotato == NO) {  
            make.bottom.equalTo(topView.mas_bottom).offset(20);  
        }  
        else  
        {  
            make.top.equalTo(topView.mas_top);  
        }  
    }];  
      
    UILabel *shopNameL = [[UILabel alloc] init];  
    shopNameL.textColor = [UIColor whiteColor];  
    shopNameL.font = [UIFont systemFontOfSize:20];  
    shopNameL.textAlignment = NSTextAlignmentCenter;  
    shopNameL.text = @"精诚超市";  
    [HeaderView addSubview:shopNameL];  
    [shopNameL mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.equalTo(headerImageV.mas_bottom);  
        make.left.and.right.equalTo(buttomView);  
    }];  
      
    UILabel *addressL = [[UILabel alloc] init];  
    addressL.font = [UIFont systemFontOfSize:10];  
    addressL.textAlignment = NSTextAlignmentRight;  
    addressL.textColor = [UIColor whiteColor];  
    addressL.text = @"天河区万佳广场首层234号";  
    [HeaderView addSubview:addressL];  
      
    UILabel *gwNumberL = [[UILabel alloc] init];  
    gwNumberL.font = addressL.font;  
    gwNumberL.textColor = addressL.textColor;  
    gwNumberL.textAlignment = NSTextAlignmentLeft;  
    gwNumberL.text = @"  GW88888888";  
    [HeaderView addSubview:gwNumberL];  
      
    [addressL mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.equalTo(shopNameL.mas_bottom);  
        make.left.equalTo(buttomView.mas_left);  
        make.right.equalTo(gwNumberL.mas_left);  
        make.height.equalTo(shopNameL.mas_height);  
        make.bottom.equalTo(buttomView.mas_bottom);  
    }];  
      
    [gwNumberL mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.equalTo(shopNameL.mas_bottom);  
        make.left.equalTo(addressL.mas_right);  
        make.right.equalTo(buttomView.mas_right);  
        make.width.equalTo(addressL.mas_width);  
        make.height.equalTo(addressL.mas_height);  
        make.bottom.equalTo(buttomView.mas_bottom);  
    }];  
      
    return HeaderView;  
}  

cell中主要的布局代码如下：

[objc] view plaincopy
- (id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier  
{  
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];  
    if (self) {  
        self.selectionStyle = UITableViewCellSelectionStyleNone;  
          
        _theImageV = [[UIImageView alloc] init];  
        _theImageV.autoresizingMask = UIViewAutoresizingFlexibleHeight;  
        [self.contentView addSubview:_theImageV];  
          
        _nameL = [[UILabel alloc] init];  
        _nameL.font = [UIFont systemFontOfSize:18];  
        [self.contentView addSubview:_nameL];  
          
        UIView *topView = [UIView new];  
        topView.backgroundColor = [UIColor clearColor];  
        [self.contentView addSubview:topView];  
          
        /* 约束关系 */  
        [topView mas_makeConstraints:^(MASConstraintMaker *make) {  
            make.centerY.equalTo(self.contentView);  
            make.width.and.height.equalTo(self.contentView.mas_height);  
        }];  
          
        [_theImageV mas_makeConstraints:^(MASConstraintMaker *make) {  
            make.edges.equalTo(topView).insets(UIEdgeInsetsMake(12, 12, 12, 12)); //各边偏移12个点  
            make.center.equalTo(topView);  
        }];  
          
        [_nameL mas_makeConstraints:^(MASConstraintMaker *make) {  
            make.centerY.equalTo(self.contentView);  
            make.left.equalTo(_theImageV.mas_right).insets(kPadding);  
        }];  
          
          
    }  
    return self;  
}  

你可以从github上获取到完整代码，地址：this

0 0