热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

SwiftUIStackView使用详解1(基本介绍、使用样例)

在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 AutoLayout 和 SizeClasses,方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 Auto Layout  Size Classes,方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界面,用起来还是略显繁琐。
到了 iOS9,苹果又为我们带来了一个新特性:Stack View(堆栈视图)。使用堆栈视图布局,在某些场景下可以大大减轻我们的工作量。

一、基本介绍

1,什么是 UIStackView?

  • UIStackView 是 UIView 的子类,它不能用来呈现自身的内容,而是用来约束子控件的一个控件。
  • UIStackView 提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到 StackView 的视图,我们不用再添加自动布局的约束了。Stack View 会管理这些子视图的布局,并帮我们自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸。
  • UIStackView 支持嵌套,我们可以将一个 Stack View 嵌套到另一个 Stack View 中,从而实现更为复杂的用户界面。
  • 使用 UIStackView 并不意味这不需要处理自动布局了。我们仍旧要定义一些布局约束来约束 Stack View。它只是帮我们节约了为每个 UI 元素创建约束的时间,同时它更容易的从布局中添加/删除一个视图。

2,如何使用 UIStackView?

我们可以直接在代码中使用 UIStackView,也可以在 StoryBoard 中使用。 Xcode 提供了两种方式在 StoryBoard 中使用 UIStackView
  • 方式1:从对象库中拖一个 Stack View(水平的/竖直的)放到 storyboard 的正确位置上。然后就可以拖一些 labelbuttonimageView 等视图放到 Stack View 中。
  • 方式2:可以在自动布局栏中使用 Stack 选项。比如我们简单的选择两个或更多的视图,之后点击 Stack 选项,IB 将会把这些视图嵌入到一个 Stack View 中,并自动的调整。

3,UIStackView 的属性

UIStackView 使用简单,属性只有如下 4 个:
Swift - UIStackView使用详解1(基本介绍、使用样例)

(1)Axls:子视图的布局方向,可选值有:
  • Vertical:垂直
  • Horizontal:水平

(2)Alignment:子视图的对齐方式,可选值有:
  • Fill:子视图填充 StackView
  • Leading:靠左对齐。
  • Trailing:靠右对齐。
  • Center:子视图以中线为基准对齐。
  • Top:靠顶部对齐。
  • Bottom:靠底部对齐。
  • First Baseline:按照第一个子视图中文字的第一行对齐。
  • Last Baseline:按照最后一个子视图中文字的最后一行对齐。

(3)Distributlon:子视图的分布比例(大小),可选值有:
  • Fill:默认分布方式。
  • Fill Equally:每个子视图的高度或宽度保持一致。
  • Fill ProportionallyStackView 自己计算出它认为合适的分布方式。
  • Equal Spacing:每个子视图保持同等间隔的分布方式。
  • Equal Centering:每个子视图中心线之间保持一致的分布方式。

(4)Spacing:子试视图间的间距

二、一个三段式布局样例

1,效果图

(1)默认情况下,3 个 ImageView 在垂直方向上三等分排列显示。它们的尺寸间隔完全相同。
Swift - UIStackView使用详解1(基本介绍、使用样例)

(2)当设备横置时,3 个 ImageView 变成水平排列,同时仍然保持大小间隔相等。
Swift - UIStackView使用详解1(基本介绍、使用样例)

2,实现步骤

(1)首先从对象库中拖出一个垂直的 Stack View 放到 StoryBoard 上的 View Controller 中,并设置好它的约束。
Swift - UIStackView使用详解1(基本介绍、使用样例)

(2)为了让 Stack VIew 内部的元素大小相等,均匀分布,我们将 Stack View 的 Distribution 设为 Fill Equally。同时将 Spacing 设为 10,让元素之间有个间隔。
Swift - UIStackView使用详解1(基本介绍、使用样例)

(3)接着我们往 Stack View 内部拖入 3 个 Image View,可以看到它们已经自动垂直排列,且大小相等。
Swift - UIStackView使用详解1(基本介绍、使用样例)

(4)为了更好的看到效果,我们给每个 Image View 设置好要显示的图片,同时将 Content Mode 设置为 Aspect Fill,并勾选上 Clip To Bounds
Swift - UIStackView使用详解1(基本介绍、使用样例)

(5)我们知道 Axis 属性决定了子控件的布局方向。如果我们想要实现在竖屏时子控件垂直布局,横屏时子控件水平布局。那么我们可以通过 Size Classes 重写原来的基本布局。
  • 点击 Stack View 的 Axis 选项旁边的 + 按钮。Width 选择 AnyHeight 选择 Compact。然后点击“Add Variation”添加。
Swift - UIStackView使用详解1(基本介绍、使用样例)

最后将这个新增的 Size Classes 下的 Axis 值设置为 Horizontal
Swift - UIStackView使用详解1(基本介绍、使用样例)

(6)运行程序即可看到效果。同时横竖屏切换时布局方向也会自动改变。

源码下载Swift - UIStackView使用详解1(基本介绍、使用样例)hangge_1749.zip

原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1749.html
推荐阅读
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 本文详细介绍了macOS系统的核心组件,包括如何管理其安全特性——系统完整性保护(SIP),并探讨了不同版本的更新亮点。对于使用macOS系统的用户来说,了解这些信息有助于更好地管理和优化系统性能。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 在使用 DataGridView 时,如果在当前单元格中输入内容但光标未移开,点击保存按钮后,输入的内容可能无法保存。只有当光标离开单元格后,才能成功保存数据。本文将探讨如何通过调用 DataGridView 的内置方法解决此问题。 ... [详细]
  • ImmutableX Poised to Pioneer Web3 Gaming Revolution
    ImmutableX is set to spearhead the evolution of Web3 gaming, with its innovative technologies and strategic partnerships driving significant advancements in the industry. ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 在维护公司项目时,发现按下手机的某个物理按键后会激活相应的服务,并在屏幕上模拟点击特定坐标点。本文详细介绍了如何使用ADB Shell Input命令来模拟各种输入事件,包括滑动、按键和点击等。 ... [详细]
  • 本文探讨了在Java中实现系统托盘最小化的两种方法:使用SWT库和JDK6自带的功能。通过这两种方式,开发者可以创建跨平台的应用程序,使窗口能够最小化到系统托盘,并提供丰富的交互功能。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
author-avatar
不得不无奈啊
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有