ios 屏幕适配 autolayout | Masonry 使用
设置约束的方式: 1. 通过底部的面板 2. 拖按照ctrl键,选择一个控件拖向另外一个控件 3. 在左侧菜单控件列表,选择一个控件拖向另外一个控件 4. 在右侧约束面板,设置
1. autolayout 属性设置:
autolyout 对齐方式
autolayout 相对其他控件距离、宽高、相对于其他控件宽高, 如下图属性
设置对齐方式:
A,B控件 上下左右对齐,还可中心点对齐,选择一个控件拖向另外一个控件
设置距离、宽高属性
。
2. 案例1: 设置控件水平、垂直居中
设置 垂直 水平 对齐、 设置控件宽高 【 注意:确定控件x,y坐标,以及宽、高那么久不会报红约束 存在问题】
设置 水平 垂直 居中:
设置宽高:
最终效果显示:
3. 案例2 : 设置 兄弟 View之间的 约束
A控件 设置左边、顶部、高度约束 B 控件·设置右侧、底部约束 、 设置A、B控件等高, 设置A控件 距离右侧B 控件 距离
设置A控件 左边、顶部、高度约束
B 控件设置 右侧、 底部 约束
设置 登高、等宽
设置A控件 距离右侧B 控件 距离,最终效果
3. autlayout使用小技巧
默认宽高: ImageView[设置图片以后] 、Button [文本宽高]
设置 上下左右 约束都是0 ,不行 图片会被 压缩
4. 案例4 设置兄弟View 之间约束
A控件 设置左右 约束、设置高度 B控件 设置 右对齐、上间距、 等宽、
然后设置 下面View宽度= 上面View宽度的/2
5. 案例5: 设置 按钮控件覆盖图片 按钮, 设置透明按钮, 做点击事件
1. 设置图片 垂直 、水平 居中
2. 设置宽度 图片宽度 414*736
3. 拖入按钮控件 , 盖住图片按钮
4. 设置 宽、高约束 图片控件
5. 设置 水平、垂直 使用当前位置布局, 选择 Use Current Canvas Values
6. 设置控件平分:
IOS 设置控件平分指导思想:ABCD 四个子控件 在 父控件View中
1. 拖动父 View 设置 上下右约束0,高度 120
2. 首先拖动 4个 按钮 在父 View中,作为子View
3. 然后设置第一个按钮A 上下左右 为0
第二个按钮B 上下右为0
第三个按钮C 上下右为0
第四个按钮D 上下右为0
然后选中 4个 按钮,设置等宽、等高即可
设置父控件高度包裹子控件:
1. 拖入父View, 设置左右下约束、高度(随便给)
2. 拖入三个控件设置平分A,B,C
3. 删除父View高度
4. 选择A控件,设置A控件底部等于父View底部
7. Masonry 使用
Masonry 下载以后:启动Masonry , Masonry 就是库,拖入项目中
启动Masonry IOS Example
拖入源文件的区别:
1、Create groups : 拖入的资源文件中包含其他文件夹在项目中,但是在安装目录 bundle 下不会传文件夹
导入 包: #import "Masonry.h"
2. create folder refrences: 拖入的资源文件中包含其他文件夹在项目中, 在bundle目录下也会存在真实
文件夹 #import "masonry/Masonry.h"
3. 不勾选 文件夹拖拽: 在项目中可以看到,但是打包以后不再安装包内
代码案例:
#import "ViewController.h"// 解决 mas_
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND// 解决 对数据的自动装箱
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS#warning 宏定义一定要 放到 导入头文件之前 , 不然会影响编译// 导入头文件
#import "Masonry.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];#warning Mansory 会自动的帮我们把autoresizing给关闭UIView *redView = [[UIView alloc] init];redView.backgroundColor = [UIColor redColor];[self.view addSubview:redView];/**第一种写法[redView mas_makeConstraints:^(MASConstraintMaker *make) {// make 在这里就代表被约束的view,表示距离顶部20// 顶部make.top.equalTo(self.view.mas_top).offset(20);// 设置左侧, 表示距离左侧20make.left.equalTo(self.view.mas_left).offset(20);// 设置右侧make.right.equalTo(self.view.mas_right).offset(-20);// 设置高度 , 这里使用的时候: 装箱// 这里 参数是 id 类型, 自动把 int 转化为 id 类型make.height.mas_equalTo(40);}];*//**第二种写法如果被约束view 的属性 和 参照view的属性相同的话可以省略掉[redView mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self.view).offset(20);make.left.equalTo(self.view).offset(20);make.right.equalTo(self.view).offset(-20);make.height.mas_equalTo(40);}];*/// 3. 如果想要省略掉 mas_ 导入 #define MAS_SHORTHAND// [redView makeConstraints:^(MASConstraintMaker *make) {
// make.top.equalTo(self.view).offset(20);
// make.left.equalTo(self.view).offset(20);
// make.right.equalTo(self.view).offset(-20);
// make.height.equalTo(40);
// }];/**4. 如果, 被约束view两个属性 的值是相同的, 可以连写[redView mas_makeConstraints:^(MASConstraintMaker *make) {// 距离顶部和左边make.top.left.equalTo(self.view).offset(20);make.right.equalTo(self.view).offset(-20);make.height.mas_equalTo(40);}];*//** 5. 统一设置 [redView mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.mas_equalTo(UIEdgeInsetsMake(20, 20, 20, 20));}];*///6. 默认的参照view 就是 自己的父view[redView makeConstraints:^(MASConstraintMaker *make) {make.top.left.offset(20);make.right.offset(-20);make.height.equalTo(40);}];// 7. 蓝色的viewUIView *blueView = [[UIView alloc] init];blueView.backgroundColor = [UIColor blueColor];[self.view addSubview:blueView];[blueView makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(redView.bottom).offset(20);make.right.equalTo(redView).offset(0);make.height.equalTo(redView);make.width.equalTo(redView).multipliedBy(0.5);}];/**8. 更新约束 , 在原有的基础上 , 对要更新的约束进行修改如果使用 makeConstraints 就会造成约束冲突, 把原来的约束都清空掉,设置新的[redView updateConstraints:^(MASConstraintMaker *make) {make.height.equalTo(80);}];*//**重新设置约束把原有所有的约束都清空掉, 然后设置新的[redView remakeConstraints:^(MASConstraintMaker *make) {make.height.equalTo(50);}];*/}@end
约束动画:
#import "ViewController.h"@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *redView;// 选择 右侧属性 面板 , 拖入 top 约束即可
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topMargin;@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.
}- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {// 只是设置约束self.topMargin.constant += 20;[UIView animateWithDuration:0.5 animations:^{// 执行的动画必须是可动画的 alpha , frame ,bounds, hiden// self.view 调用这个方法, 会刷新他所有的子view的约束[self.view layoutIfNeeded];}];
}@end
ios 屏幕适配 autolayout | Masonry 使用相关推荐
- IOS 屏幕适配(一)理论篇
IOS 屏幕适配(一)理论篇 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念 1.1.2 IOS 各个设备对应的分辨率 1.2 设计和开发之间的多屏适配 ...
- IOS屏幕适配(四)最新系统IOS13适配
IOS屏幕适配(四)最新系统IOS13适配 3. IOS 最新系统适配问题 3.1 IOS 13 适配 3.1.1 即将废弃的 LaunchImage 3.1.2 Sign in with Apple ...
- IOS 屏幕适配理论篇
@[TOC](IOS 屏幕适配(一)理论篇) 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念 点(Points): 是iOS开发中引入的抽象单位,称作点 ...
- IOS开发之——屏幕适配-AutoLayout布局实现(02)
一 概述 关于AutoLayout的几个概念 通过布局实现屏幕适配 二 关于AutoLayout的几个概念 2.1 什么是Autolayout Autolayout是一种"自动布局" ...
- (转)iOS 屏幕适配
参考 微信的多屏适配 目前为止,iPhone屏幕尺寸已经有四种: 3.5(inch):1/3G/3GS/4/4S 4.0(inch):5/5S/5C 4.7(inch):6 5.5(inch):6Pl ...
- iOS屏幕适配-iOS笔记
学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...
- iOS屏幕适配方案-Auto Layout
市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己 ...
- html5开发之ios屏幕适配,iOS开发屏幕尺寸以及屏幕适配等问题(转载内容)
原帖地址:http://blog.csdn.net/phunxm/article/details/42174937/ 仅供我个人收藏学习,原博主如不同意请联系qq651263878进行删除,在此表示感 ...
- iOS 屏幕适配浅谈
作者 | 钱凯 杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 前端开发的屏幕适配其实算是基本功,每个码农在长期实践中都有自己的总结. 在 iOS 平台上,苹果爸爸对适配的支持个人感觉很不 ...
最新文章
- Django+Bootstrap+Mysql 搭建个人博客(五)
- 疫情之危,和两类无人车落地之机 | 创新工场“疫情后”系列分享
- C# 计算IP段之间的IP列表
- Mysql数据库(十一)——MHA高可用集群部署及故障切换
- 使用Git前的准备工作
- Java虚拟机运行时栈帧结构--《深入理解Java虚拟机》学习笔记及个人理解(二)
- mysql 信号_MySQL
- SQL Server 高可用性(一)AlwaysOn 技术
- MSBuild 命令参数
- 投资顾问模式将改变整个基金行业
- Hulu俱乐部分享之兴趣篇
- maya2018 bonus tools - Arnold材质库1489行报错问题解决方法
- 3.汇编指令:【寻址方式】立即数寻址、寄存器寻址、存储器寻址
- Mac,Windows11,Windows10局域网互传共享文件
- 盘点番茄汁有益于身体的N多好处
- IT男拒绝枯燥系列之《漫画电子电路》!
- 编程珠玑微信公众号-算法位运算
- vue使用Echarts问题汇总
- c++ stl库中begin()和end()的区别
- Window2012 R2下 IIS的详细配置
热门文章
- 学习笔记:C++ RTTI(dynamic_casttypeid)
- vue3 element-plus el-dialog 二次封装,多层调用
- 最短路径 Dijkstra算法
- CSDN中怎么把代码块弄成背景是黑色的
- 微信更换头像和昵称,为什么登陆小程序会出现还是获取到的之前的头像和昵称?
- Angular tsconfig.json 文件里的 paths 用途
- linux服务器安装xfce,安装最新的XFCE桌面的教程
- 【TSP问题】基于变邻域搜索算法VNS求解旅行商问题附matlab代码
- pytest篇4-Fixture熟练运用
- 手机上如何批量给抖音视频加速