4.布局系統(tǒng)

Aquarius 開發(fā)框架旨在幫助獨(dú)立開發(fā)者和中小型團(tuán)隊(duì)，完成 iOS App 的快速實(shí)現(xiàn)與迭代。使用框架開發(fā)將給你帶來簡(jiǎn)單、高效、易維護(hù)的編程體驗(yàn)。

大家好，我是K哥。一名獨(dú)立開發(fā)者，同時(shí)也是Swift開發(fā)框架【Aquarius】的作者，悅記和愛尋車app的開發(fā)者。

Aquarius開發(fā)框架旨在幫助獨(dú)立開發(fā)者和中小型團(tuán)隊(duì)，完成iOS App的快速實(shí)現(xiàn)與迭代。使用框架開發(fā)將給你帶來簡(jiǎn)單、高效、易維護(hù)的編程體驗(yàn)。

Aquarius布局系統(tǒng)簡(jiǎn)介

Aquarius開發(fā)框架提供了一套完整的、極簡(jiǎn)的布局系統(tǒng)。通過該布局系統(tǒng)，你可以輕松的完成基于代碼控制的視圖布局。

核心價(jià)值：

?? 一行頂多行 - 極簡(jiǎn)API，大幅減少代碼量
? 動(dòng)效零成本 - 所有布局變化天然支持動(dòng)畫
?? 關(guān)系式布局 - 直觀表達(dá)視圖間相對(duì)關(guān)系
?? 批量好幫手 - 一次性操作多個(gè)視圖
?? 無縫兼容 - 基于原生frame，即插即用

系統(tǒng)特點(diǎn)：

直觀的定位和大小調(diào)整方法
內(nèi)置動(dòng)畫支持
多視圖批量操作

參見源碼：

UIView+aLayout.swift
Array+aLayout.swift

復(fù)雜度:

基礎(chǔ)布局:提供了對(duì)控件的基礎(chǔ)設(shè)置
高級(jí)布局:提供了控件間關(guān)系型的動(dòng)態(tài)設(shè)置

基礎(chǔ)布局：重塑單個(gè)視圖的操控體驗(yàn)

處理單個(gè)視圖

位置

使用框架提供的方法，你可以輕松的完成視圖位置的獲取和設(shè)置。

獲取x位置

不使用框架的獲取方式

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

使用框架的獲取方式

let x: CGFloat = myView.x()
//或
let x: CGFloat = myView.left()

設(shè)置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()

設(shè)置y位置

不使用框架的獲取方式

myView.frame.origin.y = 10.0

使用框架的獲取方式

myView.y(y: 10.0)
//或
myView.top(top: 10.0)

獲取右側(cè)位置

不使用框架的獲取方式

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

使用框架的獲取方式

let right: CGFloat = myView.right()

設(shè)置右側(cè)位置

不使用框架的獲取方式

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()

設(shè)置底部位置

不使用框架的獲取方式

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

使用框架的獲取方式

myView.bottom(bottom: 200.0)

大小

使用框架提供的方法，你可以輕松的完成視圖大小的獲取和設(shè)置。

獲取寬度

不使用框架的獲取方式

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

使用框架的獲取方式

let width: CGFloat = myView.width()

設(shè)置寬度

不使用框架的獲取方式

myView.frame.size.width = 100.0

使用框架的獲取方式

myView.width(width: 100.0)

獲取高度

不使用框架的獲取方式

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

使用框架的獲取方式

let height: CGFloat = myView.height()

設(shè)置高度

不使用框架的獲取方式

myView.frame.size.height = 100.0

使用框架的獲取方式

myView.height(height: 100.0)

point

獲取point

不使用框架的獲取方式

let point: CGPoint = myView.frame.origin

使用框架的獲取方式

let point: CGPoint = myView.point()

設(shè)置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])
//當(dāng)x, y值相同時(shí)
myView.point(xy: 10.0)

Size

獲取Size

不使用框架的獲取方式

let size: CGSize = myView.frame.size

使用框架的獲取方式

let size: CGSize = myView.size()

設(shè)置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])
//當(dāng)寬和高相同時(shí)
myView.size(widthHeight: 100.0)

frame

獲取frame

不使用框架的獲取方式

let frame: CGRect = myView.frame

使用框架的獲取方式

let frame: CGRect = myView.frame()

設(shè)置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])
//當(dāng)x, y和寬、高相同時(shí)
myView.frame(xy: 10.0, widthHeight: 100.0)

處理多個(gè)視圖

基礎(chǔ)操作

