UIStackView使用进阶

news2024/11/23 23:33:40

01

技术背景

前端的布局方式比较灵活,提供有Flex的布局方式,可以实现不同方向的弹性布局。Flex就像一个容器,可以将其内部的子控件统一进行布局。其包含主轴方向和交叉轴方向,主轴方向表示控件的排布方向,交叉轴方向和主轴方向相垂直。熟悉前端Flex控件的同学应该知道。Flex有一些常用属性,这里对其进行简单介绍,方便了解UIStackView的技术背景。

  • flex-direction:控制Flex的方向,垂直还是水平;

  • flex-wrap:是否允许换行显示,nowrap表示单行显示,nowarp的场景下,如果控件过多,则可能导致子项等比缩小的问题;

  • justify-content:决定Flex主轴方向上,子项对齐和分布方式,例如从前到后排列,或者等间距分布等;

  • align-items:决定Flex交叉轴方向上,子项的对齐和分布方式,例如主轴设置为row,交叉轴flex-start就表示顶对齐,center表示垂直居中对齐;

  • align-content:作用于交叉轴方向每行的对齐方式,属性只针对于有换行的场景下有效。例如flex-start是从上到下逐行排列,space-between则表示每行间距相同,平均分配每行之间间距。

02

UIStackView介绍

在介绍完Flex布局的背景之后,这里讲一下UIStackView控件。在ios9中苹果在UIKit框架中引入了一个新的视图类UIStackViewUIStackView借鉴了Flex的布局思想,采用线性布局的方式,统一对子视图进行布局。只需要写很少的Masonry布局代码,或者不写布局代码即可完成布局。

UIStackView已经推出有一些年了,这里介绍这个控件,主要是出于两个目的。一方面是对于没使用过的同学,介绍这个控件的功能以及适用的场景,项目中的一些场景通过UIStackView处理起来会轻松很多。另一方面对于已经使用过的同学,我会在文章中讲一些我踩过的坑,以帮助大家更好的使用这个控件来解决业务中的问题。

需要注意的是,UIStackView虽然继承自UIView,但是并不参与屏幕的渲染,所以重写drawRect:方法也是无效的。 

03

核心参数

UIStackView提供了两个方向的布局,垂直布局和水平布局,我们可以通过UILayoutConstraintAxis枚举值进行设置。如果初学者来学习UIStackView比较抽象,不太好接触这个新的控件,而且很容易出错,先看一下下面这个gif来初步了解一下这个控件。


4da3382fccfae9d7df35e1334cd3a706.gif

下面是一些UIStackView的核心参数。

1、轴

  • horizontal:水平方向布局

  • vertical:垂直方向布局

bb065bee91d0391896d79446c9d9e5ee.jpeg


2、分配

  • fill:填充整个UIStackView,并且根据内部子视图尺寸进行动态调整,可能会拉伸或压缩某个子视图,可以通过ContentHuggingPriorityContentCompressionResistancePriority控制拉伸和压缩的视图,后面会讲到。

f8d29fef857955822e3fee9dc1227f3d.jpeg


  • fillEqually:子视图等宽或等高,填充整个stackView,过程中会根据分配的大小改变子视图尺寸。

386ea9c155f3fe092e46a238f9bccca0.jpeg


  • fillProportionally:根据子视图intrinsicContentSize按比例布局。9a794741d5a44e5075557b38f5ac9dd1.jpeg


  • equalSpacing:等间距布局,如果stackView放不下则会对子视图进行压缩,默认压缩最后加入的子视图。

    0609a10cacddc261b66a3d1eed863f18.jpeg


  • equalCentering:平均分配子视图得到每个视图的中心点,使用这个中心点来布局每个子视图,并且保持spacing距离,超出stackView将会压缩子视图。74f160ea549622b717ef2deeb4bb01c9.jpeg


3、对准

  • fill:交叉轴方向子视图铺满

9fedcdcfd00f7f7fee9b9cfe8517f5d6.jpeg


  • top:子视图顶对其(适用于horizontal布局)

