# 5 作業: 模仿一頁精美的 app 畫面
應用下列 UI 元件模仿一頁 iOS app 畫面:
Table View Controller, Navigation Controller, Table View Controller
Label, Button, Text View, Scroll View, Image View
App Store 遊戲的頁面:
畫面截圖:
1.建立 Table View Controller 建立後,點選 ① Table View 將 Table View 的 Content 改為 ② Static Cells (靜態/固定的表格),修改完成後 ③ 的紅框處會改變顯示名稱,以做這次主要的作業架構。
2.1 UIView 在加入 Scroll View 前,先拖曳至 Exit 下方,並將寬度拉至需要大小進行 UIView 元件顯示內容的編輯。
2.2 內容編輯完成後,再將 UIView 拖曳至 Scroll View 內,並將起始位置設為開頭 0 。
2.3 進入 Scroll View 的 Identity Inspector 新增 Key Path ,跟 Scroll View 説我們 View 的大小,它才會乖乖的實現捲動模式。
Key Path 一字不差的輸入: contentSize
Type : Size
Value : 左右捲動僅需設定 (X,Y) 括號內的 X值,Y保持 0
另外,將 Scroll View 屬性的 Paging Enabled 打勾啟用後可開啟翻頁效果
3. Text View 內容僅讓使用者瀏覽,將 Attributes Inspector 內 Editable, Selectable 關閉。
4. Table Cells 被點選時顏色設定方式,① 點選要邊更的 Cell,② 將 Table View Cell 的 Selection 變更為 None。
SF Symbols 的 icons 太龐大了,只能找個大概啦!!🤣🤣
最後附上 GitHub 連結