設(shè)置多個(gè)視圖相同的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])

設(shè)置多個(gè)視圖相同的right值

使用框架的獲取方式

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

設(shè)置多個(gè)視圖相同的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])

設(shè)置多個(gè)視圖相同的bottom值

使用框架的獲取方式

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

設(shè)置多個(gè)視圖相同的寬度

不使用框架的獲取方式

view1.frame.size.width = 100.0
view2.frame.size.width = 100.0

使用框架的獲取方式

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

設(shè)置多個(gè)視圖相同的高度

不使用框架的獲取方式

view1.frame.size.height = 100.0
view2.frame.size.height = 100.0

使用框架的獲取方式

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

設(shè)置多個(gè)視圖相同的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])
//當(dāng)x, y值相同時(shí)
UIView.point(xy: 10.0, views: [view1, view2])

設(shè)置多個(gè)視圖相同的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])
//當(dāng)寬和高相同時(shí)
UIView.size(widthHeight: 100.0, views: [view1, view2])

設(shè)置多個(gè)視圖相同的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])
//當(dāng)x, y和寬, 高相等時(shí)
UIView.frame(xy: 10.0, widthHeight: 100.0, views: [view1, view2])

對(duì)齊操作

框架支持多個(gè)視圖的對(duì)齊

//頂端對(duì)齊
UIView.top(views: [view1, view2, view3])
//底部對(duì)齊
UIView.bottom(views: [view1, view2, view3])
//左側(cè)對(duì)齊
UIView.left(views: [view1, view2, view3])
//右側(cè)對(duì)齊
UIView.right(views: [view1, view2, view3])

支持對(duì)齊到某個(gè)目標(biāo)位置

//頂端對(duì)齊
UIView.top(views: [view1, view2, view3], position: 50)
//底部對(duì)齊
UIView.bottom(views: [view1, view2, view3], position: 50)
//左側(cè)對(duì)齊
UIView.left(views: [view1, view2, view3], position: 50)
//右側(cè)對(duì)齊
UIView.right(views: [view1, view2, view3], position: 50)

分布操作

均勻分布視圖：

// 在第一個(gè)和最后一個(gè)視圖之間水平分布視圖
UIView.horizontal(views: [view1, view2, view3, view4]) 

// 在第一個(gè)和最后一個(gè)視圖之間垂直分布視圖
UIView.vertical(views: [view1, view2, view3, view4])

組合對(duì)齊和分布操作

在一次操作中對(duì)齊和分布視圖：

// 頂端對(duì)齊并且水平分布視圖
UIView.topAndHorizontal(views: [view1, view2, view3, view4]) 
// 頂端對(duì)齊到某個(gè)目標(biāo)位置并且水平分布視圖
UIView.topAndHorizontal(views: [view1, view2, view3, view4], position: 50) 
// 底部對(duì)齊并且水平分布視圖
UIView.bottomAndHorizontal(views: [view1, view2, view3, view4]) 
// 底部對(duì)齊到某個(gè)目標(biāo)位置并且水平分布視圖
UIView.bottomAndHorizontal(views: [view1, view2, view3, view4], position: 50) 

// 左側(cè)對(duì)齊并且垂直分布視圖
UIView.leftVertical(views: [view1, view2, view3, view4])
// 左側(cè)對(duì)齊到某個(gè)目標(biāo)位置并且垂直分布視圖
UIView.leftVertical(views: [view1, view2, view3, view4], position: 50)
// 右側(cè)對(duì)齊并且垂直分布視圖
UIView.rightVertical(views: [view1, view2, view3, view4])
// 右側(cè)對(duì)齊到某個(gè)目標(biāo)位置并且垂直分布視圖
UIView.rightVertical(views: [view1, view2, view3, view4], position: 50)

批量操作

框架支持?jǐn)?shù)組的方式批量操作視圖

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

views.width(width: 100.0)
views.width(width: 100.0, 1)//設(shè)置數(shù)組中第2個(gè)UIView的寬度

views.height(height: 100.0)
views.height(height: 100.0, 1)//設(shè)置數(shù)組中第2個(gè)UIView的高度

高級(jí)布局：構(gòu)建智能的、響應(yīng)式的界面

Aquarius開發(fā)框架提供了一個(gè)強(qiáng)大且靈活的布局系統(tǒng)，超越了基本的定位功能。通過高級(jí)布局技術(shù)，幫助你用最少的代碼和最大的靈活性創(chuàng)建復(fù)雜的UI布局。

