AutoLayout详解

2024-05-14 02:08
文章标签 详解 autolayout

本文主要是介绍AutoLayout详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在一些群里看到很多朋友还是停留在Frame布局的痛苦时代,今天小编在这里和你讲述一下苹果推荐的布局方式AutoLayout.

AutoLayout是什么?

Autolayout是一种布局技术,专门用来布局UI界面的。用来取代Frame布局在遇见屏幕尺寸多重多样的不足
Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大的推广
在iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能轻松的解决屏幕适配的问题

AutoLayout很难?

起初我也觉得它很难,各种约束不知道怎么添加,也挺抽象的,不过现在这方面的资料也是很多了,还有大牛编写了一些用代码自动布局的第三方库。这里小编将讲述的是在storyboard中设置约束,希望能让你们有所收获!

AutoLayout从何下手?
首先创建一个空的工程,这里过于简单,就不加以描述了。这里写图片描述

自从Xcode6之后 你会发现storyboard中任何一个ViewController的View非常大,跟任何一个iPhone iPad的尺寸都不一样 ,这些都是 假象 假象 假象(重要的事情说三遍),但是如果你在view上放了一个label,然后不设置任何约束的话,可能你会惊讶,为什么我明明把label放在了view的中间,为什么运行出来的结果是不一样的呢?至于这个问题的回答,你们自己去领悟吧。
我们回顾一下以前用Frame布局的时候,需要些什么元素:
(x,y,width,height)这里的4个元素缺了一个都不行。那么同样,使用AutoLayout布局,同样也需要确定一个view的X,Y,W,H 。少一个都不行(此处不讨论带有内建高度的控件)。

Demo1.某个view距离父view上下左右的距离都是30
这里写图片描述

请注意我这里把Constrain to margins 的勾给去掉了,如果不去掉的话,它会在手机上自带有左右边距。另外我这里把距离上面的, 也就是Top LayoutGuide的约束改成了距离控制器的View,为什么?
因为Top LayoutGuide是晚于View加载的,如果参考这个会造成进入页面会卡一下 ,尽量不要直接参考上面 Top LayoutGuide 则没事,同样上面的Bottom LayoutGuide也改了。
加完约束你会发现貌似并没有什么效果?
不是的,屏幕中出现的黄色的线条 这是IB在提升我们你所添加的约束。接下来运行试试

这里写图片描述

Demo2.某个View距离在父View的左侧30 上30 宽高为 50 ,50
这里写图片描述

注意这里我对第二个view添加约束的时候,选择了上,左,然后固定宽,高。还有就是autolayout的核心就是参照,既然我们想让第二个view在父view的左30,上30,那么我们约束的时候选择的参照物是父view,在这个例子中,参照的是蓝色的那个父view。

运行结果:
这里写图片描述

Demo3 某个View距离在父View的左侧30,与demo2中紫色View 下边20 宽高和Demo2中的宽高一样
这里写图片描述

这里给大家说点其他的,如果在storyboard中某个view的子view太多的话,我们可以给它起一个别名,然后我们如果是想对两个view进行等宽和等高约束的话,选中两个view,然后勾选等宽,等高的约束即可

运行结果:
这里写图片描述

Demo4 假设某个View距离父View右上角30 ,30 宽高比 2:1 宽100
这里写图片描述

这个例子中可以看出我们可以修改已经添加好的约束值。比如这里默认的比例出来的是15:8,并不是我们想要的2:1,我们就可以对约束值进行修改。

运行结果:
这里写图片描述

好了,各位看官看到这里估计就会觉得原来autoLayout也并没有想象中的那么难了,当然这里的例子也是比较单一的,而且还没有添加任何动画。不过,有了这些基础才能够更快的吸收难一点的呀。如果有任何疑问,欢迎联系!

这篇关于AutoLayout详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/987454

相关文章

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

SQL注入漏洞扫描之sqlmap详解

《SQL注入漏洞扫描之sqlmap详解》SQLMap是一款自动执行SQL注入的审计工具,支持多种SQL注入技术,包括布尔型盲注、时间型盲注、报错型注入、联合查询注入和堆叠查询注入... 目录what支持类型how---less-1为例1.检测网站是否存在sql注入漏洞的注入点2.列举可用数据库3.列举数据库

Linux之软件包管理器yum详解

《Linux之软件包管理器yum详解》文章介绍了现代类Unix操作系统中软件包管理和包存储库的工作原理,以及如何使用包管理器如yum来安装、更新和卸载软件,文章还介绍了如何配置yum源,更新系统软件包... 目录软件包yumyum语法yum常用命令yum源配置文件介绍更新yum源查看已经安装软件的方法总结软

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》:本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni

Java访问修饰符public、private、protected及默认访问权限详解

《Java访问修饰符public、private、protected及默认访问权限详解》:本文主要介绍Java访问修饰符public、private、protected及默认访问权限的相关资料,每... 目录前言1. public 访问修饰符特点:示例:适用场景:2. private 访问修饰符特点:示例:

python管理工具之conda安装部署及使用详解

《python管理工具之conda安装部署及使用详解》这篇文章详细介绍了如何安装和使用conda来管理Python环境,它涵盖了从安装部署、镜像源配置到具体的conda使用方法,包括创建、激活、安装包... 目录pytpshheraerUhon管理工具:conda部署+使用一、安装部署1、 下载2、 安装3

详解Java如何向http/https接口发出请求

《详解Java如何向http/https接口发出请求》这篇文章主要为大家详细介绍了Java如何实现向http/https接口发出请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用Java发送web请求所用到的包都在java.net下,在具体使用时可以用如下代码,你可以把它封装成一

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

mac中资源库在哪? macOS资源库文件夹详解

《mac中资源库在哪?macOS资源库文件夹详解》经常使用Mac电脑的用户会发现,找不到Mac电脑的资源库,我们怎么打开资源库并使用呢?下面我们就来看看macOS资源库文件夹详解... 在 MACOS 系统中,「资源库」文件夹是用来存放操作系统和 App 设置的核心位置。虽然平时我们很少直接跟它打交道,但了

关于Maven中pom.xml文件配置详解

《关于Maven中pom.xml文件配置详解》pom.xml是Maven项目的核心配置文件,它描述了项目的结构、依赖关系、构建配置等信息,通过合理配置pom.xml,可以提高项目的可维护性和构建效率... 目录1. POM文件的基本结构1.1 项目基本信息2. 项目属性2.1 引用属性3. 项目依赖4. 构