53cbd22f53a8b8d31b3f647c5fef1b1b.jpeg


  • center:子视图居中对齐

ca8aa1ce535031584a72ba9c30f0b0be.jpeg


  • bottom:子视图底对齐(适用于horizontal布局)

a25df3955292d86878744140ecb1114a.jpeg


  • firstBaseline:按照第一个子视图的文字的第一行对齐,并且尽量保证子视图底对齐(适用于horizontal布局)

c15ad9f869801f9e2abf2c6311ab8431.jpeg


  • lastBaseline:按照最后一个子视图的最后一行对齐,并且尽量保证子视图底对齐(适用于horizontal布局)

67e34009e22692d20defaf6710072977.jpeg


  • trailing:子视图右对齐(适用于vertical布局)

1aeebc77a8b263335411474fd3a29840.jpeg


  • leading:子视图左对齐(适用于vertical布局)

b55aa5b8e13968cba07b9f8dbb8b61f0.jpeg

4、间距

子控件之间的最小距离,根据下面的图片结合上面的枚举值联系起来比较好理解。

71a35fa49d5cbd9b7959260143651460.png


08

基础方法

UIStackView的使用很多人都知道,这里举一个简单的例子,两个UILabel中间有一个分割线,并且整体居中对齐。

112f94c92ae92bd80906bbdffbe1f3e1.jpeg


对于传统的Masonry布局,需要写不少布局代码,而且为了整体居中,需要在外面包一层UIView进行居中的布局。而使用UIStackView,布局代码就下面这些,单独给中间的分割线指定个size,就是唯一Masonry涉及的处理。

[self.stackView addArrangedSubview:self.privacyButton];
[self.stackView addArrangedSubview:self.declareLineView];
[self.stackView addArrangedSubview:self.createContentDeclare];

[self.declareLineView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(Pixel_1, 11.f));
}];

- (UIStackView *)stackView {
    if (!_stackView) {
        _stackView = [[UIStackView alloc] init];
        _stackView.axis = UILayoutConstraintAxisHorizontal;
        _stackView.alignment = UIStackViewAlignmentFill;
        _stackView.spacing = 8;
    }
    return _stackView;
}

需要注意的是,UIStackView添加子视图,需要通过下面指定方法进行,否则子视图布局会有问题。调用此方法后就不用再调用addSubview方法,移除时直接调用removeFromSuperview即可。

- (void)addArrangedSubview:(UIView *)view;

09

使用进阶

1、隐藏子视图

上面的布局场景很简单,但如果是下面这种复杂搜索栏的场景,就很适合用UIStackView,通常搜索栏中的按钮会要求某些条件下展示,某些条件下隐藏,同样的搜索栏的宽度也是动态变化的。例如未登录时没有搜索栏右侧的10086客服电话按钮,搜索栏右侧贴着消息按钮的。

ae3124f2d97443b2c76a0b46066440ef.jpeg

对于这种场景,只需要将10086按钮的hidden设置为true,则可以实现上述效果。UIStackView在检测到某个子视图被hidde后,则这个子视图不参与占位。

可以通过下面的动画直观的感受下hidden的方便。

c451373d8a6cb34f1a724622477089cf.gif

2、抗拉伸、抗挤压

UIStackView并不能完全替代Masonry,除了其自带的布局功能外,还需要处理子视图的size、抗拉伸、抗挤压,以及stackView其自身的布局处理。下面是两个抗拉伸和抗压缩的API

设置抗拉伸级别。默认值250,控件级别设置越高,越不容易被拉伸。如果不设置优先级,则排在最前的子视图会被拉伸。

- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis;

设置抗压缩级别。默认值750,控件级别设置越高,越不容易被压缩。如果不设置优先级,则排在最后的子视图会被压缩。如果修改最后的子视图优先级为defaultHigh,系统会找750优先级中最后的子视图进行压缩。

- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis;