Aquarius開發(fā)框架通過全面的布局方法擴(kuò)展了UIView，這些方法建立在原生基于框架的布局系統(tǒng)之上，使其更加直觀和強(qiáng)大。與Auto Layout的基于約束的方法不同，Aquarius開發(fā)框架提供了直接、命令式的API，易于理解且可以無縫動(dòng)畫。

相對(duì)定位

基礎(chǔ)操作

Aquarius開發(fā)框架最強(qiáng)大的功能之一是它能夠?qū)⒁晥D相對(duì)于彼此定位。這消除了在排列視圖時(shí)進(jìn)行復(fù)雜計(jì)算的需要。

// 將viewB定位在viewA下方，間距為10pt
viewB.alignTop(view: viewA, offset: 10)

// 將viewB定位在viewA右側(cè)，間距為15pt
viewB.alignLeft(view: viewA, offset: 15)

// 將viewB定位在viewA左側(cè)，間距為8pt
viewB.alignRight(view: viewA, offset: 8)

// 將viewB定位在viewA上方，間距為12pt
viewB.alignBottom(view: viewA, offset: 12)

批量操作

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

// 將views數(shù)組定位在viewA下方，間距為8pt
views.alignTop(view: viewA, offset: 8)

// 將views數(shù)組中第2個(gè)視圖定位在viewA下方，間距為8pt
views.alignTop(view: viewA, offset: 8, 1)

// 將views數(shù)組定位在viewA上方，間距為8pt
views.alignBottom(view: viewA, offset: 8)

// 將views數(shù)組中第2個(gè)UI視圖在viewA上方，間距為8pt
views.alignBottom(view: viewA, offset: 8, 1)

// 將views數(shù)組定位在viewA右側(cè)，間距為8pt
views.alignLeft(view: viewA, offset: 8)

// 將views數(shù)組中第2個(gè)視圖視圖iewA右側(cè)，間距為8pt
views.alignLeft(view: viewA, offset: 8, 1)

// 將views數(shù)組定位在viewA左側(cè)，間距為8pt
views.alignRight(view: viewA, offset: 8)

// 將views數(shù)組中第2個(gè)UI視圖視圖wA左側(cè)，間距為8pt
views.alignRight(view: viewA, offset: 8, 1)

這些方法簡(jiǎn)化了流布局的創(chuàng)建，并能夠在處理動(dòng)態(tài)內(nèi)容時(shí)無需手動(dòng)計(jì)算位置。

等同定位

基礎(chǔ)操作

當(dāng)希望視圖共享相同的邊緣位置時(shí)，equal方法提供了一個(gè)簡(jiǎn)潔的語法

// 使viewB的左邊緣與viewA相同（可選偏移）
viewB.equalLeft(target: viewA, offset: 5)

// 使viewB的右邊緣與viewA相同
viewB.equalRight(target: viewA)

// 使viewB的頂部邊緣與viewA相同
viewB.equalTop(target: viewA)

// 使viewB的底部邊緣與viewA相同
viewB.equalBottom(target: viewA)

// 使viewB的大小與viewA相同
viewB.equalSize(target: viewA)

// 使viewB的框架與viewA相同
viewB.equalRect(target: viewA)

// 使viewB的左側(cè)邊緣設(shè)置為0
viewB.equalZeroLeft()

// 使viewB的頂端邊緣設(shè)置為0
viewB.equalZeroTop()

// 使viewB的左側(cè)邊緣和頂端邊緣設(shè)置為0
viewB.equalZeroTopAndLeft()

批量操作

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

// 使views數(shù)組的左邊緣與viewA相同，間距為5pt
views.equalLeft(target: viewA, offset: 5)

// 使views數(shù)組中第2個(gè)視圖的左邊緣與viewA相同，間距為5pt
views.equalLeft(target: viewA, offset: 5, 1)

// 使views數(shù)組的右邊緣與viewA相同，間距為5pt
views.equalRight(target: viewA, offset: 5)

// 使views數(shù)組中第2個(gè)UI視圖邊緣與viewA相同，間距為5pt
views.equalRight(target: viewA, offset: 5, 1)

// 使views數(shù)組的寬度與viewA相同，間距為5pt
views.equalWidth(target: viewA, offset: 5)

// 使views數(shù)組中第2個(gè)視圖視圖viewA相同，間距為5pt
views.equalWidth(target: viewA, offset: 5, 1)

// 使views數(shù)組的高度與viewA相同，間距為5pt
views.equalHeight(target: viewA, offset: 5)

