IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 17、UIStackView的用法 -> 正文阅读

[移动开发]17、UIStackView的用法

1、基本介绍

1.1 什么是StackView

  • UIStackView 是 UIView 的子类,它不能用来呈现自身的内容,而是用来约束子控件的一个控件。
  • UIStackView 提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到 StackView 的视图,我们不用再添加自动布局的约束了。Stack View 会管理这些子视图的布局,并帮我们自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸。
  • UIStackView 支持嵌套,我们可以将一个 Stack View 嵌套到另一个 Stack View 中,从而实现更为复杂的用户界面。
  • 使用 UIStackView 并不意味这不需要处理自动布局了。我们仍旧要定义一些布局约束来约束 Stack View。它只是帮我们节约了为每个 UI 元素创建约束的时间,同时它更容易的从布局中添加/删除一个视图。
  • UIStackView 和传统容器类另一个区别是他自己虽然继承自 UIView,但它本身不能自我渲染,比如他的 backgroundColor 是无效的,所以它注定要和 UIView 相辅相成的进行工作。它能够帮助 UIView 来处理 子View 的位置和大小等布局问题。

StackView最低支持是iOS9.0,如果想要在在iOS8.0使用,可以使用https://github.com/forkingdog/FDStackView

1.2 UIStackView的属性

请添加图片描述

axis: 子视图的布局方向

  • Vertical: 垂直
  • Horizontal: 水平

alignment: 子视图的对齐方式

  • .fill: (默认) 尽可能铺满。
    在这里插入图片描述

  • .leading: 当 axis 是 vertical 的时候,按 leading 方向对齐 等价于: 当 axis 是 horizontal 的时候,按 top 方向对齐。
    在这里插入图片描述

  • .top: 当 axis 是 horizontal 的时候,按 top 方向对齐 等价于: 当 axis 是 vertical 的时候,按 leading 方向对齐
    在这里插入图片描述

  • .trailing: 当 axis 是 vertical 的时候,按 trailing 方向对齐 等价于: 当 axis 是 horizontal 的时候,按 bottom 方向对齐
    在这里插入图片描述

  • bottom: 当 axis 是 horizontal 的时候,按 bottom 方向对齐 等价于: 当 axis 是 vertical 的时候,按 trailing 方向对齐。
    在这里插入图片描述

  • .center:居中对齐。

在这里插入图片描述

  • .firstBaseline: 仅横轴有用, 按首行基线对齐
    在这里插入图片描述

  • .lastBaseline: 仅横轴有用, 按文章底部基线对齐。
    在这里插入图片描述

distribution:子视图的分布比例(大小)

  • .fill(默认) 根据compression resistance和hugging两个 priority 布局
    在这里插入图片描述

  • .fillEqually:每个子视图的高度或宽度保持一致。
    在这里插入图片描述

  • .fillProportionally:根据intrinsic content size按比例布局。
    在这里插入图片描述

  • .equalSpacing:等间距布局,如果放不下,根据compression resistance压缩
    在这里插入图片描述

  • .equalCentering:等中间线间距布局,元素间距不小于 spacing 定义的值, 如果放不下,根据compression resistance压缩。
    在这里插入图片描述

Spacing:子试视图间的间距

isBaselineRelativeArrangement默认 false)

决定了垂直轴如果是文本的话,是否按照 baseline 来参与布局。

isLayoutMarginsRelativeArrangement(默认 false)

如果打开则通过 layout margins 布局,关闭则通过 bounds

1.3 UIStackView相关方法

1、UIStackView的方法

  • init(frame: CGRect):创建一个 UIStackView
  • init(arrangedSubviews views: [UIView]):同样是创建一个 UIStackView,但我们可以将子视图传入。views 数组里的顺序即为子视图显示的顺序。
  • arrangedSubviews: [UIView] { get }:获得 UIStackView 里所有的子视图。它的顺序代表了 stack 堆叠的位置顺序,即视图元素的x轴和y轴,subviews它的顺序实际上是图层覆盖顺序,也就是视图元素的 z轴。
  • addArrangedSubview(view: UIView):添加一个子视图
  • removeArrangedSubview(view: UIView):删除一个子视图
  • insertArrangedSubview(view: UIView, at stackIndex: Int):在指定位置插入一个子视图

注意:

  • 如果一个元素没有被 addSubview,调用 arrangedSubviews 会自动 addSubview
  • 当一个元素被 removeFromSuperview ,则 arrangedSubviews也会同步移除
  • 当一个元素被 removeArrangedSubview, 不会触发 removeFromSuperview,它依然在视图结构中
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-09-30 12:02:39  更:2021-09-30 12:03:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:47:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码