这里通过一个例子讲一下抗拉伸的业务场景,抗压缩也是同样的道理。假设有一个场景,一个horizontalstackView有两个UILabel,这两个label的文案都是动态下发的,产品需求是左侧自适应展示标签文案,右侧文案展示不下打点。

f6c5143fe305d109990c8ab1466ca833.jpeg


这种场景如果用布局来做会很复杂,增加很多计算操作。用UIStackView实现就很简单,我们需要保证的是不拉伸左侧label,只需要给左边label设置抗拉伸优先级高一些即可实现。

tagLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)

10

不足点

相对于前端的Flex布局,UIStackView对某个子视图可做的处理很有限。Flex除了可以对容器自身进行布局设置,即开头介绍的部分,也可以对Flex布局中的子视图进行单独布局设置。下面是一些Flex对子视图的一些实用属性,可以了解下。

  • orderFlex的每个子视图order默认都是0,如果想让某个视图排列在最前面,可以将order设置为-1,同样的,如果想让子视图展示在最后,可以将order设置为1

  • flex-grow:可以设置某个子视图的扩展,扩展指的是这个子视图是否占据除元素外的空白区域,取值范围是01,例如设置1为则表示占据全部空白区域;

  • flex-basis:通过这个属性可以设置某个子视图占据多少宽度,默认是auto由浏览器分配宽度,如果设置的宽度超过父视图,则子视图会进行等比收缩。

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

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

相关文章

AMD-OLMo:在 AMD Instinct MI250 GPU 上训练的新一代大型语言模型。

AMD-OLMo是一系列10亿参数语言模型,由AMD公司在AMD Instinct MI250 GPU上进行训练,AMD Instinct MI250 GPU是一个功能强大的图形处理器集群,它利用了OLMo这一公司开发的尖端语言模型。AMD 创建 OLMo 是为了突出其 Instinct GPU 在运行 “具有…

【HarmonyOS】Install Failed: error: failed to install bundle.code:9568289

【HarmonyOS】Install Failed: error: failed to install bundle.code:9568289 一、问题背景: Install Failed: error: failed to install bundle. code:9568289 error: install failed due to grant request permissions failed. View detailed instructions. 11/…

#渗透测试#SRC漏洞挖掘#CSRF漏洞的防御

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…

C++builder中的人工智能(7)如何在C++中开发特别的AI激活函数?

在当今的AI开发中,人工智能模型正迅速增加。这些模型使用数学函数来执行和学习,以便在传播时优化最佳结果,或在反向传播时选择最佳解决方案。其中之一就是激活函数。也称为转移函数或阈值函数,它决定了神经元的激活值作为输出&…

ReactPress数据库表结构设计全面分析

ReactPress Github项目地址:https://github.com/fecommunity/reactpress 欢迎Star。 ReactPress是一个基于React框架开发的开源发布平台和内容管理系统(CMS)。它不仅支持用户在支持React和MySQL数据库的服务器上搭建自己的博客和网站&#…

小菜家教平台(四):基于SpringBoot+Vue打造一站式学习管理系统

前言 昨天配置完了过滤器,权限检验,基本的SpringSecurity功能已经配置的差不多了,今天继续开发,明天可能会暂停一天整理一下需求,然后就进行CRUD了。 今日进度 补充SpringSecurity异常处理和全局异常处理器 详细操作…

零基础Java第十五期:抽象类接口(一)

目录 一、抽象类 1.1. 抽象的概念 1.2. 抽象类语法 1.3. 抽象类的特性 1.4. 图形类例子 二、 接口 2.1. 接口的概念 2.2. 语法规则 2.3. 接口的特性 2.4. 接口的使用 2.5. 实现多个接口 2.6. 工作当中常用的接口 一、抽象类 1.1. 抽象的概念 如果 一个类中没…

13.UE5流星火雨,引导施法技能制作

2-15 流星火雨,引导施法技能制作、随机数_哔哩哔哩_bilibili 目录 1.为流星火雨添加按键映射 2.创建流星火雨的动画蒙太奇 3.实现播放动画蒙太奇的逻辑 ​编辑 4.定义发射一波流星火雨的发射物 5.使用动画通知释放流星火雨 1.为流星火雨添加按键映射 创建名为流…

