Layout--iOS

// 系统的约束代码

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    UIView *superView = self.view;

    UIView *viewDemo = [[UIView alloc] init];

    viewDemo.translatesAutoresizingMaskIntoConstraints = NO;

    viewDemo.backgroundColor = [UIColor orangeColor];

    [superView addSubview:viewDemo];

    UIEdgeInsets padding = UIEdgeInsetsMake(, , , );

    [superView addConstraints:@[

　　　　　　　　　　　// viewDemo顶部距离父视图superView顶部距离为padding.top(即为：10)，

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTop multiplier: constant:padding.top],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier: constant:padding.left],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier: constant:-padding.right],

                               [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier: constant:-padding.bottom]

                               ]];

}

// 注：若是把右边约束去掉，改为如下语句

// [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]

// 则viewDemo的宽度变为superView的0.5倍！！

//***************************************************

// VFL语言

　 UIView *viewLeft = [[UIView alloc] init];

    viewLeft.translatesAutoresizingMaskIntoConstraints = NO;

    viewLeft.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:viewLeft];

    UIView *viewRight = [[UIView alloc] init];

    viewRight.translatesAutoresizingMaskIntoConstraints = NO;

    viewRight.backgroundColor = [UIColor redColor];

    [self.view addSubview:viewRight];

    // horizontal：水平方向距左边10，距右边10

    //简单说来，NSDictionaryOfVariableBindings(scrollView)就等于@{@”scrollView”: scrollView}

    NSDictionary *constraintDict = NSDictionaryOfVariableBindings(viewLeft,viewRight);

    NSArray *hConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewLeft]-(10)-|" options: metrics:nil views:constraintDict];

    // vertical： 垂直方向距顶部30，控件高度100

    NSArray *vConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[viewLeft(100)]" options: metrics:nil views:constraintDict];

    // 添加到父视图上

    [self.view addConstraints:hConstraintArrayLeft];

    [self.view addConstraints:vConstraintArrayLeft];

    NSArray *hConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewRight]-(10)-|" options: metrics:nil views:constraintDict];

    // viewRight距viewLeft的垂直距离为50

    NSArray *vConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewLeft]-(50)-[viewRight(200)]" options: metrics:nil views:constraintDict];

    [self.view addConstraints:hConstraintArrayRight];

    [self.view addConstraints:vConstraintArrayRight];

//***************************************************

// 三方库：Masonry

// 居中

// 快速定义一个weakSelf，用于block里面，防止循环引用

#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self

WS(ws);

UIView *sv = [UIView new];

sv.backgroundColor = [UIColor orangeColor];

// 在做autoLayout之前一定要先将view添加到superView上否则会报错

[self.view addSubview:sv];

[sv mas_makeConstraints:^(MASConstraintMaker *make) {

// 居中

make.center.equalTo(ws.view);

// 设置size

make.size.mas_equalTo(CGSizeMake(300, 300));

}];

3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列间隔为10(自动计算其宽度)

int padding1 = 10;

[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv.mas_left).with.offset(padding1);

make.right.equalTo(sv3.mas_left).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv3);

}];

[sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv2.mas_right).with.offset(padding1);

make.right.equalTo(sv.mas_right).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv2);

}];

代码效果

这里我们在两个子view之间互相设置的约束可以看到他们的宽度在约束下自动的被计算出来了

4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

UIScrollView *scrollView = [UIScrollView new];

scrollView.backgroundColor = [UIColor whiteColor];

[sv addSubview:scrollView];

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));

}];

UIView *container = [UIView new];

[scrollView addSubview:container];

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(scrollView);

make.width.equalTo(scrollView);

}];

int count = 10;

UIView *lastView = nil;

for ( int i = 1 ; i <= count ; ++i )

{

UIView *subv = [UIView new];

[container addSubview:subv];

subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )

saturation:( arc4random() % 128 / 256.0 ) + 0.5

brightness:( arc4random() % 128 / 256.0 ) + 0.5

