大家好惊楼，我是姜友華，前面兩章我們實(shí)現(xiàn)了兩類(lèi)視圖秸讹，一個(gè)是標(biāo)簽視圖胁后，一個(gè)是分割視圖。這一節(jié)我們來(lái)實(shí)現(xiàn)布局的控制嗦枢。
在進(jìn)行布局控制之前，我們先來(lái)了解一下布局屯断。
一文虏、布局的設(shè)定侣诺。
布局的構(gòu)成
上圖是我們對(duì)當(dāng)前應(yīng)用進(jìn)行的布局設(shè)定，它有以下特征氧秘。
- 布局是由分割視圖（SplitView）和標(biāo)簽視圖（BlockView）組成年鸳，前者為枝節(jié)點(diǎn)，后者為葉節(jié)點(diǎn)丸相。
- 每一個(gè)BlockView會(huì)加載一組功能視圖搔确。
- 每個(gè)SplitView必須至少包含有一個(gè)BlockView，如果沒(méi)有灭忠，則該SplitView可被移除膳算。
二、 數(shù)據(jù)的設(shè)定弛作。
1）數(shù)據(jù)的定義涕蜂。
通過(guò)布局的設(shè)定，我們可以理解為布局是加載一組樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)映琳。所以我們將這下數(shù)據(jù)抽取出來(lái)机隙，表現(xiàn)如下：
struct Layout: Codable {
static func == (lhs: Layout, rhs: Layout) -> Bool {
return lhs.id == rhs.id
}
var id = Date.id
var children: [Layout] = [] // 為空時(shí)為葉節(jié)點(diǎn)
var kind: Kind = .hSplit
var bar: Bar = Bar()
var length: CGFloat? = nil
enum Kind: Codable, Equatable, Hashable {
case hSplit // 橫的
case vSplit // 豎的
case chapter // 章節(jié)窗口
case assist // 輔助功能窗口
}
struct Bar: Codable, Equatable, Hashable{
var tags: [Int] = [0]
var current: Int = 0
}
}
-
id、kind萨西、bar有鹿、length，都是附加數(shù)據(jù)谎脯。分別表示創(chuàng)建的時(shí)間葱跋、視圖的類(lèi)型、占寬或高等信息穿肄。 -
children年局，表示為布局視圖的子節(jié)點(diǎn)。 -
kind咸产，表示葉節(jié)點(diǎn)加載的視圖的類(lèi)型矢否。暫時(shí)定義了4種：-
hSplit水平分割的視圖； -
vSplit垂直分割的視圖脑溢； -
chapter章節(jié)視圖僵朗； -
assist輔助功能視圖。
-
-
Bar結(jié)構(gòu)體屑彻，需要說(shuō)明一下验庙。- tags，打開(kāi)的標(biāo)簽社牲。
- current粪薛，當(dāng)前的標(biāo)簽。
2）對(duì)應(yīng)用的視圖搏恤。
- LayoutView违寿，對(duì)應(yīng)用
kind = hSplit或kind = vSplit, 加載layout湃交，并實(shí)現(xiàn)布局的分割與嵌套, 與其實(shí)類(lèi)型的實(shí)例化。 - ChapterView藤巢，對(duì)應(yīng)用
kind = chapter, 加載章節(jié)內(nèi)容搞莺。 - AssistView，對(duì)應(yīng)用
kind = assist, 為輔助功能視圖掂咒。具體到每個(gè)輔助功能才沧，則都有自己的視圖，暫定的有：
- CatalogView绍刮，目錄温圆。
- MindView, 導(dǎo)圖。
- ReminderView录淡，備忘捌木。
- SymbolView，符號(hào)嫉戚。
- CollectView刨裆，收藏。
- SearchView彬檀，搜索帆啃。
- Layout數(shù)據(jù)示例：
let layout: Layout = Layout(
children:[Layout(
kind: .assist,
bar: Layout.Bar(tags: [0], current: 0),
length: 200
),Layout(
kind: .chapter,
bar: Layout.Bar(tags: [0], current: 0),
length: 400
),Layout(
kind: .assist,
bar: Layout.Bar(tags: [1,2,3,4,5], current: 1),
length: 400
)],
kind: .hSplit
)
我們定義一個(gè)layout，它水平顯示3欄：
- 加載目錄窍帝，寬200;
- 加載文章努潘，寬400;
- 加載其它輔助功能，寬400.
需要注意的是坤学，首先疯坤，為什么是寬？因?yàn)檫@是水平的kind: hSplit布局深浮，如果是垂直的布局則為高压怠；其次，為什么第一欄加載的是目錄飞苇？因?yàn)槲覀兂跏蓟艘唤M輔助功能數(shù)據(jù)菌瘫。
let assists = [
Assist(kind: .catalog),
Assist(kind: .mind),
Assist(kind: .reminder),
Assist(kind: .symbol),
Assist(kind: .collect),
Assist(kind: .search)
]
運(yùn)行一下，看看效果布卡。
布局的顯示效果
三雨让、操作的設(shè)定。
從布局的設(shè)定可以看出忿等，界面的表面會(huì)被ChapterView或AssistView所覆蓋栖忠，也就是說(shuō)，我們無(wú)論將標(biāo)簽拖到哪個(gè)位置，其下必然有ChapterView或AssistView娃闲。因此我們只需要在ChapterView或AssistView上對(duì)拖移作反應(yīng)即可虚汛。這種反映叫熱區(qū)反映。
`BlockView`的反應(yīng)區(qū)
熱區(qū)分上下左右中和頂部皇帮，其中頂部為標(biāo)簽欄。
- 左蛋辈、右熱區(qū)属拾。表示隨標(biāo)簽移動(dòng)的
FunctionView將與熱區(qū)BlockView水平排列，并放置其左或其右冷溶。 - 上渐白、下熱區(qū)。處理邏輯同上逞频，位置為其上或其下纯衍。
- 中、頂熱區(qū)苗胀。表示隨標(biāo)簽移動(dòng)的
FunctionView將加入到熱區(qū)BlockView里襟诸，作為標(biāo)簽方式呈現(xiàn)。 - 經(jīng)過(guò)左熱區(qū)時(shí)基协，
BlockView視圖區(qū)左則顯示蒙版歌亲。右、上澜驮、下如之類(lèi)推陷揪。 - 經(jīng)過(guò)中熱區(qū)時(shí)，
BlockView視圖區(qū)顯示全蒙版杂穷。 - 經(jīng)過(guò)頂熱區(qū)時(shí)悍缠，
BlockView標(biāo)題區(qū)顯示位置蒙版。
好耐量，這一節(jié)就這些飞蚓，我是姜友華，下次見(jiàn)拴鸵。
