本文通過(guò)實(shí)現(xiàn)閑魚(yú)首頁(yè)岁疼，對(duì)之前所掌握的Swift視圖和布局技術(shù)都進(jìn)行一遍操練缆娃，以此加深印象。
效果演示：
[圖片上傳失敗...(image-298b9f-1658462671077)]
實(shí)現(xiàn)功能
- 啟動(dòng)頁(yè)
- 頁(yè)面切換
- 主界面顯示
分析
- 整體上共分成五個(gè)頁(yè)面：“閑魚(yú)”暖侨、“會(huì)玩”崇渗、“發(fā)布”、“消息”葫掉、”我的“乘碑。
- ”閑魚(yú)“頁(yè)面分成三部分：標(biāo)題欄、搜索欄套腹、主內(nèi)容界面
- ”閑魚(yú)“界面可以有”關(guān)注“、”推薦“幢码、”本地“三種界面尖飞。
1、 界面整體布局
界面整體布局
說(shuō)明：
- 整體上分為五個(gè)視圖
- 這里僅對(duì)”閑魚(yú)“視圖進(jìn)行了詳細(xì)設(shè)計(jì)贞铣，其他四個(gè)視圖只起到占位效果
- VStack{}就說(shuō)明內(nèi)容為空
- 通過(guò)tabItem的設(shè)置給每一項(xiàng)設(shè)置了顯示
- 發(fā)布視圖只設(shè)置了圖標(biāo)
- 通過(guò)selectedTab判斷選中的是哪一項(xiàng)辕坝，來(lái)決定是否高亮
- 因?yàn)樯婕暗搅朔猪?yè)荐健，所以使用TabView來(lái)設(shè)置，
2纺酸、 閑魚(yú)界面布局
閑魚(yú)界面布局
說(shuō)明：
- 整體布局為垂直布局址否，所以使用VStack。
- 標(biāo)題為水平布局用含，使用HStack
- 搜索為水平布局帮匾，使用HStack
- 內(nèi)容可以分為關(guān)注、推薦缸夹、本地螺句，所以使用TabView來(lái)設(shè)置，設(shè)置每一項(xiàng)芽唇。視圖分別為attentionView、recommendView研侣、localityView炮捧。
- 這里還需要注意tabViewStyle的設(shè)置，PageTabViewStyle表示分頁(yè)末誓，indexDisplayMode設(shè)置不顯示小白點(diǎn)
3书蚪、 標(biāo)題
標(biāo)題
說(shuō)明：
- 創(chuàng)建圖片有可能會(huì)失敗殊校，所以是可選項(xiàng)
- Spacer可以看做是一個(gè)空視圖
- 通過(guò)ForEach顯示多個(gè)Tab切換按鈕，動(dòng)態(tài)添加每一項(xiàng)
- 使用默認(rèn)動(dòng)畫(huà)，點(diǎn)擊后拿到當(dāng)前按鈕的tabSwitch
- 對(duì)按鈕樣式進(jìn)行設(shè)置宪萄，選中的tabSwitch如果就是當(dāng)前的i,那么就高亮顯示。否則灰顯
4静汤、 搜索框
搜索框
說(shuō)明：
- 可以分為兩部分：搜索框虫给、分類圖標(biāo)
- 將搜索框整體作為一個(gè)圖標(biāo)來(lái)顯示
- 搜索框又包含了掃描按鈕侠碧、豎線、輸入框药蜻、搜索文本
- 豎線通過(guò)文本視圖Text來(lái)設(shè)置替饿，文本為空，僅設(shè)置背景色
- 通過(guò)Text設(shè)置占位文字踱卵。為了演示這里使用了Text据过，實(shí)際上應(yīng)該使用TextField
- 查看搜索文本視圖的設(shè)置：
- foregroundColor:文本顏色
- opacity：透明度
- background：背景顏色妒挎。
- cornerRadius：邊框圓角
- padding：內(nèi)邊距
- 通過(guò)overlay給搜索框覆蓋一個(gè)邊框班利。cornerRadius設(shè)置圓角
5罗标、 attentionView
分為兩部分：常訪問(wèn)的人、查看寶貝
5.1 常訪問(wèn)的人
常訪問(wèn)的人
說(shuō)明：
- 常訪問(wèn)的人使用HStack進(jìn)行水平布局
- 人員信息視圖需要水平滾動(dòng)彻消，所以使用ScrollView宙拉，并且設(shè)置為.horizonta
- 每個(gè)視圖都進(jìn)行垂直布局，分別為圖標(biāo)和文本煌贴。
- lineLimit設(shè)置最大行數(shù)為1锥忿，如果超出視圖大小，則顯示為...
5.2 查看寶貝
查看寶貝
說(shuō)明：
- 視圖需要滾動(dòng)顯示淹朋，所以使用ScrollView
- 使用ForEach動(dòng)態(tài)添加多個(gè)視圖
- 每個(gè)寶貝視圖包含三部分：1.用戶信息础芍；2. 寶貝描述数尿；3. 寶貝圖片
- 字典獲取的是可選項(xiàng)
- 使用overlay覆蓋描述信息
6、 recommendView
6.1 品牌選擇
品牌選擇
說(shuō)明：
- 水平設(shè)置閑魚(yú)優(yōu)品的圖片虏缸，使用HStack
- 依然通過(guò)HStack + ForEach 水平布局多個(gè)視圖嫩实，每個(gè)視圖都顯示圖片+文本
Grid
說(shuō)明：
- 通過(guò)Grid設(shè)置表格
- 在columns中設(shè)置每列，可以對(duì)每列進(jìn)行設(shè)置宰缤，這里都設(shè)置為.flexible()
- 依然通過(guò)ForEach設(shè)置每個(gè)表格內(nèi)的信息
6.2 類型選擇
類型選擇
說(shuō)明：
- 很明顯需要水平布局，而且可以滾動(dòng)
- 這里的weirdAlignment是自定義對(duì)齊方式朦乏。是水平對(duì)齊
- 如果在不同的場(chǎng)景下會(huì)有多種不同樣式的顯示氧骤，可以使用Group進(jìn)行包裝
- 沒(méi)有選中，設(shè)置為按鈕刽锤，并且使用默認(rèn)動(dòng)畫(huà)來(lái)更改
6.3 寶貝選擇
寶貝選擇
說(shuō)明：
- 使用ScrollView可以讓視圖整體上下滾動(dòng)
- 每個(gè)元素使用表格來(lái)顯示并思，設(shè)置為兩列
- 每個(gè)元素都分為四部分：1. 寶貝圖片语稠；2. 寶貝描述；3. 價(jià)錢(qián)和想要输涕；4. 用戶信息
- 通過(guò)設(shè)置offset進(jìn)行相對(duì)布局
7慨畸、 localityView
localityView
說(shuō)明：
- 分為三部分：1. 查找選項(xiàng)先口；2. 出租信息瞳收；3. 詳細(xì)顯示
- 所涉及視圖和布局前文都已說(shuō)明，這里便不再贅述了
8螟深、啟動(dòng)頁(yè)
在Assets中創(chuàng)建啟動(dòng)圖片和啟動(dòng)顏色界弧，分別為launch和launchColor
進(jìn)入到Target -> Info，進(jìn)行如下設(shè)置
設(shè)置
啟動(dòng)效果：
啟動(dòng)效果
