iOS开发之UIStackView基本运用

这篇具有很好参考价值的文章主要介绍了iOS开发之UIStackView基本运用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

UIStackView

UIStackView是基于自动布局AutoLayout,创建可以动态适应设备方向、屏幕尺寸和可用空间的任何变化的用户界面。UIStackView管理其ArrangedSubview属性中所有视图的布局。这些视图根据它们在数组中的顺序沿堆栈视图的轴排列。由axis, distribution, alignment, spacing等属性改变。

有点类似前端的flex布局,Apple从很早就引入了,但是实际使用的人太少了🤔,接下来的文章将引用部分Apple官方文档介绍

iOS开发之UIStackView基本运用

  • 只需要定义UIStackView的位置positionsize是可选的。

  • 当没有设置size的时候,会根据它的内容的大小来调整自己的大小,即子视图各个控件的大小决定了UIStackView的大小

  • UIStackView的布局受到本身frame或者AutoLayout的影响,包括子组件的AutoLayout的影响

  • 设置子组件大小只能使用Auto Layout,为UIStackView设置大小位置可以采用Frame、Auto Layout

  • 需要设置axis, distribution, alignment, spacing属性,并通过addArrangedSubview添加子组件

基本使用

固定一个位置和大小的UIStackView,添加三个等大且间隔为10的子组件

iOS开发之UIStackView基本运用

    // UIStackView
    UIStackView *stackView = [[UIStackView alloc] init];
    stackView.backgroundColor = UIColor.redColor;
    stackView.frame = CGRectMake(0, 100, 390, 100);
    stackView.spacing = 10;
    stackView.axis = UILayoutConstraintAxisHorizontal;
    // 水平方向
    stackView.distribution = UIStackViewDistributionFillEqually;
    // 垂直方向
    stackView.alignment = UIStackViewAlignmentFill;
    
    [self.view addSubview:stackView];
    
 
    // 添加子组件
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = UIColor.grayColor;
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = UIColor.yellowColor;
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = UIColor.blueColor;
    
    // 必须使用的特殊添加方式
    [stackView addArrangedSubview:view1];
    [stackView addArrangedSubview:view2];
    [stackView addArrangedSubview:view3];

属性介绍

  • Axis:设置内部子组件堆叠方式,水平/垂直方向
  • Alignment:与axis方向相反的方向的布局规则,Axis会影响其设置方向
  • distribution:与axis方向相同的方向的布局规则,Axis会影响其设置方向
  • spacing:设置默认间隔,UIStackViewDistributionEqualSpacing/UIStackViewDistributionEqualCentering情况下,spacing为最小间距

Alignment属性具体介绍

下面默认举例采用Axis是水平,则Alignment代表的是垂直方向的布局规则,Axis是垂直则相反

  • UIStackViewAlignmentFill:默认方式,垂直方向填充满UIStackView

iOS开发之UIStackView基本运用

  • UIStackViewAlignmentCenter:垂直方向居中对齐
    iOS开发之UIStackView基本运用

  • UIStackViewAlignmentTop / UIStackViewAlignmentLeading :垂直方向顶部对齐
    iOS开发之UIStackView基本运用

  • UIStackViewAlignmentBottom / UIStackViewAlignmentTrailing :垂直方向底部对齐
    iOS开发之UIStackView基本运用

  • UIStackViewAlignmentFirstBaseline:垂直方向对齐第一个子组件的头部
    iOS开发之UIStackView基本运用

  • UIStackViewAlignmentLastBaseline:垂直方向对齐最后一个子组件的尾部
    iOS开发之UIStackView基本运用

distribution属性具体介绍

下面默认举例采用Axis是水平,则distribution代表的是水平方向的布局规则,Axis是垂直则相反吗,space代表的是实际间隔,spaceing代表的是设置的间隔

UIStackViewDistributionFill:子组件填充满整个UIStackViewspace=spaceing

  • 使用方法:UIStackView只需要确定AutoLayout位置,为子组件添加AutoLayout的大小,用来确定UIStackView的大小

iOS开发之UIStackView基本运用

UIStackViewDistributionFillEqually:每个子组件宽度相等且填充满整个UIStackView,sapce=spaceing

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为一个子组件添加AutoLayout的大小,用来确定UIStackView的大小
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,默认为子组件生成相等大小

iOS开发之UIStackView基本运用
UIStackViewDistributionFillProportionally:根据space和每个组件的Size分配每个子组件的宽度,最终也是填充满整个UIStackView

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,最终根据算法确定每个子组件的比例,(好坑😓,效果难以达到预期的,或许有更高级的用法❓欢迎👏留言讨论)
    iOS开发之UIStackView基本运用
    UIStackViewDistributionEqualSpacing:根据每个组件的Size分配每个子组件的宽度,达到间隔相等的情况,🌟特殊在通过拉伸space,存在实际space>=spacing的情况
  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小,space=spacing
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,最终根据算法确定每个子组件的比例,空间充足则拉伸space,space>=spacing,空间不足则缩小子组件的Size
    iOS开发之UIStackView基本运用