// 使views數(shù)組中第2個(gè)UI視圖視圖ewA相同，間距為5pt
views.equalHeight(target: viewA, offset: 5, 1)

這種方法非常適合創(chuàng)建對(duì)齊的UI元素，并在界面中保持視覺和諧。

屏幕感知定位

Aquarius開發(fā)框架提供了方便的方法來處理屏幕尺寸和系統(tǒng)UI元素：

// 設(shè)置視圖寬度與屏幕寬度相同
view.equalScreenWidth()

// 設(shè)置視圖高度與屏幕高度相同
view.equalScreenHeight()

// 設(shè)置視圖寬度和高度與屏幕高度相同
view.equalScrenSize()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄高度
view.equalScreenHeightNoStatus()

// 設(shè)置視圖高度與屏幕高度相同，減去導(dǎo)航欄高度
view.screenHeightNoNavigation()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄和導(dǎo)航欄高度
view.screenHeightNoStatusNoNavigation()

// 設(shè)置視圖高度與屏幕高度相同，減去底部安全區(qū)高度
view.screenHeightNoSafeAreaFooter()

// 設(shè)置視圖高度與屏幕高度相同，減去tabBar高度
view.screenHeightNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄和底部安全區(qū)高度
view.screenHeightNoStatusNoSafeAreaFooter()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄和tabBar高度
view.screenHeightNoStatusNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄、底部安全區(qū)和tabBar高度
view.screenHeightNoStatusNoSafeAreaFooterNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去導(dǎo)航欄和底部安全區(qū)高度
view.screenHeightNoNavigationNoSafeAreaFooter()

// 設(shè)置視圖高度與屏幕高度相同，減去導(dǎo)航欄和tabBar高度
view.screenHeightNoNavigationNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去導(dǎo)航欄、底部安全區(qū)和tabBar高度
view.screenHeightNoNavigationNoSafeAreaFooterNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄、導(dǎo)航欄和底部安全區(qū)高度
view.screenHeightNoStatusNoNavigationNoSafeAreaFooter()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄、導(dǎo)航欄和tabBar高度
view.screenHeightNoStatusNoNavigationNoTabBar()

// 設(shè)置視圖高度與屏幕高度相同，減去狀態(tài)欄、導(dǎo)航欄、底部安全區(qū)和tabBar高度
view.screenHeightNoStatusNoNavigationNoSafeAreaFooterNoTabBar()

動(dòng)畫集成：讓界面“活”起來

Aquarius開發(fā)框架針對(duì)布局系統(tǒng)提供簡(jiǎn)單的動(dòng)畫，所有布局系統(tǒng)相關(guān)的方法均提供動(dòng)畫功能

// 在0.3秒內(nèi)動(dòng)畫改變寬度
view.width(width: 200, animate: true, duration: 0.3)

// 使用默認(rèn)動(dòng)畫時(shí)長(zhǎng)改變位置
view.left(left: 50, animate: true)

// 使用自定義時(shí)序動(dòng)畫多個(gè)視圖到相同位置
UIView.bottom(bottom: 500, animate: true, duration: 0.5, views: [view1, view2, view3])
...

這種內(nèi)置的動(dòng)畫支持使創(chuàng)建布局狀態(tài)之間的平滑過渡變得簡(jiǎn)單，而無需額外代碼。

實(shí)戰(zhàn)案例：悅記 NoteView 布局剖析

下面以悅記APP中NoteView中a_Layout方法為例，展示Aquarius開發(fā)框架中布局系統(tǒng)的具體使用案例：

import UIKit
import Foundation

import Aquarius
import CommonFramework

class NoteView: BaseView {
    ...
    override func a_Layout() {
        super.a_Layout()

        searchBar.frame(frames: [
                8,
                8,
                screenWidth()-8*2,
                52
            ])

        noteTableView.size(sizes: [
                screenWidth(),
                screenHeight()-navigationBarHeight()-safeAreaFooterHeight()-tabBarHeight()-8
            ])
        noteTableView.equalTop(target: searchBar)
        noteTableView.equalLeft(target: self)

        footerView.equalWidth(target: noteTableView)
        footerView.height(height: 48.0)

        activityIndicatorView.equalSize(target: footerView)
        activityIndicatorView.equalZeroTopAndLeft()

        leftSpaceView.width(width: NoteCell.distance)
        leftSpaceView.equalHeight(target: noteTableView)
        leftSpaceView.equalZeroLeft()
        leftSpaceView.equalTop(target: noteTableView)
        leftSpaceView.target(rightSpaceView)
        leftSpaceView.equals([.size, .top])

        rightSpaceView.left(left: screenWidth()-NoteCell.distance)

        createNoteButton.size(widthHeight: 60)
        createNoteButton.point(points: [
                screenWidth()-60-16,
                screenHeight()-statusBarHeight()-navigationBarHeight()-tabBarHeight()-safeAreaFooterHeight()-createNoteButton.height()
            ])
    }
    ...
}

