Autolayout代码编写基本使用

最新推荐文章于 2023-03-21 20:15:00 发布
最新推荐文章于 2023-03-21 20:15:00 发布
阅读量258 收藏 1
点赞数
分类专栏： Objective-C 文章标签： iOS Objective-C Autolayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013538542/article/details/100563583
版权

第一种

在这里插入图片描述
代码如下：

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];

第二种

在这里插入图片描述

UIView *redView = [[UIView alloc] init];
 redView.translatesAutoresizingMaskIntoConstraints = NO;
 redView.backgroundColor = UIColor.redColor;
 [self.view addSubview:redView];
 
 UIView *blueView = [[UIView alloc] init];
 blueView.translatesAutoresizingMaskIntoConstraints = NO;
 blueView.backgroundColor = UIColor.blueColor;
 [self.view addSubview:blueView];
 
//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//设定右边边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//创建blueView的约束
//设置redView和blueView高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的间距为20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0]];

//让blueView和redView的右对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0]];

//blueView的宽度是redView宽度的一半
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0]];

第三种

在这里插入图片描述

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

UIView *blueView = [[UIView alloc] init];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.backgroundColor = UIColor.blueColor;
[self.view addSubview:blueView];

//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//创建blueView的约束
//设置redView和blueView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置blueView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-[blueView(==redView)]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[blueView(==redView)]" options:0 metrics:metrics views:views]];

第四种

在这里插入图片描述

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

UIView *blueView = [[UIView alloc] init];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.backgroundColor = UIColor.blueColor;
[self.view addSubview:blueView];

UIView *greenView = [[UIView alloc] init];
greenView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.backgroundColor = UIColor.greenColor;
[self.view addSubview:greenView];

//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//创建blueView的约束
//设置redView和blueView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置blueView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];


//创建greenView的约束
//设置redView和greenView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和greenView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置greenView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView, greenView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-[blueView(==redView)]-(margin)-[greenView(==redView)]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[blueView(==redView)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[greenView(==redView)]" options:0 metrics:metrics views:views]];

来自我个人的网站

