iOS开发之UIStackView基本运用

news2024/11/13 19:09:47

UIStackView

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

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

在这里插入图片描述

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

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

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

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

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

基本使用

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

在这里插入图片描述

    // 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

在这里插入图片描述

  • UIStackViewAlignmentCenter:垂直方向居中对齐
    在这里插入图片描述

  • UIStackViewAlignmentTop / UIStackViewAlignmentLeading :垂直方向顶部对齐
    在这里插入图片描述

  • UIStackViewAlignmentBottom / UIStackViewAlignmentTrailing :垂直方向底部对齐
    在这里插入图片描述

  • UIStackViewAlignmentFirstBaseline:垂直方向对齐第一个子组件的头部
    在这里插入图片描述

  • UIStackViewAlignmentLastBaseline:垂直方向对齐最后一个子组件的尾部
    在这里插入图片描述

distribution属性具体介绍

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

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

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

在这里插入图片描述

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

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

在这里插入图片描述
UIStackViewDistributionFillProportionally:根据space和每个组件的Size分配每个子组件的宽度,最终也是填充满整个UIStackView

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

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

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

在这里插入图片描述

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

参考资料

Apple Developer
iOS - UIStackView的使用
UIStackView 入坑指南

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393118.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java医院云HIS系统:融合B/S版电子病历系统 能与公卫、PACS等各类外部系统融合

医院HIS系统源码 云HIS系统源码:SaaS运维平台完整文档 有源码,有演示 java基层医院云his系统 融合B/S版电子病历系统,支持电子病历4级 拥有自主知识产权。 看演示及源码可私信我哦! 一、系统概述 一款满足二甲医院、基层医疗机构…

九、会话技术CookieSession

会话技术 1,会话跟踪技术的概述 对于会话跟踪这四个词,我们需要拆开来进行解释,首先要理解什么是会话,然后再去理解什么是会话跟踪: 会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有…

3D目标检测(二)—— 直接处理点云的3D目标检测网络VoteNet、H3DNet

前言上次介绍了基于Point-Based方法处理点云的模块,3D目标检测(一)—— 基于Point-Based方法的PointNet点云处理系列,其中相关的模块则是构成本次要介绍的,直接在点云的基础上进行3D目标检测网络的基础。VoteNet对于直接在点云上预…

科目一《综合素质》

目录综合素质重点题型分布注意事项章节分解第一章 职业理念第一节 教育观1. 教育观(基本内涵)一字不差背过第二节 学生观2. 学生观 一字不差背过第三节 教师观3. 教师观 一字不差背过第二章 教育法律法规第一节 教师的权利与义务第二节 学生的权利及其保…

QT基础入门【Demo篇】QString的相关操作

&#x1f4a2;&#x1f4a2;目录总览&#x1f4a2;&#x1f4a2;&#xff1a;QT基础入门目录总览 QString支持的操作符号有&#xff1a; 用于字符串之间比较&#xff1a;"!" "<" "<" "" ">" 用于字符串之间传递&a…

第九章 多机系统

考柿时间是3.9 文章目录多机系统并行性发展及计算机系统的分类开发并行性的途径计算机系统的分类(Flynn分类)SISD与片内并行&#xff08;芯片内的并行机制&#xff09;SIMD分成两个子类&#xff1a;MIMD分为两类&#xff08;**主要区别就是它们是否有共享的内存**、单系统映像&…

MTK平台修改AP 5G模式下所支持的频宽

代码路径 vendor/mediatek/kernel_modules/connectivity/wlan/core/gen4m/common/wlan_lib.c 将 prWifiVar->ucAp5gBandwidth (uint8_t) wlanCfgGetUint32( -- prAdapter, "Ap5gBw", MAX_BW_80MHZ); prAdapter, "Ap5gBw&quo…

Windows下UXP插件开发环境搭建及程序试运行

从PS2021开始&#xff0c;Adobe官方引入了新的插件平台&#xff1a;UXP&#xff0c;它的最终目标任务是取代现有的CEP&#xff0c;所以赶紧来提前做一下准备吧&#xff0c;我对这方面也一直很感兴趣&#xff0c;但是这方面的中文资料太少了&#xff0c;然后在网上查了一些资料和…

【剧前爆米花--爪哇岛寻宝】包装类的装拆箱和泛型的擦除机制

