【iOS app 學習筆記】iOS Settings app Clone

這次想說透過模仿「設定」app來學習上課所學到的東西

此作業會運用到的Controller:Navigation Controller, Table View Controller

首先,要將Table View Controller連結到Navigation Controller,讓接下來的頁面可以做有滑動串起來,並將Navigation Bar的Prefers Large Title打勾,來達到進入畫面時,「設定」兩個字是大的,但當畫面項下滑時,「設定」會跑到畫面的最上面。

Prefers Large Title要打勾!

接下來,為了要達到iOS 15設定app頁面那種,有分段,而且每一段都有圓潤的外框的設計,則需要在Table View裡的Style設定為Inset Grouped。
同時,也要將Content設定為Static Cell(因為這次並沒有要寫程式碼,因此只能用固定的Cell)

接下來就是加入Table View Cell了,這邊我分成了三個Session,這三個Session對應到的就是iOS Settings的前三個Session

第一個Session由Image View(Apple Logo)和Label(所有的文字)組成,Apple的Logo是用內建的icon做出來的,並且有將其切圓角(雖然因為背景是白色,icon背景如果設定有顏色又會看起來沒有置中,所以就不特別將它顯示出來了😅)。
切圓角的部分是選取Image View後,點選右側欄上方Show the Identity inspector,在User Defined Runtime Attributes中加入:
Key Path: layer.cornerRadius
Type: Number
Value:image邊長的一半
來達到做出圓形圖示的效果

而Table Cell最右邊的小箭頭是為了要提示使用這,這個Cell是可以點的,而這的圖示則是要從Table View Cell來設定。
將Table View Cell下的Accessory點開後,會看到五個選項,如果要顯示小箭頭的話,就是要點選Disclosure Indicator。

第二和第三個Session跟第一個其實差不多,以下先列出每個icon所對應的英文是什麼(因為有些我找了很久😭)。
飛航模式:airplane
WiFi:wifi
藍芽:怎麼都找不到…
行動網路:antenna.radiowaves.left.and.right
通知:app.badge
聲音:speaker.wave.2.fill
勿擾模式:moon.fill
螢幕使用時間:hourglass
接下來,則是設定icon的圓角,我這邊設定為5;
最後則是將這些Table Cell與其他的頁面連線了(因為時間關係,我只做了WiFi和藍芽的頁面)。

因為藍芽和WiFi的頁面其實也是雷同的,因此這邊就一起講。

一樣是將頁面分成了幾個Session,Session上的灰色小字,或是Session下的灰色小字,都是在Table View Session中設定的:

以藍芽頁面的“其他裝置“部分為例

Header就是上面的小灰字,Footer則是下方的小灰字。

以上,頁面設計的部分就告一個段落了,未來學到寫Swift的時候,也許會再把透過這個小app來練習。

補充 App icon設定:
參考彼得潘的這篇文章後,也在App Icon的網站上去產出了app的icon,定放入Assets資料夾中,就完成了icon的設定~

--

--