alpha:1];

[subv mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.and.right.equalTo(container);

make.height.mas_equalTo(@(20*i));

if ( lastView )

{

make.top.mas_equalTo(lastView.mas_bottom);

}

else

{

make.top.mas_equalTo(container.mas_top);

}

}];

lastView = subv;

}

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(lastView.mas_bottom);

}];

头部效果

尾部效果

从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了

这里的关键就在于container这个view起到了一个中间层的作用能够自动的计算uiscrollView的contentSize

5. [高级] 横向或者纵向等间隙的排列一组view

很遗憾 autoLayout并没有直接提供等间隙排列的方法(Masonry的官方demo中也没有对应的案例) 但是参考案例3 我们可以通过一个小技巧来实现这个目的为此我写了一个Category

@implementation UIView(Masonry_LJC)

- (void) distributeSpacingHorizontallyWith:(NSArray*)views

{

NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

for ( int i = 0 ; i < views.count+1 ; ++i )

{

UIView *v = [UIView new];

[spaces addObject:v];

[self addSubview:v];

[v mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(v.mas_height);

}];

}

UIView *v0 = spaces[0];

__weak __typeof(&*self)ws = self;

[v0 mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(ws.mas_left);

make.centerY.equalTo(((UIView*)views[0]).mas_centerY);

}];

UIView *lastSpace = v0;

for ( int i = 0 ; i < views.count; ++i )

{

UIView *obj = views[i];

UIView *space = spaces[i+1];

[obj mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(lastSpace.mas_right);

}];

[space mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(obj.mas_right);

make.centerY.equalTo(obj.mas_centerY);

make.width.equalTo(v0);

}];

lastSpace = space;

}

[lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.equalTo(ws.mas_right);

}];

}

- (void) distributeSpacingVerticallyWith:(NSArray*)views

{

NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

for ( int i = 0 ; i < views.count+1 ; ++i )

{

UIView *v = [UIView new];

[spaces addObject:v];

[self addSubview:v];

[v mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(v.mas_height);

}];

}

UIView *v0 = spaces[0];

__weak __typeof(&*self)ws = self;

[v0 mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(ws.mas_top);

make.centerX.equalTo(((UIView*)views[0]).mas_centerX);

}];

UIView *lastSpace = v0;

for ( int i = 0 ; i < views.count; ++i )

{

UIView *obj = views[i];

UIView *space = spaces[i+1];

[obj mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(lastSpace.mas_bottom);

}];

[space mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(obj.mas_bottom);

make.centerX.equalTo(obj.mas_centerX);

make.height.equalTo(v0);

}];

lastSpace = space;

}

[lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(ws.mas_bottom);

}];

}

@end

简单的来测试一下

UIView *sv11 = [UIView new];

UIView *sv12 = [UIView new];

UIView *sv13 = [UIView new];

UIView *sv21 = [UIView new];

UIView *sv31 = [UIView new];

sv11.backgroundColor = [UIColor redColor];

sv12.backgroundColor = [UIColor redColor];

sv13.backgroundColor = [UIColor redColor];

sv21.backgroundColor = [UIColor redColor];

sv31.backgroundColor = [UIColor redColor];

[sv addSubview:sv11];

[sv addSubview:sv12];

[sv addSubview:sv13];

[sv addSubview:sv21];

[sv addSubview:sv31];

//给予不同的大小测试效果

[sv11 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.equalTo(@[sv12,sv13]);

make.centerX.equalTo(@[sv21,sv31]);

make.size.mas_equalTo(CGSizeMake(40, 40));

}];

[sv12 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(70, 20));

}];

[sv13 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(50, 50));

}];

[sv21 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(50, 20));

}];

[sv31 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(40, 60));

}];

[sv distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];

[sv distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];

[sv showPlaceHolderWithAllSubviews];

[sv hidePlaceHolder];

代码效果

perfect! 简洁明了的达到了我们所要的效果

这里所用的技巧就是使用空白的占位view来填充我们目标view的旁边这点通过图上的空白标注可以看出来

