17、UIStackView的用法

最新推荐文章于 2023-09-10 21:27:35 发布
最新推荐文章于 2023-09-10 21:27:35 发布
阅读量2.9k 收藏 7
点赞数 1
分类专栏： iOS 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010259906/article/details/120553159
版权

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，它依然在视图结构中
海森堡_lichangan
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
StackViewController:使用UIStackView并查看控制器组成以在列表中显示内容的控制器
04-13
StackViewController 概述 StackViewController是一个Swift框架，可简化使用UIStackView构建表单和其他静态内容的UIStackView 。 例如，下面的表格是使用StackViewController实现的： 设计原理 该项目的目的有两个：鼓励采用更适合于构建内容（如上图所示）的设计模式，并提供使过程更简单的工具。 以下各节总结了现有解决方案以及我们如何对其进行改进。 使用UITableView构建表单（困难） 传统上，iOS开发人员使用UITableView来构建表单和其他基于列表的相对静态的用户界面，尽管UITableView API不太适合此类任务。 UITableView主要是为动态内容而设计的，并且它提供的许多功能仅对于动态内容才是必需的。 使用它来构建静态用户界面会在实现许多数据源和委托方法时产生大量样板代码。 另一个主要问
iOS App开发中的UIStackView堆叠视图使用教程
09-02
UIStackView是iOS9以来新增加的组件,使我们能够对UIView子类对象进行灵活排版,这里我们就来看一下iOS App开发中的UIStackView堆叠视图使用教程
BRYXStackView:iOS 7上iOS 9的UIStackView的简单实现
05-02
BRYXStackView [！[CI状态]（ Haskins / BRYXStackView.svg？style = flat）]（ Haskins / BRYXStackView） BRYXStackView已被弃用。 请改用 用法 要运行示例项目，请克隆存储库，然后首先从Example目录运行pod install 。 截屏 代码 每当您将子视图添加到StackView时，它都会自动在堆栈中重新定位。 StackView公开了七个功能。 // Add a subview to the bottom of the stack. func addSubview ( view : UIView) // Add a subview to the bottom of the stack, with padding around it. func addSubview ( view :
AloeStackView：一个简单的类，用于利用方便的API布局视图集合，同时利用自动布局的功能
02-26
AloeStackView 一个简单的类，用于利用方便的API布局视图集合，同时利用自动布局的功能。 介绍 AloeStackView是一个类，它允许将视图集合按垂直或水平列表进行布局。 从广义上讲，它类似于UITableView ，但是其实现却大不相同，并且需要进行一系列折衷。 AloeStackView首先致力于使UI变得非常快速，简单和易于实现。 它以两种方式执行此操作： 当更改视图时，它利用自动布局的功能自动更新UI。 它放弃了UITableView某些功能，例如视图回收，以实现更简单，更安全的API。 我们发现AloeStackView是有用的基础架构，希望您也发现它有用！ 目录 特征 允许您保留对视图的强引用并动态更改其属性，而“自动布局”会自动使UI保持最新状态。 允许使用可选动画动态添加，删除，隐藏和显示视图。 包括对视图之间的可定制分隔符的内置支持。 提供
ScrollingStackViewController：一种视图控制器，使用子视图控制器的根视图作为UIStackView中的视图
02-17
ScrollingStackViewController ScrollingStackViewController是UITableViewController的方便替代方法，更适合在构建数量有限或动态且内容丰富的“单元”的滚动控制器时使用。 动机 UITableViewController非常适合当我们想要显示任意（可能很大）数量的相对简单的单元格的情况。 但是，有时您只想将视图控制器划分为垂直布置的段。 这些段可能是高度异构，复杂的，它们的编号定义明确，但是您仍然希望能够根据情况显示和隐藏它们。 您可以使用UITableViewController来实现，但是有点尴尬： 数据源模式在这里是一个过大的杀伤力。 您也可以直接添加段并隐藏/显示它们，而不必通过cellForRow:at:表视图更新等操作。当您想要显示和隐藏不同的单元格时，变戏法的索引往往容易出错并容易崩溃，有时很难很好地制
Android开发之StackView用法和遇到的坑分析
01-20
本文实例分析了Android开发之StackView用法和遇到的坑。分享给大家供大家参考，具体如下： 关于StackView网上已经有很多内容了 这里我着重将一些使用过程中遇到的坑吧 先看下效果，和很多人一样 很多人加完图片后发现图片不显示，这里可能有两个原因： 一、直接闪退，然后报错。一般会有头这么一句话： Failed to allocate a 74649612 byte allocation with 16765728 free bytes and 59MB until OOM 提示一个很明白了，内存溢出，具体原因是关于Android的内存分配机制的这里就不详细讲了 这不经事Stac
iOS开发之UIStackView基本运用
weixin_46926959的博客
03-06 5288
UIStackView
UIStackView入门使用两个问题
最新发布
郭晓东的专栏
09-10 629
项目中横向一排元素，竖向一排元素，可以使用UIStackView。UIStackView的原理不做介绍，这里主要讲两个初次使用容易出现的两个问题。首先创建一个stackview 向stackview中添加view 默认情况下，stackview中的元素是填满整个stackview的（fill），属性是distribution。其他的axis，alignment比较好理解。从结果上看，如果使用frame，stackview会依赖元素自身大小布局，比如皇冠的icon frame是20*14.5。但是皇
Qt Quick之StackView详解（1）
REDPINGPING的博客
06-30 886
Qt Quick中有个StackView，我在《Qt Quick核心编程》一书中没有讲到，最近有人问起，趁机学习了一下，把它的基本用法记录下来。 我准备分两次来讲...
Android控件四： StackView的使用
zk的博客
03-03 4542
效果图： 1，描述 StackView继承了AdapterViewAnimator，它也会显示Adapter提供的多个View组件，也可以通过showNext、showPrevious显示下一个、上一个组件，但它是以“堆叠（stack）”的方式显示多个列表项。 控制View的显示有两种方式： a：拖走stack顶端的view，显示下一个view，也可以把上一个view拖入stack中显示出来； ...
AnimatableStackView：基于UIStackView的类，可为其视图制作动画
02-15
AnimatableStackView 基于UIStackView的类，可对其更改进行动画处理。 当前仅支持垂直动画。 例子 克隆仓库，然后打开Carthage Project/AnimatableStackView.xcodeproj GIF动画 安装 迦太基 请检查 购物车文件： github "APUtils/AnimatableStackView" ~> 4.0 可可豆 可通过。 要安装它，只需将以下行添加到您的Podfile中： pod 'AnimatableStackView' , '~> 4.0' 用法 只需使用新的视图模型调用.configure(viewModels:)方法，然后在动画块内执行布局： UIView. animate ( withDuration : 2 ) { self . stackView . configure ( viewModel
MvvmCross.StackView:iOS UIStackView的MvvmCross实现
05-12
适用于iOS的MvvmCross UIStackView UIStackView可以绑定ViewModel列表，以便可以动态添加View并将其从ViewModel层中删除。 设置 在NuGet上可用： ://www.nuget.org/packages/Springham.MvvmCross.StackView 安装到您的Xamarin.iOS项目中 用法 与MvxViewModels集合绑定到源 set.Bind(MvxStackView).For(stackView => stackView.ItemsSource).To(vm => vm.Sections); 为了完成这项工作，每个ViewModel必须通过MvvmCross拥有一个关联的View。 要提供自定义或包装视图，请覆盖GetView并返回您的视图。 protected virtual UIView GetVi
Android-CardStackView-实现类似Tinder的Android滑动式卡片视图
08-12
CardStackView - 实现类似Tinder的Android滑动式卡片视图
iOS9之UIStackView体验,无需任何约束，这才是真正的自动布局，快到不能呼吸
热门推荐
Deft_MKJing的博客
06-16 1万+
Apple在2012年推出AutoLayout,以前很排斥,现在用的飞起啊,2014年推出了Size Class,2015年又推出UIStackView, 他提供了一组接口用于平铺一行或者一列的的视图组合.对于嵌入StackView的视图,我们无需在进行任何约束了,UIKit 已经帮忙最好了一切约束布局,也就是能自动适应不同屏幕.而且你可以在一个StackView内嵌入多个StackView来
Swift - UIStackView使用详解1（基本介绍、使用样例）
mo_xiao_mo的博客
08-15 7630
在应用开发中少不了界面元素的布局、适配、自适应。之前苹果已经为我们提供了 Auto Layout 和 Size Classes，方便我们实现页面的自适应弹性布局。但对于一些复杂的交互界面，用起来还是略显繁琐。 到了 iOS9，苹果又为我们带来了一个新特性：Stack View（堆栈视图）。使用堆栈视图布局，在某些场景下可以大大减轻我们的工作量。 一、基本介绍 1，什么是 UI
Swift - UIStackView
iOS - Swift
01-07 522
import UIKit class ViewController: UIViewController{ //创建一个UIStackView类型的变量 var stackView:UIStackView! override func viewDidLoad() { super.viewDidLoad() //创建三个View视图 ...
UIStackView教程：了解Stack View
kmyhy的专栏
01-04 1万+
原文链接 : UIStackView Tutorial: Introducing Stack Views 原文作者 : Jawwad Ahmad 译文出自 : 开发技术前线 www.devtf.cn 译者 : kmyhy Ray注：恭喜你！为了推广《iOS 9 Feast》一书，这本书的第一部分教程已经为你解锁了。本文来自于《iOS 9 Tutorials》中的一个章
iOS9 中UIStackView的使用
zhou_aaa的博客
10-21 828
概述 UIStackView是iOS 9中新增的API，类似于Android中的线性布局。UIStackView相当于一个容器，根据向UIStackView中添加视图的顺序，UIStackView会自动给这些视图添加约束，让这些视图根据内容，垂直或水平排列。由于UIStackView会自动给它里面的子视图添加约束，所以我们不必再为那些子视图添加约束，我们只要给UIStackView设置一些属
UIstackview如何分比例显示
08-20
### 回答1： 在UIStackView中分配比例可以使用分布属性(distribution property)。分布属性可以在Storyboard或通过编程方式进行设置。以下是一些示例： 1. 在Storyboard中分配比例： - 选择您的UIStackView。 - 在属性检查器中，找到“Distribution”选项，并将其更改为“Fill Equally”（平均分配）或“Fill Proportionally”（按比例分配）。 - 如果您选择“Fill Proportionally”，则可以通过更改每个子视图的“Proportion”属性来设置每个子视图的比例。 2. 通过编程方式分配比例： - 在代码中，使用以下代码访问您的UIStackView的分布属性： ``` stackView.distribution = .fillEqually // 平均分配 stackView.distribution = .fillProportionally // 按比例分配 ``` - 如果您选择“Fill Proportionally”，则可以使用以下代码设置每个子视图的比例： ``` subview1.setContentHuggingPriority(UILayoutPriority(249), for: .horizontal) subview1.setContentCompressionResistancePriority(UILayoutPriority(749), for: .horizontal) subview2.setContentHuggingPriority(UILayoutPriority(249), for: .horizontal) subview2.setContentCompressionResistancePriority(UILayoutPriority(749), for: .horizontal) // 其他子视图的比例设置 ``` - setContentHuggingPriority（_：for :)和setContentCompressionResistancePriority（_：for :)方法分别设置子视图的拉伸优先级和压缩优先级。根据这些优先级和UIStackView的大小，系统将计算每个子视图的大小和位置。 ### 回答2： UIStackView是iOS开发中非常常用的一种容器视图，它可以帮助我们快速搭建界面，并且自动进行内部子视图的布局管理。 在UIStackView中分配子视图的比例显示是非常简单的，我们可以通过设置子视图的布局属性来实现。 首先，我们需要将UIStackView的distribution属性设置为.fillEqually，这样会将子视图平均分配到UIStackView中。 接下来，我们可以通过设置子视图的占比来实现比例显示。UIStackView提供了一个子视图的属性arrangedSubviews，我们可以通过该属性获取到UIStackView内部的子视图数组。 我们可以通过索引访问数组中的子视图，并设置子视图的布局属性，比如widthAnchor或heightAnchor来实现分配的比例显示。 例如，如果我们有三个子视图，我们可以设置第一个子视图的widthAnchor为其他两个子视图的一半，第二个子视图的widthAnchor为其他两个子视图的四分之一，最后一个子视图的widthAnchor为其他两个子视图的四分之一。 代码示例如下： ``` let stackView = UIStackView() stackView.distribution = .fillEqually let subview1 = UIView() stackView.addArrangedSubview(subview1) subview1.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.5).isActive = true let subview2 = UIView() stackView.addArrangedSubview(subview2) subview2.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.25).isActive = true let subview3 = UIView() stackView.addArrangedSubview(subview3) subview3.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.25).isActive = true ``` 通过以上设置，我们可以实现UIStackView中子视图按照一定的比例显示的效果。 ### 回答3： UIStackView是iOS开发中的一个布局容器，可以用来水平或垂直地排列一组视图。通过设置UIStackView的distribution属性，可以控制其中视图的分布比例。 UIStackView的distribution属性有四种可选值： 1. Fill：视图被拉伸到填满整个UIStackView，不保持原始尺寸比例。 2. Fill Equally：视图被平均拉伸到填满整个UIStackView，并保持原始尺寸比例。 3. Fill Proportionally：视图根据其原始尺寸比例进行拉伸，以填满整个UIStackView。 4. Equal Spacing：视图之间的间距保持相等，视图尺寸根据自身内容决定。 如果想要实现分比例显示，可以通过设置UIStackView中视图的布局约束来控制。可以使用视图的宽度或高度约束，设置其优先级为低，然后在UIStackView的distribution属性中选择Fill Proportionally或Equal Spacing。这样，视图将会根据其原始尺寸比例进行拉伸或保持等间距分布。 例如，如果有两个视图A和B，希望A的宽度是B的宽度的2倍。可以设置A的宽度约束为等于B的宽度的2倍，并将约束的优先级设置为低。然后，在UIStackView的distribution属性中选择Fill Proportionally，这样A和B的宽度将会按照2:1的比例来显示。 可以根据具体的需求，使用布局约束和UIStackView的distribution属性来实现不同比例的视图显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值