iOS HW RE: #24 Storyboard 電子書 App

iOS製作 Storyboard 電子書App作業-文字小說遊戲

上面的連結，是我上次做的電子書作業。

其實我這次可以pass這個作業的，可是我想要詳細寫出製作流程，所以我打算再寫一篇出來。

#24 Storyboard 電子書 App

=

先把第一個View Controller加上兩個Controller

剛開新的project時，不是在main.storyboard會有一個初始的View Controller嗎？

我先在它embed in Navigation Controller, 再在Navigation Controller上，embed in Tar Bar Controller。

由來是參考這篇文章：

tab bar controller & navigation controller 的先後順序

裡面是建議先加Navigation Controller，再加Tar Bar Controller，讓Tar Bar Controller成為初始頁面比較不會有bug出現。

所以我就照做。

＝

接下來我要調整Tar Bar，所以按Tar Bar Controller上的按鈕，直接跳到Tab Bar去做設定。

調整Tab Bar設定

右邊選取，呈現的樣子

然後我想要Tar Bar展現出來，不要是透明的(預設值)，所以我再去Interface Builder把Standard & Scroll Edge勾選起來。

成果如下，Tab Bar呈現出來了，還帶有毛玻璃效果！

＝

再來要設定Tab Bar的圖案和文字。
在調整之前，先學會如何選取到它們。

要按的地方是Navigation Controller的item圖示。

每設定一個分頁的標籤，就要去該分頁的Navigation Controller點選來設定圖示和文字。

被選取到的樣子

設定完成後，連頁面名字都改了。

title改分頁標籤的名字，image則為該標籤的圖案；通常是直接使用內建的SF symbol。

如何載入SF symbol的圖案？ A:直接打名字，自然就有選單讓你選了。

Xcode真聰明！

如果不知道腦中想像出那個圖案是叫什麼，沒關係，chatgpt會救你。

向AI求助

Badge是分頁標籤圖案左上角的顯示。

Badge輸入100後的樣子，顏色預設為紅色。

＝

剛剛Xcode當掉了==|||

所以我強制關掉再重開，發現View Controller有問題。

所以我殺掉原本的，再重新建立一個View Controller。

從Navigation Controller按右鍵，建立segue連到View Controller時，要選root view controllers。

此時要重新建立Navigation Controller和View Controller之間的Segue，從Navigation Controller上按右鍵，拖到View Controller放開出現選單時，按照上圖操作即可重新連結起來。

＝

如法泡製，可以在創造出n個分頁出來。

然後我想要每一個分頁，都有自己的storyboard，怎麼辦？

照下面連結做。

利用多個 storyboard 和 storyboard reference 製作 App 畫面

首先，把要加入新增的View Controller全部選取起來。

再按command + shift + a叫出Quick Actions，選Refactor to Storyboard

再來會跳出新增storyboard的畫面，取個好名字吧！

記得Targets要勾選起來

再來就會看到main.storyboard上，長出新的方塊指向新storyboard了

指向的就是剛剛新增的tsukihime.storyboard

tsukihime.storyboard打開後的樣子

完成啦！

=

從Tar Bar Controller拉Segue到Navigation Controller，要按的是view controllers。（因為我又創立新的分頁，所以要自己拉線了。）

從Tar Bar Controller拉Segue到Navigation Controller，要按的是view controllers。

=

自從有Navigation Controller之後，我們就可以設定連在Navigation Controller之後的“每一個”View Controller的Navigation Bar，來設定：每一頁的title、下一頁的Back Button。

和Navigation Controller連接的View Controller

Title可以設定分頁的標題。

Back Button則是下一頁的Back鍵上，顯示的文字。

UIKit navigation bar 的 back 按鈕設定

可以根據上面的連結的說明來設定。

當每頁Navigation Bar被選取時

選取到View Controller的Navigation Bar時，就可以設定上一張圖裡的View Controller的設定。

title設為”月姬“，back button則不設定時（不特別設定，Back Button通常為上一頁的title）

在這裏，我們可以設定這一頁的title，和下一夜要顯示的Back Button

=

Table View Controller與其相關設定

Library

找出Table View Controller

Table View Controller是表格的Controller，整夜都是表格。

從右邊的三條線的Table View欄位的Content，可以設定要Dynamic（動態），還是要Static（靜態）

Dynamic Prototypes要搭配程式才能辦到，我現在還是小朋友，所以我選擇不用寫程式、只靠Storyboard就可以達成的Static Cells。

Content設定成Static Cells時，表格形式如下圖。

設定成Static時，cells預設有三個。

跑模擬器測試，Navigation Controller接Table Bar Controller時，選單如果選show，死機。

陣亡了

跑模擬器測試，Navigation Controller接Table Bar Controller時，選單如果選root view controller，跑起來了！

成功，不是一片黑了

從Table View Cell拉線

看左邊欄位，確定選到“Table View Cell”就可以按右鍵，拉Segue過去到下一頁View Controller了。

此時選最上面的”show”

拉線成功

Table View Cell可以有些細節設定，像上圖中的Cell右邊，有一個”>”，也是透過Interface Builder的Accessory設定的。

選擇Disclosure Indicator，就可以在Cell右邊有>

記住，Table View Cell可以點選，所以自然也可以像Button拉出Segue出來到下一頁。

=

Scroll View的設定

原本我是想用APIs去抓該網頁的資料，可是我想到我還不會寫程式，所以只能退而求其次，改成抓網頁中的文字，做成可以捲動的Label來代替。

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

上面的連結是Scroll View的做法，我也是根據這個連結的做法，做出可以上下捲動的效果的。

先在View Controller上加入Scroll View，如下。

在View Controller上加入Scroll View

可是你在Scroll View上，是不能加入UI元件的，如Button。

所以該怎麼辦？ A:加入個Vew!

在Scroll View上加入View後的樣子

左邊的欄位

把View調整後，並加入字超多的Label

View手動調整成全版，並加入超～長的label

再來回到Scroll View，要加入讓畫面捲動的設定了

在Scroll View的User Defined Runtime Attributes手動加入設定。

要加入的設定是contentSize，按”+”加入。

字大小寫、字母都不能打錯，Type選Size

重點來了，這個Value的值要大於Scroll的Size(width x height)，畫面才能捲動。

我不要左右捲動，所以width設為0，height就設為label的，接下來就可以上下捲動了。

這樣就設定完成了！

結果如下面的gif

結果

＝

LaunchScreen.storyboard的設定

放一張圖，完成

就是app啟動畫面，頂多一秒鐘，所以我就放一張型月社的ICON而已。

有些看起來像動畫的，就是放一張動畫上去，然後跑個一秒這樣。

＝

App名字

點選專案名字->General->Display Name去輸入你想要的名字

從專案eBook變成電子書了

＝

這是GitHub:https://github.com/psp123456e/eBook