引自：http://www.cocoachina.com/ios/20141219/10702.html

若有侵权，请告知

Layout--iOS的更多相关文章

Interface Builder: What are the UIView's Layout iOS 6/7 Deltas for?
up vote57down votefavorite 19 I just noticed the iOS 6/7 Delta property found under the UIView's str ...
iOS Programming Auto Layout: Programmatic Constraints 自动布局：通过编程限制
iOS Programming Auto Layout: Programmatic Constraints 1. However, if your views are created in co ...
[Android开发学iOS系列] Auto Layout
[Android开发学iOS系列] Auto Layout 内容: 介绍什么是Auto Layout. 基本使用方法在代码中写约束的方法 Auto Layout的原理尺寸和优先级 Auto Lay ...
iOS 强大第三方资源库
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 giti ...
iOS 第三方库、插件、知名博客总结
iOS 第三方库.插件.知名博客总结用到的组件 1.通过CocoaPods安装项目名称项目信息 AFNetworking 网络请求组件 FMDB 本地数据库组件 SDWebImage 多个缩略图 ...
AutoLayout ＋Masonary
1, Masonry介绍与使用实践(快速上手Autolayout) http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayou ...
Topics
Topics Introduction (starting with old devices) How to handle a new Firmware How to set up your Mac ...
iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束
http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...
The Layout Process on Mac OSX and iOS
First we will recap the steps it takes to bring views on screen with Auto Layout enabled. When you’r ...
ios auto layout demystified (一)
Ambiguous Layout 在开发过程中,你可以通过调用hasAmbiguousLayout 来测试你的view约束是否足够的.这个会返回boolean值.如果有一个不同的frame就会返回ye ...

随机推荐

CSS魔法堂：Absolute Positioning就这个样
前言当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...
Hive SQL 监控系统 - Hive Falcon
1.概述在开发工作当中,提交 Hadoop 任务,任务的运行详情,这是我们所关心的,当业务并不复杂的时候,我们可以使用 Hadoop 提供的命令工具去管理 YARN 中的任务.在编写 Hive SQ ...
【原创】Kakfa utils源代码分析(三)
Kafka utils包最后一篇~~~ 十五.ShutdownableThread.scala 可关闭的线程抽象类! 继承自Thread同时还接收一个boolean变量isInterruptible表 ...
解决在IE中获取数据的缓存问题，运行环境为node.js
IE下默认会开启缓存策略,不管是页面还是通过ajax请求的数据都会议一个url,url是uri(统一资源定位符)的实例,url就是资源的标识符. 写一个demo进行验证,测试环境:IE8,node.j ...
Sandcastle入门：创建C#帮助文档
Sandcastle入门:创建C#帮助文档今天学到了一个东西:利用vs2005生成的dll/xml来生成帮助文档. 完成这个伟大任务的是Sandcastle,微软推出的类库文档编译工具. 在开始这篇 ...
基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
c# TCP Socket通讯基础
在做网络通讯方面的程序时,必不可少的是Socket通讯. 那么我们需要有一套既定的,简易的通讯流程. 如下: <pre name="code" class="csh ...
基础复习关于JS
1,js是一门解释型语言,无需编译,编写js要知道当前对象有什么成员,未必所有成员都能点出来. 2,js大小写敏感,严格区分大小写. 3,弱类型语言,声明用var,字符串推荐使用单引号. 4,==要先 ...
ASP.NET MVC 网站开发总结（七）——C#操作图片：多张图的拼接（旋转）
其实用C#来操作图片的拼接就是在用Graphic画图.个人感觉还是挺有趣的,各种类库提供了丰富多彩的功能. 源代码(移植到一个简单的C#程序中,并没有放在ASP.NET项目中): using Syst ...
.NET invoke NetSuite Restlet
Please indicate the source if you need to repost. Restlet allows programmers to use the http request ...

Layout--iOS

Layout--iOS的更多相关文章

随机推荐

热门专题