适配布局-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:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTopmultiplier:1 constant:padding.top],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier:1constant:padding.left],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right],
[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottomrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 constant:-padding.bottom]
]];
}
// 注：若是把右边约束去掉，改为如下语句
// [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeWidthrelatedBy: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! 简洁明了的达到了我们所要的效果
适配布局-ios的更多相关文章
- 逐帧动画抖动、适配布局、SVG Sprites
笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...
- 移动web开发之rem适配布局
移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
- ios UI 适配布局相关文章
1. http://lvwenhan.com/ios/430.html 2 . http://blog.csdn.net/liangliang103377/article/details/400822 ...
- 移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
- PostCSS的插件 -- 关于vue rem适配布局方案
PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...
- 移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
- webApp 页面适配布局
webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- (ios实战)单个ViewControl适配不同ios版本xib文件实现
xcode5 中的界面布局 根据sdk 分成ios7.0 and Later 和 ios6.1 and Earlier 两种,那如何xib同时支持 ios6 和ios7 的界面呢 方法如下: 在xco ...
随机推荐
- 使用wait()与notify()实现线程间协作
调用sleep()和yield()的时候锁并没有被释放,而调用wait()将释放锁.这样另一个任务(线程)可以获得当前对象的锁,从而进入它的synchronized方法中.可以通过notify()/n ...
- iOS UIWebView 添加tap手势 和 添加button 遇到的问题
今天应产品需求,在UIWebView 上添加一个 单机手势和双击手势,再加一个UIButton,UIButton 绑定一件事情,结果遇到了点击button 的点击事件的时候,单机手势 的响应事件,被响 ...
- docker定制化镜像的构建及基于该定制的镜像创建容器
1.在项目里创建Dockerfile(注意大小写)文件,执行构建命令:docker build -t tiny-node-1 /root/tiny-node-docker 其中tiny-node ...
- XML 详解
import urllib import requests from xml.etree import ElementTree as ET root = ET.XML(open('D:\E\seman ...
- wxPython入门练习代码 三
DoubleEventFrame.py: #!/usr/bin/env/ python import wx class DoubleEventFrame(wx.Frame): def __init__ ...
- SharePoint中报表选择
Office 365中制作报表的方式很多. 这里介绍下使用js获取SharePoint List实现报表的一种方法 资源 Jquery 1.8.2 http://blog.jquery.com/201 ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自：酷小孩】
原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...
- Android中的dp, px, pt
定义: px是像素,表示屏幕显示的最小元素单位 pt是磅数,一磅等于1/72英寸,一般用来作为字体的单位使用 问题: px和pt不使用于手机,因为同样的px在高低分辨率的手机上显示的比例不同 解决办法 ...
- Primitive JS completion of AJAX
Firstly , let us explain XMLHttpRequest open(), send(), readyState 1. open(method, url, async, user, ...