# 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 連結

--

--