news 2026/6/15 15:43:55

4.布局系统

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
4.布局系统

quarius开发框架旨在帮助独立开发者和中小型团队,完成iOS App的快速实现与迭代。使用框架开发将给你带来简单、高效、易维护的编程体验。

Aquarius布局系统简介

Aquarius开发框架提供了一套完整的、极简的布局系统。通过该布局系统,你可以轻松的完成基于代码控制的视图布局。

核心价值:

🎯 一行顶多行 - 极简API,大幅减少代码量

⚡ 动效零成本 - 所有布局变化天然支持动画

🔗 关系式布局 - 直观表达视图间相对关系

📦 批量好帮手 - 一次性操作多个视图

🔄 无缝兼容 - 基于原生frame,即插即用

系统特点:

直观的定位和大小调整方法

内置动画支持

多视图批量操作

参见源码:

UIView+aLayout.swift

Array+aLayout.swift

复杂度:

基础布局:提供了对控件的基础设置

高级布局:提供了控件间关系型的动态设置

基础布局:重塑单个视图的操控体验

处理单个视图

位置

使用框架提供的方法,你可以轻松的完成视图位置的获取和设置。

获取x位置

不使用框架的获取方式

let x: CGFloat = myView.frame.origin.x

使用框架的获取方式

let x: CGFloat = myView.x()

//或

let x: CGFloat = myView.left()

设置x位置

不使用框架的获取方式

myView.frame.origin.x = 10.0

使用框架的获取方式

myView.x(x: 10.0)

//或

myView.left(left: 10.0)

获取y位置

不使用框架的获取方式

let y: CGFloat = myView.frame.origin.y

使用框架的获取方式

let y: CGFloat = myView.y()

//或

let y: CGFloat = myView.top()

设置y位置

不使用框架的获取方式

myView.frame.origin.y = 10.0

使用框架的获取方式

myView.y(y: 10.0)

//或

myView.top(top: 10.0)

获取右侧位置

不使用框架的获取方式

let right: CGFloat = myView.frame.origin.x + myView.frame.size.width

使用框架的获取方式

let right: CGFloat = myView.right()

设置右侧位置

不使用框架的获取方式

myView.frame.origin.x = 200.0 - myView.frame.size.width

使用框架的获取方式

myView.right(right: 200)

获取底部位置

不使用框架的获取方式

let bottom: CGFloat = myView.frame.origin.y + myView.frame.size.height

使用框架的获取方式

let bottom: CGFloat = myView.bottom()

设置底部位置

不使用框架的获取方式

myView.frame.origin.y = 200.0 - myView.frame.size.height

使用框架的获取方式

myView.bottom(bottom: 200.0)

大小

使用框架提供的方法,你可以轻松的完成视图大小的获取和设置。

获取宽度

不使用框架的获取方式

let width: CGFloat = myView.frame.size.width

使用框架的获取方式

let width: CGFloat = myView.width()

设置宽度

不使用框架的获取方式

myView.frame.size.width = 100.0

使用框架的获取方式

myView.width(width: 100.0)

获取高度

不使用框架的获取方式

let height: CGFloat = myView.frame.size.height

使用框架的获取方式

let height: CGFloat = myView.height()

设置高度

不使用框架的获取方式

myView.frame.size.height = 100.0

使用框架的获取方式

myView.height(height: 100.0)

point

获取point

不使用框架的获取方式

let point: CGPoint = myView.frame.origin

使用框架的获取方式

let point: CGPoint = myView.point()

设置point

不使用框架的获取方式

myView.frame.origin = CGPoint(x: 10.0, y: 10.0)

使用框架的获取方式

myView.point(x: 10.0, y: 10.0)

//或

