Masonry自适应屏幕

 1 #import "RootViewController.h"
 2 #import "Masonry.h"
 3 @interface RootViewController ()
 4
 5 @end
 6
 7 @implementation RootViewController
 8
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11
12 #pragma mark lable
13     // 添加约束,不需要设置frame
14     UILabel *lable = [UILabel new];
15     lable.backgroundColor = [UIColor redColor];
16     // 添加到父视图, 视图添加完成后才能进行布局
17     [self.view addSubview:lable];
18     // 布局, 实现布局方法
19     [lable mas_makeConstraints:^(MASConstraintMaker *make) {
20
21         // 距离上面50 (参照系统的可以不写)自定义的要写-----括号里面
22         // make: 相当于你要布局的视图
23         // equalTo(参照视图对象), 如果参照视图是self.view.可以不设置参照视图的属性
24         // offset(距离数值)
25         make.top.equalTo(self.view).offset(50);
26         // 距离左边100
27         make.left.equalTo(self.view).offset(100);
28         // 距离右边100
29         make.right.equalTo(self.view).offset(-100);
30         // 距离下边500
31         make.bottom.equalTo(self.view).offset(-500);
32
33
34     }];
35
36 #pragma mark lable1
37
38     UILabel *lable1 = [UILabel new];
39     lable1.backgroundColor = [UIColor greenColor];
40     [self.view addSubview:lable1];
41     // 先布局参照视图, 否则约束容易丢失
42     [lable1 mas_makeConstraints:^(MASConstraintMaker *make) {
43         // 布局lable1 和lable左边一致
44         // equalTo (自定义视图), 需要设置视图属性
45         // 如果数值为0,可以不写offset()
46         make.leading.equalTo(lable.mas_leading);
47
48          // 布局lable1 和lable右边一致
49         make.trailing.equalTo(lable.mas_trailing);
50         // 上边距离Lable1 50
51         make.top.equalTo(lable.mas_bottom).offset(50);
52
53         // 高度60
54         make.height.mas_equalTo(60);
55     }];
56 #pragma mark lable2
57
58     UILabel *lable2 = [UILabel new];
59     lable2.backgroundColor = [UIColor cyanColor];
60     [self.view addSubview:lable2];
61     // 结构体(内边距)
62     // 设置距离参照视图的内边距(上左下右)
63     UIEdgeInsets pading = UIEdgeInsetsMake(400, 100, 100, 100);
64
65     [lable2 mas_makeConstraints:^(MASConstraintMaker *make) {
66
67 //        make.leading.equalTo(self.view).offset(100);
68 //        make.trailing.equalTo(self.view).offset(-100);
69 //        make.bottom.equalTo(self.view).offset(-100);
70 //        make.top.equalTo(self.view).offset(400);
71         // 设置约束视图的边界距离self.view的边界值
72         make.edges.equalTo(self.view).insets(pading);
73
74
75     }];
76
77 #pragma mark lable3
78
79     UILabel *lable3 = [UILabel new];
80     lable3.backgroundColor = [UIColor orangeColor];
81     [self.view addSubview:lable3];
82     [lable3 mas_makeConstraints:^(MASConstraintMaker *make) {
83
84         // 设置中心点一致
85         make.center.equalTo(lable2);
86         // 设置大小
87         // make.width = lable2.width - 40
88         // make.height = labele2.height - 60
89         make.size.equalTo(lable2).sizeOffset(CGSizeMake(-40, -60));
90     }];
91 }
时间: 2024-11-05 14:53:02

Masonry自适应屏幕的相关文章

iframe去滚动条+自适应屏幕大小

iframe去滚动条 <iframe name="myFrame" id="myFrame" frameborder="0" src="tab.action" style="margin:0 auto;width:100%;height:100%;" scrolling="no"></iframe> iframe自适应屏幕大小 function resetIfra

20160622 html5移动页面自适应屏幕宽度

html5移动页面自适应屏幕宽度 1.使用meta标签,在头部加入下面代码 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 2.用百分比,‘百’指的是父元素,这只适合布局简单的页面,复杂的页面实现很困难. 3.用CSS相对单位rem. 4.媒体查询@m

2015.3.10(自适应屏幕和弹性布局)

今天做的练习是自适应屏幕大小,遇到了一些困难,困难在于我以前用CSS布局的时候都是使用PX作为单位来进行定位布局. 但今天把网页拓展实验到了我家的电视(42寸)上,此时就出现了问题,问题之一就是:没有办法填充满屏幕,只能出现一个屏中屏,看起来非常的别扭. 试验了纯CSS来做到自适应屏幕和用JS获取屏幕大小然后计算比例填写在CSS中两种方法均不是很满意,问题直到现在也没有解决,在问题解决之前先把这个问题解决过程记录下来. html部分的代码是这样的 CSS部分的代码是这样的: body{ font

Android -- Webview自适应屏幕

第一种                                                                                          WebSetting settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 把所有内容放在webview等宽的一列中.(可能会出现页面中链接失效) 第二种             

Android webView 支持缩放及自适应屏幕

//支持javascript web.getSettings().setJavaScriptEnabled(true); // 设置可以支持缩放 web.getSettings().setSupportZoom(true); // 设置出现缩放工具 web.getSettings().setBuiltInZoomControls(true); //扩大比例的缩放 web.getSettings().setUseWideViewPort(true); //自适应屏幕 web.getSettings

自适应屏幕宽度的居中布局

div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;} .center{ background:#333; margin:0 100px; _margin:0 97px;} <div class="lef

Android 中Webview 自适应屏幕

随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕 webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的几种方法 第一种方法: WebSettings settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorith

android 应用程序自适应屏幕大小(转载)

android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样).在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等.需要适应那种分辨率就写成什么.注意:         a.   较大的数字要写在前面:比如layout-854x480而不能写layout-480x854.         b.   两个数字之前是小写字母x,而不是乘号.2. 在不能的layout下调整layout 的长宽等各种设置.以适应不同的分辨率

ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度

1 .ios navigationcontroller 滑动返回 滑动返回是navigationcontroller默认返回按钮自带的功能,如果返回按钮自定义该功能失效, 解决的办法有两个: ① self.navigationItem.backBarButtonItem =   [[UIBarButtonItem alloc]initWithCustomView:button];//这个方法用不了 只能用 self.navigationItem.backBarButtonItem = [ [UI