代碼解讀：

關(guān)系清晰：視圖間的依賴關(guān)系（如 equalTop, equalWidth）讓布局邏輯一目了然。
易于維護(hù)：當(dāng)某個(gè)視圖的尺寸或位置需要調(diào)整時(shí)，只需修改一處，相關(guān)視圖會(huì)自動(dòng)更新。
動(dòng)態(tài)適應(yīng)：使用 screenHeight(), navigationBarHeight() 等方法，布局能自動(dòng)適應(yīng)不同的設(shè)備尺寸和系統(tǒng)狀態(tài)。

為什么選擇Aquarius布局系統(tǒng)

特性	Aquarius	原生Frame	AutoLayout
代碼簡(jiǎn)潔性	?? 極致簡(jiǎn)潔	重復(fù)繁瑣	冗長(zhǎng)復(fù)雜
學(xué)習(xí)成本	?? 幾分鐘上手	較低	曲線陡峭
動(dòng)畫支持	?? 原生內(nèi)置	需手動(dòng)實(shí)現(xiàn)	實(shí)現(xiàn)復(fù)雜
運(yùn)行性能	?? 原生級(jí)性能	最佳	布局計(jì)算開銷

適用場(chǎng)景

?? 獨(dú)立開發(fā)者：追求開發(fā)效率，希望快速迭代。
?? 動(dòng)態(tài)UI：界面元素需要頻繁變化、動(dòng)畫豐富的應(yīng)用。
?? 代碼控：喜歡用代碼精確控制每一個(gè)像素，厭惡Storyboard的臃腫。
?? 遷移項(xiàng)目：老項(xiàng)目基于Frame，希望用最小成本引入現(xiàn)代布局方式。

總結(jié)

Aquarius開發(fā)框架的布局系統(tǒng)提供了Auto Layout的強(qiáng)大替代方案，強(qiáng)調(diào)可讀性、簡(jiǎn)潔性和動(dòng)畫集成。通過本篇文章介紹的相關(guān)技術(shù)，你可以用更少的代碼創(chuàng)建復(fù)雜的布局，同時(shí)保持對(duì)UI元素定位和動(dòng)畫的完全控制。

直觀的相對(duì)定位、靈活的分布方法和內(nèi)置的動(dòng)畫支持相結(jié)合，使Aquarius開發(fā)框架成為需要?jiǎng)?chuàng)建動(dòng)態(tài)、響應(yīng)式界面的開發(fā)者的絕佳選擇，而無需約束布局的復(fù)雜性。

立即體驗(yàn)Aquarius：

第一步：探索資源

? Star & Fork 框架源碼： GitHub - JZXStudio/Aquarius - 支持項(xiàng)目發(fā)展
? Star & Fork 悅記源碼： GitHub - JZXStudio/yuenote - 完整案例，深入了解框架使用方式

第二步：體驗(yàn)效果

?? 下載示例APP：悅記 | 愛尋車 - 感受真實(shí)項(xiàng)目中的流暢體驗(yàn)

第三步：溝通交流

?? 提交Issue： GitHub Issues - 反饋問題或建議
?? 聯(lián)系與反饋： studio_jzx@163.com - 直接交流開發(fā)心得

posted @ 2025-10-10 23:50 JZXStudio 閱讀(201) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

jzxstudio

4.布局系統(tǒng)

Aquarius布局系統(tǒng)簡(jiǎn)介

基礎(chǔ)布局：重塑單個(gè)視圖的操控體驗(yàn)

處理單個(gè)視圖

位置

大小

point

Size

frame

處理多個(gè)視圖

基礎(chǔ)操作

對(duì)齊操作

分布操作

組合對(duì)齊和分布操作

批量操作

高級(jí)布局：構(gòu)建智能的、響應(yīng)式的界面

相對(duì)定位

基礎(chǔ)操作

批量操作

等同定位

基礎(chǔ)操作

批量操作

屏幕感知定位

動(dòng)畫集成：讓界面“活”起來

實(shí)戰(zhàn)案例：悅記 NoteView 布局剖析

為什么選擇Aquarius布局系統(tǒng)

適用場(chǎng)景

總結(jié)

公告