M.François
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layout:页面布局“简单代码”
04-09
html / css编码 页面开发“简易代码”。
常用的Layout代码结构
JUMEING的专栏
07-11 1100
在简单的看了常用的Layout的使用方式后，我们来看看Layout的代码结构。因为Layout本身做的事情比Appender单纯很多，所以Layout的代码都是非常简洁的。我们先来看看Layout类： public abstract class Layout implements OptionHandler {     abstract public String format(Logging
Android常用Layout源码总结—RelativeLayout
chidh的博客
02-09 564
文章目录前言RelativeLayout特点源码探究构造函数初始化属性设置兼容标记LayoutParams相对位置依赖关系图节点Node依赖图DependencyGraphonMeasure测量构建依赖关系图辅助变量参数准备水平方向依赖约束测量垂直方向依赖约束测量调整WrapContent情况下的宽高根据Gravity属性调整位置设置RelativeLayout自身的尺寸onLayout布局onD...
android 开发零起步学习笔记（二十五）：Android layout属性大全
ingener的专栏
01-12 1229
Android layout属性大全  第一类：属性值 true或者 false            Android:layout_centerHrizontal 水平居中 　　    android:layout_centerVertical 垂直居中 　　    android:layout_centerInparent 相对于父元素完全居中 　　    and
QT常用布局layout快速入门
wjysg8408982的博客
10-05 4247
layout继承图 用layout布局实现下面的窗口效果
Layout源码分析与总结
谷哥的小弟
03-21 1437
到这我们就可以理清楚思路了：ViewGroup首先调用了layout()确定了自己本身在其父View中的位置，然后调用onLayout()确定每个子View的位置，每个子View又会调用View的layout()方法来确定自己在ViewGroup的位置。
python-klayout
qq_43872984的博客
04-16 3508
python-klayout create layout ly = db.Layout() ly.dbu = 0.001 define layer AA = ly.layer(1, 1,“AA”) Create a cell BitCell_Unit= ly.create_cell(“BitCell_Unit”) setup CT060 instance and insert CT as instance CT060 = ly.create_cell(“CT060”) width = CD_CT060 he
Qt--布局Layout代码中的使用
路在脚下，Quick run!
09-28 521
QGridLayout
IPhone开发秘籍(第2版) 包括本书源码 第三部分 共四部分 分较少版本
08-20
IPhone开发秘籍(第2版) 包括本书源码 第三部分 共四部分 分较少版本
klayout：KLayout主要来源
02-05
布局 该存储库将保存KLayout项目的主要资源。 可以从外部源将插件包含在“ plugins”目录中。 有关更多详细信息，请参见 。 建筑要求 在Linux上构建： Qt 4.7或更高版本（4.6有一些限制）或Qt 5 gcc 4.6或更高版本或clang 3.8或更高版本 在Windows上使用MSYS2构建： 安装了gcc，Qt4或5，zlib，ruby和python软件包的MSYS2 使用MSVC 2017在Windows上构建： MSVC 2017 从klayout-kit构建需求 有关更多的构建说明，请参见 。 构建选项 Ruby ：使用此选项，可以在KLayout
LinerLayout源代码
10-12
LinerLayout源代码 LinerLayout源代码 LinerLayout源代码
用代码AutoLayout的Demo
03-02
用代码实现AutoLayout的demo，有关AutoLayout的详细讲解，请见我的博客。blog.csdn.net/hello_hwc
iOS AutoLayout的代码实现
03-02
代码实现的AutoLayout，简单的使用了VFL。
iOS中的AutoLayout使用实践总结
01-04
但在使用中也有各种各样的问题，下面就来给大家详细介绍下。 AutoLayout 问题 布局冲突 固有尺寸冲突 布局和固有尺寸冲突 主要概念 固有尺寸 intrinsicContentSize（意思就是说我知道自己的大小，如果你没有为我...
AutoLayOut使用总结
08-10
AutoLayOut入门，适用于初学者，包括xib约束和代码约束
给AutoLayout增加可读性减少代码量
04-04
这个案例解决了给AutoLayout增加可读性减少代码量，源码Lyt，Lyt是一些UIView、NSView和NSArray的集合，旨在给AutoLayout增加可读性并减少代码量，支持iOS和OS X平台。 特性： 更加语义化与更少的代码
iOS攻防 - （三）iOS应用的代码打包前混淆，不影响源代码
热门推荐
VictorZhang
05-05 1万+
iOS攻防 - （三）iOS应用的代码打包前混淆，不影响源代码 出于iOS应用的安全考虑，如：银行类型APP, 金融相关APP, 登录功能，支付功能等； 某些时候，我们需要对iOS应用的重要函数或名称进行混淆，因为即使是App Store下载的应用亦可以使用class-dump进行导出应用的所有头文件，这就太不安全了。为了加大程序结构的逆向或破解难度，此文讲解如何对iOS应用的源代码进
iOS 继续播放或暂时其他app的背景音乐
VictorZhang
04-05 1万+
问题：当我们自己开发的应用要使用AVAudioSession时，可能会中断其它应用的音乐播放，例如：QQ音乐，酷我音乐等？ 解决方案：当我们自己开发的应用播放时，暂停其他应用的播放，当我们的应用播放完毕时，继续其他应用的播放，实现代码如下 #import "VLAudioSessionControl.h" #import @implementation VLAudioSes
iOS Charles 抓包指南 - 从入门到精通
VictorZhang
01-19 1万+
iOS Charles 抓包指南 以下那知乎的请求举例子 步骤 Step 1: 安装 Charles 从 https://www.charlesproxy.com/download/ 下载安装 Charles 最新版。 Step 2: 注册 License Charles -> Help -> Register Charles Registered name: 你购...
unity2d自动布局代码实现
最新发布
01-30
在Unity 2D中，可以通过代码来实现自动布局，其中可以使用Unity的RectTransform组件来控制UI元素的位置和大小。以下是一个简单的例子： 首先，我们需要在Unity中创建一个空的GameObject，并且将其命名为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值