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

相关文章

详解MySQL中DISTINCT去重的核心注意事项

《详解MySQL中DISTINCT去重的核心注意事项》为了实现查询不重复的数据,MySQL提供了DISTINCT关键字,它的主要作用就是对数据表中一个或多个字段重复的数据进行过滤,只返回其中的一条数据... 目录DISTINCT 六大注意事项1. 作用范围:所有 SELECT 字段2. NULL 值的特殊处

SQL BETWEEN 语句的基本用法详解

《SQLBETWEEN语句的基本用法详解》SQLBETWEEN语句是一个用于在SQL查询中指定查询条件的重要工具,它允许用户指定一个范围,用于筛选符合特定条件的记录,本文将详细介绍BETWEEN语... 目录概述BETWEEN 语句的基本用法BETWEEN 语句的示例示例 1:查询年龄在 20 到 30 岁

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可