等间距布局 - 从0开始说一下masonry的使用
2016-07-15 10:41
288 查看
以下将从几个方面说一下如何使用Masonry
怎样添加约束才能满足一个View, 及masonry的基本使用
如何使用masonry等间隙排布几个View
更新约束动画
ScrolView如何布局
tableViewCell高度动态变化
![](http://upload-images.jianshu.io/upload_images/2162015-bd808af322c92853.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
这里一共三部分, 最上面黄色的中间蓝色的都是用了masonry提供的方法, 适用于等大小的View等间距布局, 最下面的绿色View是自己自己封装的分类, 适用于不等大VIew的等间距布局, 来自于这边经典的文章Masonry介绍与使用实践:快速上手Autolayout
接下来分别说一下这三部分
![](http://upload-images.jianshu.io/upload_images/2162015-da44bf4b329efc83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
masonry提供了这样一个方法:
所以也就知道了, 将fixedSpacing, leadSpacing, tailSpacing都赋值同一个间距, 数组内的的View就会自动计算出宽度, 完成水平方向的布局.
要注意的是, 这个方法仅仅完成了水平方向的布局, 如果想确定这几个View的位置, 还需要指定竖直方向位置和高度, 这里可以用数组直接调用
![](http://upload-images.jianshu.io/upload_images/2162015-f1e9484bda5f5612.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
这里用到了masonry提供的另一个方法, 和上一个方法基本完全一样
区别就是这里除了布局方向, 第一个和最后一个View的边距, 这里需要指定的是每个item的长度, 自动计算间隙, 所以这个要实现等间距, 其实是要通过item的数量, 以及父视图的宽度先计算出间距, 然后赋值给, leadSpacing和tailSpacing, 比如
和item之间的间距相同, 实现布局.
同样这个方法完成了水平方向的布局, 还需要完成竖直方向的布局.
![](http://upload-images.jianshu.io/upload_images/2162015-4cc19492281e48fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
首先在for循环内 , 完成了底部位置, 宽, 高的布局, 还缺少水平方向的位置, 即还要确定每个view的X, 这里用到了一个UIView的分类
这个分类直接用的里脊串的一篇文章中的代码, 就不贴出代码了, 简单说一下原理, 如图所示:
![](http://upload-images.jianshu.io/upload_images/2162015-7611cd1ea333175e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
实现原理就是在View中创建
至此, 我所知道的三种等间距布局方式就说完了, 具体代码见
github地址:https://github.com/CoderLXWang/HowToUseMasonry
文/CoderLXWang(简书作者)
原文链接:http://www.jianshu.com/p/2c7a5ba73fc2
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
怎样添加约束才能满足一个View, 及masonry的基本使用
如何使用masonry等间隙排布几个View
更新约束动画
ScrolView如何布局
tableViewCell高度动态变化
2. 如何使用masonry等间隙排布几个View
先直接上图, 最终要实现这样一个布局![](http://upload-images.jianshu.io/upload_images/2162015-bd808af322c92853.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
这里一共三部分, 最上面黄色的中间蓝色的都是用了masonry提供的方法, 适用于等大小的View等间距布局, 最下面的绿色View是自己自己封装的分类, 适用于不等大VIew的等间距布局, 来自于这边经典的文章Masonry介绍与使用实践:快速上手Autolayout
接下来分别说一下这三部分
第一部分, 直接上代码
![](http://upload-images.jianshu.io/upload_images/2162015-da44bf4b329efc83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
//在红色View里面放三个正方形View, 等间距为10 NSInteger padding = 10; UIView *yellowView1 = [[UIView alloc] init]; yellowView1.backgroundColor = [UIColor yellowColor]; [redView addSubview:yellowView1]; UIView *yellowView2 = [[UIView alloc] init]; yellowView2.backgroundColor = [UIColor yellowColor]; [redView addSubview:yellowView2]; UIView *yellowView3 = [[UIView alloc] init]; yellowView3.backgroundColor = [UIColor yellowColor]; [redView addSubview:yellowView3]; [@[yellowView1, yellowView2, yellowView3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:padding leadSpacing:padding tailSpacing:padding]; [@[yellowView1, yellowView2, yellowView3] mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(redView).offset(10); make.height.mas_equalTo(yellowView3.mas_width); }];
masonry提供了这样一个方法:
/** * 确定间距等间距布局 * * @param axisType 布局方向 * @param fixedSpacing 两个item之间的间距(最左面的item和左边, 最右边item和右边都不是这个) * @param leadSpacing 第一个item到父视图边距 * @param tailSpacing 最后一个item到父视图边距 */ - (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
所以也就知道了, 将fixedSpacing, leadSpacing, tailSpacing都赋值同一个间距, 数组内的的View就会自动计算出宽度, 完成水平方向的布局.
要注意的是, 这个方法仅仅完成了水平方向的布局, 如果想确定这几个View的位置, 还需要指定竖直方向位置和高度, 这里可以用数组直接调用
mas_makeConstraints:^(MASConstraintMaker *make){}完成布局.
第二部分, 代码如下:
![](http://upload-images.jianshu.io/upload_images/2162015-f1e9484bda5f5612.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
//在红色View里面放三个正方形蓝色View, 宽度均为30, 间隙一样大 NSMutableArray *blueViews = [NSMutableArray array]; for (NSInteger i = 0; i < 3; i++) { UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [redView addSubview:blueView]; [blueViews addObject:blueView]; } CGFloat padding2 = (300 - 3 * 30) / 4; [blueViews mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:30 leadSpacing:padding2 tailSpacing:padding2]; [blueViews mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.equalTo(redView); UIView *blueView = (UIView *)blueViews[0]; make.height.mas_equalTo(blueView.mas_width); }];
这里用到了masonry提供的另一个方法, 和上一个方法基本完全一样
/** * distribute with fixed item size * * @param axisType 布局方向 * @param fixedItemLength 每个item的布局方向的长度 * @param leadSpacing 第一个item到父视图边距 * @param tailSpacing 最后一个item到父视图边距 */ - (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
区别就是这里除了布局方向, 第一个和最后一个View的边距, 这里需要指定的是每个item的长度, 自动计算间隙, 所以这个要实现等间距, 其实是要通过item的数量, 以及父视图的宽度先计算出间距, 然后赋值给, leadSpacing和tailSpacing, 比如
CGFloat padding2 = (300 - 3 * 30) / 4;这里的300就是父视图的宽度, 30是指定的每个item的宽度, 这样计算好就可以保证, leadSpacing, tailSpacing,
和item之间的间距相同, 实现布局.
同样这个方法完成了水平方向的布局, 还需要完成竖直方向的布局.
第三部分, 代码如下:
![](http://upload-images.jianshu.io/upload_images/2162015-4cc19492281e48fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
//在红色View里面放三个大小不一样的绿色正方形, 间隙等大, masonry并没提供相关方法 NSMutableArray *greenViews = [NSMutableArray array]; for (NSInteger i = 0; i < 3; i++) { UIView *greenView = [[UIView alloc] init]; greenView.backgroundColor = [UIColor greenColor]; [redView addSubview:greenView]; [greenViews addObject:greenView]; [greenView mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(redView).offset(-10); make.width.mas_equalTo(i*20 + 20); make.height.mas_equalTo(greenView.mas_width); }]; } [redView distributeSpacingHorizontallyWith:greenViews];
首先在for循环内 , 完成了底部位置, 宽, 高的布局, 还缺少水平方向的位置, 即还要确定每个view的X, 这里用到了一个UIView的分类
- (void) distributeSpacingHorizontallyWith:(NSArray*)views;
这个分类直接用的里脊串的一篇文章中的代码, 就不贴出代码了, 简单说一下原理, 如图所示:
![](http://upload-images.jianshu.io/upload_images/2162015-7611cd1ea333175e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
实现原理就是在View中创建
greenViews.count + 1个占位的View(蓝色), 之后通过布局, 使占位View与要布局的View依次排开, 左右间距为0, 同时要约束所有的占位View宽度相等, 这样看来, 这些占位View的宽度, 就是greenViews的间距, 也就可以实现等间距布局了.
至此, 我所知道的三种等间距布局方式就说完了, 具体代码见
github地址:https://github.com/CoderLXWang/HowToUseMasonry
文/CoderLXWang(简书作者)
原文链接:http://www.jianshu.com/p/2c7a5ba73fc2
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- 多态,就是重载和重写/覆盖
- Linux scp复制文件,不需要输入密码的技巧
- CentOS6.5使用阿里云源
- NOIP2010关押罪犯
- 160715_发现md文档是一个很有趣的新奇玩意儿!
- Gson 解析小技巧
- 2JSP内置对象
- 3JSP与Javabean
- 第四章 第一个rabbitmq程序
- JAVA-安装apache tomcat服务器
- error: Malformed value for push.default: 无
- 使用 adb 命令一次性为多个设备安装 apk
- 第三季亏损58亿美元 福特考虑抵押汽车制造厂
- 树状数组(暑假选拔)
- 绿色小软件
- Hudson 执行shell脚本(Hudson 启动Tomcat 无效问题)(jenkins同理)
- SPOJ4491 Primes in GCD Table 莫比乌斯反演+分块+前缀和
- linux虚拟文件系统-VFS
- static
- JavaScript 执行原理浅析