UIStackViewDistributionEqualCentering: 子组件中心点之间的距离相等,🌟特殊在通过拉伸space,存在实际space>=spacing的情况

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小,通过拉伸space来达到子组件中心点之间的距离相等,space>=spacing
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,通过拉伸spaceSize来达到子组件中心点之间的距离相等,space>=spacing

iOS开发之UIStackView基本运用

总结:根据实际情况去选择合适的distributionAlignment属性,为子组件添加合适的Auto Layout,为UIStackView添加合适的Auto Layout 可以达成任何你想要的动态效果

参考资料

Apple Developer
iOS - UIStackView的使用
UIStackView 入坑指南文章来源地址https://www.toymoban.com/news/detail-443819.html

到了这里,关于iOS开发之UIStackView基本运用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++ Qt开发:运用QJSON模块解析数据

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用 QJson 组件的实现对JSON文本的灵活解析功能。 JSON(JavaScript Object Nota

    2024年02月19日
    浏览(32)
  • C++ Qt开发:运用QThread多线程组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用 QThread 组件实现多线程功能。 多线程技术在程序开发中尤为常用,Q

    2024年03月09日
    浏览(43)
  • 【Node.js从基础到高级运用】二、搭建开发环境

    在上一篇文章中,我们介绍了Node.js的基础概念。现在,我们将进入一个更实际的阶段——搭建Node.js的开发环境。这是每个Node.js开发者旅程中的第一步。接下来,我们将详细讨论如何安装Node.js和npm,以及如何使用版本管理工具来维护不同的Node.js版本。 Node.js的安装过程相当简

    2024年03月14日
    浏览(37)
  • 【云开发笔记NO.22】运用云原生产品打造技术中台

    云原生产品以其容器化、微服务化、自动化等特性,为技术中台的建设提供了强大的技术支持。容器化技术使得应用可以更容易地进行部署和管理,提高了应用的可移植性和弹性。微服务架构则让应用更加模块化,便于独立扩展和维护。自动化工具则能够大大提升开发和运维

    2024年04月08日
    浏览(72)
  • 鸿蒙开发:深入了解Arkts语言中的Want对象及其运用

    Arkts语言中的 Want 是一种用于对象间信息传递的载体,主要用于应用组件之间的信息传递。本文将深入探讨 Want 的定义、用途、类型以及参数说明

    2024年02月04日
    浏览(38)
  • 鸿蒙开发:深入了解Arkts语言中的Want对象及其运用【鸿蒙专栏-23】

    Arkts语言中的 Want 是一种用于对象间信息传递的载体,主要用于应用组件之间的信息传递。本文将深入探讨 Want 的定义、用途、类型以及参数说明

    2024年02月05日
    浏览(38)
  • 【iOS】AFNetworking的基本使用

    使用 AFNetworking 框架需要Cocoapods进行管理 所以要预先配置好Cocoapods,具体步骤见这篇文章:【iOS】CocoaPods的安装及其使用方法 AFNetworking 是一款cocoapods的网络请求库,在 Foundation 框架基础上,提供了一套简单易用的接口,用于执行各种网络操作,使开发者请求更加便利 打开终

    2024年02月08日
    浏览(28)
  • 【iOS】Masonry的基本使用

    暑假安装了cocoapods,简单使用其调用了SVGKit,但是没有学习Masonry,特此总结博客记录Masonry的学习 Masonry是一个轻量级的布局框架。通过链式调用的方式来描述布局,是排版代码更加简洁易读。masonry支持iOS和Mac OS X。 在iOS开发中,UI是我们必须设计的,在先前设计UI的过程中我

    2024年02月10日
    浏览(28)
  • UE4运用C++和框架开发坦克大战教程笔记(十一)(第34~36集)

    我们前面已经在一个类里面实现了一套可行的协程系统,接下来我们需要通过宏来将它们变得更加方便可用,不必每次都写这么多代码。 将 CoroActor 头文件里的委托声明语句以及两个结构体全复制到 DDTypes 下,改成通用的结构。下面只列出需要更改的代码。 DDTypes.h 来到 Cor

    2024年02月03日
    浏览(28)
  • UE4运用C++和框架开发坦克大战教程笔记(十五)(第46~48集)

    逻辑和批量加载同类 UObject 资源的逻辑差不多。区别在 DealClassKindLoadStack() 内,如果已经有资源率先加载完成了,那后续资源加载的途中我们想让已经加载好的资源执行额外的处理逻辑(比如让它每帧生成),我们就需要补充额外的判断条件,即判断其是否第一次生成完毕。

    2024年01月25日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包