让redis一直开启服务/自动启动

文章目录 你的redis是怎么打开的黑窗不能关?必须要自动启动吗?再说说mysql 本文的所有指令都建议在管理员权限下打开cmd控制台 推荐的以管理员身份打开控制台的方式 Win R 打开运行 输入cmdShift Ctrl Enter 你的redis是怎么打开的 安装过redis的朋友都知道, redis的安…

【安装配置教程】二、VMware安装并配置ubuntu22.04

一、准备: 虚拟机安装ubuntu,首先要先找到一个镜像,可以去ubuntu官方下载一个,地址:下载Ubuntu桌面系统 | Ubuntu,下载好iso的镜像文件后保存好,接下来打开VMware。 二、安装&#xff…

Latex中给公式加边框

1、这里使用的不是 amsmath 的 \boxed 命令, 而是 empheq 的 empheq 环境以及 xcolor 的 \fcolorbox 命令, 下面是代码, 可以分别阅读这两个手册来获取更多的信息 \documentclass{article} \usepackage{xcolor} \usepackage{empheq} \usepackage{amsmath} \begin{document}\be…

Android Parcelable和Serializable的区别与联系

在Android开发中,Parcelable和Serializable是两种用来在组件之间传递数据的序列化机制。它们有不同的使用场景和性能特点。 以下是它们之间的关系和区别: 1. 什么是 Parcelable Parcelable 是 Android 特有的接口,用于高效地在进程间传递数…

Android 实现柱形图

在 Android 中实现柱状图,可以使用流行的图表库 MPAndroidChart,它支持多种类型的图表,包括柱状图、折线图、饼图等。下面是一个基本的柱状图实现步骤,具体分为以下几个部分: 1. 添加依赖 首先,你需要在 …

通过交互式网页学习相机成像原理

​ 入门摄影这门艺术,你是否有以下这些问题? 焦距、光圈、CMOS是什么?为什么光圈越大,背景虚化效果越好?什么是过曝?… 今天我将分享一个简单的、可交互的相机成像模型,可供大家以可视化的方式…

web——sqliabs靶场——第一关

今天开始搞这个靶场,从小白开始一点点学习,加油!!!! 1.搭建靶场 注意点:1.php的版本问题,要用老版本 2.小p要先改数据库的密码,否则一直显示链接不上数据库 2.第一道题&#xff0…

自监督学习:机器学习的未来新方向

引言 自监督学习(Self-Supervised Learning, SSL)是近年来机器学习领域的一个重要发展方向,迅速成为许多研究和应用的热点。与传统的监督学习不同,自监督学习利用未标注数据,通过设计自我生成标签的任务,帮…

探索 HTML 和 CSS 实现的 3D 开关按钮

效果演示 这段代码是一个HTML和CSS的组合&#xff0c;用于创建一个3D风格的开关按钮&#xff08;通常用于控制某些设置的开启或关闭&#xff09; HTML <label class"switch"><input type"checkbox" checked"checked"><div cl…

车载诊断架构---NRC 78和NRC 21那些你不知道的事情!

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

【计算机基础——数据结构——红黑树】

1. 红黑树&#xff08;RBTree&#xff09; 为什么HashMap不直接使用AVL树&#xff0c;而是选择了红黑树呢&#xff1f; 由于AVL树必须保证左右子树平衡&#xff0c;Max(最大树高-最小树高) < 1&#xff0c;所以在插入的时候很容易出现不平衡的情况&#xff0c;一旦这样&…

linux物理内存管理:node,zone,page

一、总览 对于物理内存内存&#xff0c;linux对内存的组织逻辑从上到下依次是&#xff1a;node&#xff0c;zone&#xff0c;page&#xff0c;这些page是根据buddy分配算法组织的&#xff0c;看下面两张图&#xff1a; 上面的概念做下简单的介绍&#xff1a; Node&#xff1a…