作者&#xff1a;困了电视剧 专栏&#xff1a;《数据结构--Java》 文章分布&#xff1a;这是关于数据结构的基础之一泛型的文章&#xff0c;希望对你有所帮助。 目录 包装类 装箱 装箱源码小细节 拆箱 泛型 什么是泛型 泛型编译的擦除机制 不能实例化泛型类型数组 包装…

LicenseBox Crack,对服务器的要求最低

LicenseBox Crack,对服务器的要求最低 LicenseBox是用于管理基于PHP的软件、WordPress插件或主题、主题、插件和WordPress的更新和许可的完整软件。它易于安装&#xff0c;对服务器的要求最低&#xff0c;用户友好的界面&#xff0c;无限脚本的使用为您的创造力打开了大门。 Li…

基于STM32的水质浑浊度和PH值监测系统设计(仿真+程序+讲解)

基于STM32的水质浑浊度和PH值监测系统设计(仿真程序讲解&#xff09; 仿真图proteus 8.9 程序编译器&#xff1a;keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;C0077 这里写目录标题演示讲解视频1.主要功能2.仿真3. 程序4.资料清单&下载链接演示讲解视频 基于…

基于JSP的网上书店的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;近年来&#xff0c;随着互联网的迅速普及&#xff0c;网络已经走进了千家万户&#xff0c;作为信息交流的一种平台&#xff0c;它给我们的日常生活带来了很大的便利。今天&#xff0c;各种各样的网站已经深入到了我们的日常生活&am…

单例模式之饿汉式

目录 1 单例模式的程序结构 2 饿汉式单例模式的实现 3 饿汉式线程安全 4 防止反射破坏单例 5 总结 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。所谓单例就是在系统中只有一个该类的实例&#xff0c;并且提供一个访问该实例的全局…

2023年房地产定价模型研究报告

第一章 房地产定价模型概述 受疫情和房地产发展模式影响&#xff0c;目前我国房地产行业遭受着多重冲击&#xff0c;消费者不断降低的购房意愿&#xff0c;频繁出现的烂尾楼问题&#xff0c;建筑材料和工人价格的不断上涨等。而房地产行业本身又是带动如电器&#xff0c;装修&…

《C++程序设计原理与实践》笔记 第14章 设计图形类

本章借助图形接口类介绍接口设计的思想和继承的概念。为此&#xff0c;本章将介绍与面向对象程序设计直接相关的语言特性&#xff1a;类派生、虚函数和访问控制。 14.1 设计原则 我们的图形接口类的设计原则是什么&#xff1f; 14.1.1 类型 我们的程序设计理念是在代码中直…

人工智能( AI )将如何颠覆项目管理?看看这六大关键领域

Gartner 研究预测&#xff0c;到 2030 年&#xff0c;80% 的项目管理任务将由 AI 运行&#xff0c;由大数据、机器学习和自然语言处理提供支持。 这些即将到来的技术发展视为前所未有的机遇。为这一颠覆时刻做好充分准备的企业和项目负责人将收获最大的回报。项目管理的每个方…

Linux操作系统学习(互斥)

文章目录线程安全互斥量互斥锁的原理线程安全补充可重入函数死锁线程安全 ​ 由于多个线程是共享同一个地址空间的&#xff0c;也就是很多资源都是共享的&#xff0c;那么线程通信就会很方便&#xff0c;但是方便的同时缺乏访问控制&#xff0c;可能会由于一个线程的操作问题&…

元数据管理、治理、系统、建设方案、范例等

【数据治理工具】–元数据系统 1.元数据系统 1.1 概述 如果想建设好元数据系统&#xff0c;需要理解元数据系统的相关概念&#xff0c;如数据、数据模型、元数据、元模型、ETL、数据血缘等等。 首先&#xff0c;要清楚数据的定义、数据模型的定义。数据一般是对客观事物描述…

全国程序员薪酬大曝光!看完我酸了····

2023年&#xff0c;随着互联网产业的蓬勃发展&#xff0c;程序员作为一个自带“高薪多金”标签的热门群体&#xff0c;被越来越多的人所关注。在过去充满未知的一年中&#xff0c;他们的职场现状发生了一定的改变。那么&#xff0c;程序员岗位的整体薪资水平、婚恋现状、职业方…

Halo开源建站工具

目录 特性 代码开源 易于部署 插件机制 附件管理 搜索引擎 快速开始 最新主题 下载安装主题 开发者指南 我的本地站点 docker管理 本地站点 gaghttps://halo.run/ 支持h2文件系统存储数据&#xff0c;支持docker部署。 特性 我们会一直探索&#xff0c;追求更好…