Masonry的使用->在项目中使用Masonry实现自动布局Autolayout(1)
2015-10-22 18:14
429 查看
最近都在研究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主页上也有相关的说明、例子等。我要做成的效果如下:
具体的布局思路如下:
下面是主要代码的实现部分:
Masonry,一个轻量级的布局框架,同时支持iOS和Mac OS X,采用DSL链式语法,只能说,这个框架很好用,github地址:Masonry 。
这个框架有比较多的属性,这里不一一列举了,比较常用的属性有,这些属性与NSLayoutAttrubute的对照表如下:
github主页上也有相关的说明、例子等。我要做成的效果如下:
具体的布局思路如下:
下面是主要代码的实现部分:
//表头视图 - (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中主要的布局代码如下:
- (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
相关文章推荐
- Tomcat 并发优化(收藏)
- CompileSdkVersion、buildToolVersion、minSdkVersion、targetSdkVersion、maxSdkVersion
- 自己用h5写的转盘。写贴上来吧。
- c语言中的字符数组和字符串之间的关系
- jQyery 隔行换色以及鼠标悬浮单击变色事件
- Java集合框架之Collection学习和笔记——黑马训练营
- 深入解析Java编程中的boolean对象的运用
- android:判断手机网络类型
- ASP.NET - 回滚事务
- linux下踢出已登录用户
- Caused by: org.xml.sax.SAXParseException; lineNumber: 30; columnNumber: 84; 对实体 "characterEncoding"
- 最小m段和
- 九度OJ 1081:递推数列 (递归,二分法)
- Highcharts动态设置曲线点
- CentOS6.7 常用操作命令
- BZOJ 4300: 绝世好题( dp )
- 九度OJ 1081:递推数列 (递归,二分法)
- linux python升级过程
- Lucene 简介
- 常用Linux操作命令总结