IOS AutoLayout详解(二)-多动图详解

2024-02-28 23:48

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

原创Blog,转载请注明出处 
blog.csdn.net/hello_hwc


前言:

上一篇文章介绍了一些讲解AutoLayout的准备知识,这一篇文章继续讲解用Storyboard来创建AutoLayout。下一篇文章会讲解下用Code来创建Storyboard。


用Control+Drag的方式来创建


- 对于一个View相对于SuperView的约束,Control+鼠标拖拽到Superview 
- 对于两个View之间,Control+鼠标拖拽到另一个view 

举个例子: 
我想要实现这个效果 
 
过程如下 
第一步 
拖拽一个ImageView,依照蓝色线参考线放到View中心,然后Control+drag,为ImageView添加两个约束,让其在水平和垂直方向上都在View的中心 
如下动图 


第二步 
Control+drag这个imageview至其自身,添加Width和Hight恒定的约束。 
 
这样,ImageView的约束就建立了。如果建立之后出现警告,可以选择如下图 
 
点击Update Frames。XCode会依照约束来为我们更新View的Frame。


第三步,拖拽两个Button,然后建立约束,我想要Button分别在ImageView的两个角落。注意,拖拽的时候要依照参考蓝色线。 
过程如下动图 
 
对Button2也采用同样的方式,这时候我们就大功告成,完成了想要的。

当然,control+drag可以创建的不止是这些,读者在实际开发的过程中进行拖拽就能找到想要的约束选项


不要忘记,在大纲里也可以拖拽

这一点在Storyboard上View比较多的时候,尤其好用。 
拖拽到自身如图: 
 
Button1拖拽到Button2如图 


用XCode的一些按键来创建(推荐方式)

这种方式是我比较喜欢的,因为拖拽的方式有时候拖拽不好很揪心。 
这些按键在这个位置 
 
然后,我用这些按键创建和上文一样的约束 
一 为ImageView创建约束

  • 让其在View中心

选中ImageView 
这里写图片描述


  • 添加高度宽度不变 
    选中ImageView 
    这里写图片描述

  • 为Button1添加约束,让其距离ImageView的垂直距离为8(默认控件距离) 
    选中Button1 
    这里写图片描述

  • 为Button1添加约束,让其和ImageView头部对齐 
    选中Button1和Imageview 
    这里写图片描述

同理,为Button2对其,只不过Button2的对齐方式是尾部对齐,如果出现警告⚠信息,则updateFrame 
这里写图片描述


最后,简单讲解下各个按键的功能 
第一个用来处理对齐方式

注意有些对齐市两个View之间的,要同时选择两个View 


红色圈圈的部分是形象的描述图 


第二个处理距离信息,比如距离相邻控件的距离不变,宽度不变,比如在resize的时候,两个view的高度保持一致。 


第三个处理,控件的当前位置和约束所约束到的位置不一致的时候是Update frame还是Update 约束,当然,也可以让XCode自动创建 


第四个是当View大小改变的时候,约束的策略。 



这篇关于IOS AutoLayout详解(二)-多动图详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

详解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. 构