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

相关文章

Java Predicate接口定义详解

《JavaPredicate接口定义详解》Predicate是Java中的一个函数式接口,它代表一个判断逻辑,接收一个输入参数,返回一个布尔值,:本文主要介绍JavaPredicate接口的定义... 目录Java Predicate接口Java lamda表达式 Predicate<T>、BiFuncti

详解如何通过Python批量转换图片为PDF

《详解如何通过Python批量转换图片为PDF》:本文主要介绍如何基于Python+Tkinter开发的图片批量转PDF工具,可以支持批量添加图片,拖拽等操作,感兴趣的小伙伴可以参考一下... 目录1. 概述2. 功能亮点2.1 主要功能2.2 界面设计3. 使用指南3.1 运行环境3.2 使用步骤4. 核

一文详解JavaScript中的fetch方法

《一文详解JavaScript中的fetch方法》fetch函数是一个用于在JavaScript中执行HTTP请求的现代API,它提供了一种更简洁、更强大的方式来处理网络请求,:本文主要介绍Jav... 目录前言什么是 fetch 方法基本语法简单的 GET 请求示例代码解释发送 POST 请求示例代码解释

详解nginx 中location和 proxy_pass的匹配规则

《详解nginx中location和proxy_pass的匹配规则》location是Nginx中用来匹配客户端请求URI的指令,决定如何处理特定路径的请求,它定义了请求的路由规则,后续的配置(如... 目录location 的作用语法示例:location /www.chinasem.cntestproxy

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,:本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.

详解C++中类的大小决定因数

《详解C++中类的大小决定因数》类的大小受多个因素影响,主要包括成员变量、对齐方式、继承关系、虚函数表等,下面就来介绍一下,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 非静态数据成员示例:2. 数据对齐(Padding)示例:3. 虚函数(vtable 指针)示例:4. 继承普通继承虚继承5.

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使