myView.point(point: CGPoint(x: 10.0, y: 10.0)

//或

myView.point(points: [10.0, 10.0])

//当x, y值相同时

myView.point(xy: 10.0)

Size

获取Size

不使用框架的获取方式

let size: CGSize = myView.frame.size

使用框架的获取方式

let size: CGSize = myView.size()

设置Size

不使用框架的获取方式

myView.frame.size = CGSize(width: 100.0, height: 100.0)

使用框架的获取方式

myView.size(width: 100.0, height: 100.0)

//或

myView.size(w: 100.0, h: 100.0)

//或

myView.size(size: CGSize(width: 100.0, height: 100.0))

//或

myView.size(sizes: [100.0, 100.0])

//当宽和高相同时

myView.size(widthHeight: 100.0)

frame

获取frame

不使用框架的获取方式

let frame: CGRect = myView.frame

使用框架的获取方式

let frame: CGRect = myView.frame()

设置frame

不使用框架的获取方式

myView.frame = CGRect(x: 10.0, y: 10.0, width: 100.0, height: 100.0)

//或

myView.frame = CGRect(origin: CGPoint(x: 10.0, y: 10.0), size: CGSize(width: 100.0, height: 100.0))

使用框架的获取方式

myView.frame(frame: CGRect(x: 10.0, y: 10.0, width: 100.0, height: 100.0))

//或

myView.frame(x: 10.0, y: 10.0, w: 100.0, h: 100.0)

//或

myView.frame(frames: [10.0, 10.0, 100.0, 100.0])

//当x, y和宽、高相同时

myView.frame(xy: 10.0, widthHeight: 100.0)

处理多个视图

基础操作

设置多个视图相同的x值

不使用框架的获取方式

view1.frame.origin.x = 10.0

view2.frame.origin.x = 10.0

使用框架的获取方式

UIView.x(x: 10.0, views: [view1, view2])

//或

UIView.left(left: 10.0, views: [view1, view2])

设置多个视图相同的right值

使用框架的获取方式

UIView.right(right: 10.0, views: [view1, view2])

设置多个视图相同的y值

不使用框架的获取方式

view1.frame.origin.y = 10.0

view2.frame.origin.y = 10.0

使用框架的获取方式

UIView.y(y: 10.0, views: [view1, view2])

//或

UIView.top(top: 10.0, views: [view1, view2])

设置多个视图相同的bottom值

使用框架的获取方式

UIView.bottom(bottom: 10.0, views: [view1, view2])

设置多个视图相同的宽度

不使用框架的获取方式

view1.frame.size.width = 100.0

view2.frame.size.width = 100.0

使用框架的获取方式

UIView.width(width: 100.0, views: [view1, view2])

设置多个视图相同的高度

不使用框架的获取方式

view1.frame.size.height = 100.0

view2.frame.size.height = 100.0

使用框架的获取方式

UIView.height(height: 100.0, views: [view1, view2])

设置多个视图相同的point

不使用框架的获取方式

view1.frame.origin = CGPoint(x: 10, y: 10)

view2.frame.origin = CGPoint(x: 10, y: 10)

使用框架的获取方式

UIView.point(x: 10.0, y: 10.0, views: [view1, view2])

//或

UIView.point(point: CGPoint(x: 10.0, y: 10.0), views: [view1, view2])

//或

UIView.point(points: [10.0, 10.0], views: [view1, view2])

//当x, y值相同时

UIView.point(xy: 10.0, views: [view1, view2])

设置多个视图相同的Size

不使用框架的获取方式

view1.frame.size = CGSize(width: 100.0, height: 100.0)

view2.frame.size = CGSize(width: 100.0, height: 100.0)

使用框架的获取方式

UIView.size(width: 100.0, height: 100.0, views: [view1, view2])

//或

UIView.size(w: 100.0, h: 100.0, views: [view1, view2])

//或

UIView.size(size: CGSize(width: 100.0, height: 100.0), views: [view1, view2])

//或

UIView.size(sizes: [100.0, 100.0], views: [view1, view2])

//当宽和高相同时

UIView.size(widthHeight: 100.0, views: [view1, view2])

设置多个视图相同的frame

不使用框架的获取方式

view1.frame = CGRect(x: 10.0, y: 10.0, width: 100.0, height: 100.0)

view2.frame = CGRect(x: 10.0, y: 10.0, width: 100.0, height: 100.0)

//或

view1.frame = CGRect(origin: CGPoint(x: 10.0, y: 10.0), size:CGSize(width: 100.0, height: 100.0))

view2.frame = CGRect(origin: CGPoint(x: 10.0, y: 10.0), size:CGSize(width: 100.0, height: 100.0))

使用框架的获取方式

UIView.frame(x: 10.0, y: 10.0, w: 100.0, h: 100.0, views: [view1, view2])

//或

UIView.frame(frame: CGRect(x: 10.0, y: 10.0, width: 100.0, height: 100.0), views: [view1, view2])

//或

UIView.frame(frame: CGRect(origin: CGPoint(x: 10.0, y: 10.0), size: CGSize(width: 100.0, height: 100.0)), views: [view1, view2])

//或

UIView.frame(frames: [10.0, 10.0, 100.0, 100.0], views: [view1, view2])

//当x, y和宽, 高相等时

UIView.frame(xy: 10.0, widthHeight: 100.0, views: [view1, view2])

对齐操作

框架支持多个视图的对齐

//顶端对齐

UIView.top(views: [view1, view2, view3])

//底部对齐

UIView.bottom(views: [view1, view2, view3])

//左侧对齐

UIView.left(views: [view1, view2, view3])

//右侧对齐

UIView.right(views: [view1, view2, view3])

支持对齐到某个目标位置

//顶端对齐

UIView.top(views: [view1, view2, view3], position: 50)

//底部对齐

UIView.bottom(views: [view1, view2, view3], position: 50)

//左侧对齐

UIView.left(views: [view1, view2, view3], position: 50)

//右侧对齐

UIView.right(views: [view1, view2, view3], position: 50)

分布操作

均匀分布视图:

// 在第一个和最后一个视图之间水平分布视图

UIView.horizontal(views: [view1, view2, view3, view4])

// 在第一个和最后一个视图之间垂直分布视图

UIView.vertical(views: [view1, view2, view3, view4])

组合对齐和分布操作

在一次操作中对齐和分布视图:

// 顶端对齐并且水平分布视图

UIView.topAndHorizontal(views: [view1, view2, view3, view4])

// 顶端对齐到某个目标位置并且水平分布视图

UIView.topAndHorizontal(views: [view1, view2, view3, view4], position: 50)

// 底部对齐并且水平分布视图

UIView.bottomAndHorizontal(views: [view1, view2, view3, view4])

// 底部对齐到某个目标位置并且水平分布视图

UIView.bottomAndHorizontal(views: [view1, view2, view3, view4], position: 50)

// 左侧对齐并且垂直分布视图

UIView.leftVertical(views: [view1, view2, view3, view4])

// 左侧对齐到某个目标位置并且垂直分布视图

UIView.leftVertical(views: [view1, view2, view3, view4], position: 50)

// 右侧对齐并且垂直分布视图

UIView.rightVertical(views: [view1, view2, view3, view4])

// 右侧对齐到某个目标位置并且垂直分布视图

UIView.rightVertical(views: [view1, view2, view3, view4], position: 50)

批量操作

框架支持数组的方式批量操作视图

let views: [UIView] = [view1, view2, view3]

views.width(width: 100.0)

views.width(width: 100.0, 1)//设置数组中第2个UIView的宽度

views.height(height: 100.0)

views.height(height: 100.0, 1)//设置数组中第2个UIView的高度

高级布局:构建智能的、响应式的界面

Aquarius开发框架提供了一个强大且灵活的布局系统,超越了基本的定位功能。通过高级布局技术,帮助你用最少的代码和最大的灵活性创建复杂的UI布局。

Aquarius开发框架通过全面的布局方法扩展了UIView,这些方法建立在原生基于框架的布局系统之上,使其更加直观和强大。与Auto Layout的基于约束的方法不同,Aquarius开发框架提供了直接、命令式的API,易于理解且可以无缝动画。

相对定位

基础操作

Aquarius开发框架最强大的功能之一是它能够将视图相对于彼此定位。这消除了在排列视图时进行复杂计算的需要。

// 将viewB定位在viewA下方,间距为10pt

viewB.alignTop(view: viewA, offset: 10)

// 将viewB定位在viewA右侧,间距为15pt

viewB.alignLeft(view: viewA, offset: 15)

// 将viewB定位在viewA左侧,间距为8pt

viewB.alignRight(view: viewA, offset: 8)

// 将viewB定位在viewA上方,间距为12pt

viewB.alignBottom(view: viewA, offset: 12)

批量操作

let views: [UIView] = [view1, view2, view3]

// 将views数组定位在viewA下方,间距为8pt

views.alignTop(view: viewA, offset: 8)

// 将views数组中第2个视图定位在viewA下方,间距为8pt

views.alignTop(view: viewA, offset: 8, 1)

// 将views数组定位在viewA上方,间距为8pt

views.alignBottom(view: viewA, offset: 8)

// 将views数组中第2个UI视图在viewA上方,间距为8pt

views.alignBottom(view: viewA, offset: 8, 1)

// 将views数组定位在viewA右侧,间距为8pt

views.alignLeft(view: viewA, offset: 8)

// 将views数组中第2个视图视图iewA右侧,间距为8pt

views.alignLeft(view: viewA, offset: 8, 1)

// 将views数组定位在viewA左侧,间距为8pt

views.alignRight(view: viewA, offset: 8)

// 将views数组中第2个UI视图视图wA左侧,间距为8pt

views.alignRight(view: viewA, offset: 8, 1)

这些方法简化了流布局的创建,并能够在处理动态内容时无需手动计算位置。

等同定位

基础操作

当希望视图共享相同的边缘位置时,equal方法提供了一个简洁的语法

// 使viewB的左边缘与viewA相同(可选偏移)

viewB.equalLeft(target: viewA, offset: 5)

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 12:55:58

小白从零开始勇闯人工智能:爬虫初级篇(Selenium库)

引言在人工智能时代,获取数据是第一步。爬虫技术能帮我们打开网页背后的信息。对于初学者来说,Selenium是一个非常友好的入门选择——它不仅能获取网页数据,还能模拟真实用户的操作,比如点击按钮、输入文字、上传文件等。我们之前…

作者头像 李华
网站建设 2026/6/15 12:39:06

23、Linux 控制台操作与菜单创建全解析

Linux 控制台操作与菜单创建全解析 1. 控制台键盘模式 控制台键盘有三种主要模式: - Keycode(或 MEDIUMRAW)模式 :脚本读取代表控制台驱动对按键解释的数字代码。通常会返回两个键码,一个是按键按下时的,另一个是按键释放时的。不同的按键有不同的键码,例如,按下左…

作者头像 李华
网站建设 2026/6/15 14:17:01

Wan2.1视频生成模型:从入门到精通的完整指南

Wan2.1视频生成模型:从入门到精通的完整指南 【免费下载链接】Wan2.1-I2V-14B-480P-StepDistill-CfgDistill-Lightx2v 项目地址: https://ai.gitcode.com/hf_mirrors/lightx2v/Wan2.1-I2V-14B-480P-StepDistill-CfgDistill-Lightx2v Wan2.1-I2V-14B-480P-St…

作者头像 李华
网站建设 2026/6/14 23:09:16

微信小程序开发云函数锁定状态解决

微信小程序开发,云函数重新更新时报错说状态仍在更新中,不能重新进行安装配置,但已经确保前一次配置失败,解决方法: 1. 静置30min,等待自动恢复。一般而言,云函数通常会在15-30分钟后自动释放锁…

作者头像 李华
网站建设 2026/6/15 13:53:51

线程组之间的JMeter传递变量

下面,我们将看看如何在线程组之间共享和传递变量。 在开发高级JMeter脚本时,很可能您将拥有多个线程组。每个线程组将执行不同的请求。 一个很好的例子是我们需要使用Bearer Tokens对用户进行身份验证。一个线程组执行身份验证并保存令牌。另一个线程组…

作者头像 李华