设置约束的方式: 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 使用相关推荐

  1. IOS 屏幕适配(一)理论篇

    IOS 屏幕适配(一)理论篇 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念 1.1.2 IOS 各个设备对应的分辨率 1.2 设计和开发之间的多屏适配 ...

  2. IOS屏幕适配(四)最新系统IOS13适配

    IOS屏幕适配(四)最新系统IOS13适配 3. IOS 最新系统适配问题 3.1 IOS 13 适配 3.1.1 即将废弃的 LaunchImage 3.1.2 Sign in with Apple ...

  3. IOS 屏幕适配理论篇

    @[TOC](IOS 屏幕适配(一)理论篇) 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念 点(Points): 是iOS开发中引入的抽象单位,称作点 ...

  4. IOS开发之——屏幕适配-AutoLayout布局实现(02)

    一 概述 关于AutoLayout的几个概念 通过布局实现屏幕适配 二 关于AutoLayout的几个概念 2.1 什么是Autolayout Autolayout是一种"自动布局" ...

  5. (转)iOS 屏幕适配

    参考 微信的多屏适配 目前为止,iPhone屏幕尺寸已经有四种: 3.5(inch):1/3G/3GS/4/4S 4.0(inch):5/5S/5C 4.7(inch):6 5.5(inch):6Pl ...

  6. iOS屏幕适配-iOS笔记

    学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...

  7. iOS屏幕适配方案-Auto Layout

    市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己 ...

  8. html5开发之ios屏幕适配,iOS开发屏幕尺寸以及屏幕适配等问题(转载内容)

    原帖地址:http://blog.csdn.net/phunxm/article/details/42174937/ 仅供我个人收藏学习,原博主如不同意请联系qq651263878进行删除,在此表示感 ...

  9. iOS 屏幕适配浅谈

    作者 | 钱凯 杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 前端开发的屏幕适配其实算是基本功,每个码农在长期实践中都有自己的总结. 在 iOS 平台上,苹果爸爸对适配的支持个人感觉很不 ...

最新文章

  1. Django+Bootstrap+Mysql 搭建个人博客(五)
  2. 疫情之危,和两类无人车落地之机 | 创新工场“疫情后”系列分享
  3. C# 计算IP段之间的IP列表
  4. Mysql数据库(十一)——MHA高可用集群部署及故障切换
  5. 使用Git前的准备工作
  6. Java虚拟机运行时栈帧结构--《深入理解Java虚拟机》学习笔记及个人理解(二)
  7. mysql 信号_MySQL
  8. SQL Server 高可用性(一)AlwaysOn 技术
  9. MSBuild 命令参数
  10. 投资顾问模式将改变整个基金行业
  11. Hulu俱乐部分享之兴趣篇
  12. maya2018 bonus tools - Arnold材质库1489行报错问题解决方法
  13. 3.汇编指令:【寻址方式】立即数寻址、寄存器寻址、存储器寻址
  14. Mac,Windows11,Windows10局域网互传共享文件
  15. 盘点番茄汁有益于身体的N多好处
  16. IT男拒绝枯燥系列之《漫画电子电路》!
  17. 编程珠玑微信公众号-算法位运算
  18. vue使用Echarts问题汇总
  19. c++ stl库中begin()和end()的区别
  20. Window2012 R2下 IIS的详细配置

热门文章

  1. 学习笔记:C++ RTTI(dynamic_casttypeid)
  2. vue3 element-plus el-dialog 二次封装,多层调用
  3. 最短路径 Dijkstra算法
  4. CSDN中怎么把代码块弄成背景是黑色的
  5. 微信更换头像和昵称,为什么登陆小程序会出现还是获取到的之前的头像和昵称?
  6. Angular tsconfig.json 文件里的 paths 用途
  7. linux服务器安装xfce,安装最新的XFCE桌面的教程
  8. 【TSP问题】基于变邻域搜索算法VNS求解旅行商问题附matlab代码
  9. pytest篇4-Fixture熟练运用
  10. 手机上如何批量给抖音视频加速