- iOS开发中用imageIO渐进加载图片及获取exif的方法
- 详解iOS多线程（转载）
- iOS中使用Reachability检测网络
- OC--(1)--类和对象：Objective-C概述、面向对象编程、类和对象、实例变量操作
- iOSProgrammingCamera1
- 开发经验:对AFN和ASI各自使用方法及区别的总结
- 详解iOS开发中UITableview cell 顶部空白的多种设置方法
- UI类的继承关系
- json字符串跟objective-c模型的相互转换
- 新版网易新闻客户端应用iOS源码
- 简单讲解iOS应用开发中的MD5加密的相关使用
- 从零开始学ios开发（十八）：Storyboards（下）
- HarestGame史上最难游戏源码v2.0
- IOS字符串的处理例子
- OSChina上部署项目—iOS
- ARC下内存泄露问题
- (3/18)重学Standford_iOS7开发_Objective-C_课程笔记
- objective中static的使用和注意事项
- iOSUITextField的全解
- OC-9.使用Quartz2D绘制下载进度条
- iOS开发之用javascript调用oc方法而非url
- 浅谈iOS调试技巧的实际应用(一)
- 深入了解iOS开发中UIWindow的相关使用
- 详解iOS时间选择框
- 【学习笔记】【OC语言】set方法和get方法
- Dollars即时聊天客户端应用源码
- 高仿百度传课应用客户端源码iOS版
- OC-2.OC基础知识介绍
- IOS开发环境windows化攻略
- iOS多线程实现3-GCD
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(10, 10, 10, 10);
[superView addConstraints:@[
// viewDemo顶部距离父视图superView顶部距离为padding.top(即为：10)，
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTop multiplier:1 constant:padding.top],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier:1 constant:padding.left],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 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:0 metrics:nil views:constraintDict];
// vertical： 垂直方向距顶部30，控件高度100
NSArray *vConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[viewLeft(100)]" options:0 metrics:nil views:constraintDict];
// 添加到父视图上
[self.view addConstraints:hConstraintArrayLeft];
[self.view addConstraints:vConstraintArrayLeft];
NSArray *hConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewRight]-(10)-|" options:0 metrics:nil views:constraintDict];
// viewRight距viewLeft的垂直距离为50
NSArray *vConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewLeft]-(50)-[viewRight(200)]" options:0 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(自动计算其宽度)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
@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
|
简单的来测试一下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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
若有侵权，请告知
- 上一篇文章： GPUImage简单滤镜使用（一）
- 下一篇文章： iOS-----多线程之NSThread