三、只用storyboard 製作日本童話 電子書App
2023/11/15更新:利用 Refactor to Storyboard解決大量controller導致Xcode卡卡的問題。(storyboard reference)
會以日本童話為主題,起因是我想到了日本童話白鶴報恩,故事是老爺爺老奶奶救了一隻白鶴,白鶴化身為女孩子來報恩的故事。勸人為善,好人有好報。
日本童話裡好像很多老爺爺老奶奶,而且裡面的老人好像人都蠻好的。這讓我回憶起,我以前去日本玩的時候,也有遇到很多親切友善的老爺爺老奶奶,可能童話裡不是騙人的。
鶴,廢話不多說,先來用日本素材庫尋找了可愛的鶴圖,用來做app icon與LaunchScreen。
在規劃app的時候,其實夢想做一個按切換就可以轉成日文版本的電子書,但似乎有些難度,並且必須搭配code才能實現。
因為作業題目是不用code做出電子書app,決定等之後的作業再來發揮好了。(反正之後還有很多作業)
步驟:
一、加上tab bar controller與navigation controller,以及以table view controller with static cells呈現故事內容。
- 利用navigation controller+Segue讓頁面用左右切換的方式呈現下一頁
- 利用tab bar controller連接兩種類型故事(中文故事分頁、日文故事分頁)的table view controller
3.用 segue 串接故事頁面。
畫面思考:我真的不太擅長想怎樣的畫面是美的。大學時好朋友開玩笑說我是中華民國美學,也不知道這麼多年來(也沒有那麼多年啦)有沒有隨著歲月增長而進步?最後我決定不做看得到的button,讓user隨處一按就可以換頁。
突然想到市面上電子書app,按下畫面左邊可以回前一頁,右半邊可以去下一頁。在電子書app裡加入能前後移動的功能應該會好看又方便。
- 把image view蓋在上面,下面藏button,
- 把button的Tint設定為clear color,再用button拉 segue,今天先一倍的segue,神給我一,神不會給我四。
- navigation bar勾選 Standard & Scroll Edge即有返回上一頁的功能。
雖然上一堂課課堂有教了有新功能可以更方便的按下圖片即可換頁,但其實換頁功能是上上禮拜做的,索性就先不更改。
沒錯,我一個作業做三個禮拜
超不受教~~
二、使用 UITextView,讓user點文字即連接網頁。
於attributes inspector:
- 取消勾選Editable,不准使用者編輯。
- 並於Data Detectors欄位打勾link。
哇,不對,這可不是部落格或郵件系統,可以點開超連結就能簡單連接文字跟連結,如果我只是這樣做,那我必須在Text欄直接打網址。但這不是我期待的。
- UITextView的Tint選為clear color。雖然在storyboard中仍會以黑字顯示,但一啟動simulator之後就會是透明的了。
- 加上UILabel,改名為參考連結
三、無止盡的複製貼上故事與view controller
- 設計完頁面後複製view controller,並且懶惰地不想對齊分頁,並更改text內容。
- 因為複製貼上的view controller會重疊在一起,一開始多複製了幾個都重疊在一塊,我還困惑為什麼改過的text內容完全沒變,多改了幾次才發現:因為重疊在一起,隨著我的更動,未更改且多餘的頁面浮上來,所以每次我點到它們,都是沒更改過的樣子……太笨啦~
3.在製作日文故事畫面的時候,發現了臆想得到但果然還是發生了的事情……那就是,同樣的內容,日文硬是比中文多幾行,尤其是最後一頁的結局,根本塞不下啦~只好多加一頁來解決。
4.終於完成啦。這項作業真是有點曲折,中間經歷了兩個颱風、媽媽住院、做太多分頁電腦開始小卡卡,還是做完了!
2023/11/15更新:利用 Refactor to Storyboard解決大量controller導致Xcode卡卡的問題。
Refactor to Storyboard
- 我想將日文的頁面通通另外儲存為新的storyboard。
- 匡選欲移動的controller,Quick Actions選單快速找出Refactor to Storyboard功能。跳出取名,取為「Japanese.storyboard」
2.畫面即如願都搬到了新的 storyboard。
3.數量減半的Main.storyboard。
4.原本的連接處,只剩下一條未盡的線,連接寫明了指向Japanese.storyboard。(字好小)
5.更新上GitHub
後記:童話故事的日文翻譯是:「昔話(むかしばなし)」
雖然如果就字面來看的話好像會理解為:「過去的故事」,但動物應該是不可能變成孩子來報恩的。
大家在路上看到動物有危險,出手相救的同時,請不要有奇怪的期待。
參考文章:
文中提到素材庫: