三、只用storyboard 製作日本童話 電子書App

2023/11/15更新:利用 Refactor to Storyboard解決大量controller導致Xcode卡卡的問題。(storyboard reference)

會以日本童話為主題,起因是我想到了日本童話白鶴報恩,故事是老爺爺老奶奶救了一隻白鶴,白鶴化身為女孩子來報恩的故事。勸人為善,好人有好報。

日本童話裡好像很多老爺爺老奶奶,而且裡面的老人好像人都蠻好的。這讓我回憶起,我以前去日本玩的時候,也有遇到很多親切友善的老爺爺老奶奶,可能童話裡不是騙人的。

鶴,廢話不多說,先來用日本素材庫尋找了可愛的鶴圖,用來做app icon與LaunchScreen。

看app的icon應該會發現我一開始只想做白鶴報恩一個故事

在規劃app的時候,其實夢想做一個按切換就可以轉成日文版本的電子書,但似乎有些難度,並且必須搭配code才能實現。

因為作業題目是不用code做出電子書app,決定等之後的作業再來發揮好了。(反正之後還有很多作業)

步驟:

一、加上tab bar controller與navigation controller,以及以table view controller with static cells呈現故事內容。

  1. 利用navigation controller+Segue讓頁面用左右切換的方式呈現下一頁
  2. 利用tab bar controller連接兩種類型故事(中文故事分頁、日文故事分頁)的table view controller

3.用 segue 串接故事頁面。

畫面思考:我真的不太擅長想怎樣的畫面是美的。大學時好朋友開玩笑說我是中華民國美學,也不知道這麼多年來(也沒有那麼多年啦)有沒有隨著歲月增長而進步?最後我決定不做看得到的button,讓user隨處一按就可以換頁。

突然想到市面上電子書app,按下畫面左邊可以回前一頁,右半邊可以去下一頁。在電子書app裡加入能前後移動的功能應該會好看又方便。

  1. 把image view蓋在上面,下面藏button,
  2. 把button的Tint設定為clear color,再用button拉 segue,今天先一倍的segue,神給我一,神不會給我四。
  3. navigation bar勾選 Standard & Scroll Edge即有返回上一頁的功能。

雖然上一堂課課堂有教了有新功能可以更方便的按下圖片即可換頁,但其實換頁功能是上上禮拜做的,索性就先不更改。

沒錯,我一個作業做三個禮拜

超不受教~~

設計app的畫面是我覺得最困難的地方…雖然一開始有大概的規劃,但總是做到一半發現不滿意,又一直改來改去

二、使用 UITextView,讓user點文字即連接網頁。

於attributes inspector:

  1. 取消勾選Editable,不准使用者編輯。
  2. 並於Data Detectors欄位打勾link。

哇,不對,這可不是部落格或郵件系統,可以點開超連結就能簡單連接文字跟連結,如果我只是這樣做,那我必須在Text欄直接打網址。但這不是我期待的。

  1. UITextView的Tint選為clear color。雖然在storyboard中仍會以黑字顯示,但一啟動simulator之後就會是透明的了。
  2. 加上UILabel,改名為參考連結
在outline裡,最下面的object,圖層是在最上面

三、無止盡的複製貼上故事與view controller

  1. 設計完頁面後複製view controller,並且懶惰地不想對齊分頁,並更改text內容。
  2. 因為複製貼上的view controller會重疊在一起,一開始多複製了幾個都重疊在一塊,我還困惑為什麼改過的text內容完全沒變,多改了幾次才發現:因為重疊在一起,隨著我的更動,未更改且多餘的頁面浮上來,所以每次我點到它們,都是沒更改過的樣子……太笨啦~
一開始分段分得有點短,頁面比想像中的還要多了一點點(一直複製分頁),然後又發現重疊事件,慘兮兮。
開始製作第二個故事,小心地直接複製第一個故事的view controllers,然後複製貼上後,按著藍色的那條槓,小心地全部一起移動到下面,成功啦~如此Segue的設定都保留住了,只需改背景圖跟text

3.在製作日文故事畫面的時候,發現了臆想得到但果然還是發生了的事情……那就是,同樣的內容,日文硬是比中文多幾行,尤其是最後一頁的結局,根本塞不下啦~只好多加一頁來解決。

都跑到人家bar上面了。

4.終於完成啦。這項作業真是有點曲折,中間經歷了兩個颱風、媽媽住院、做太多分頁電腦開始小卡卡,還是做完了!

2023/11/15更新:利用 Refactor to Storyboard解決大量controller導致Xcode卡卡的問題。

Refactor to Storyboard

  1. 我想將日文的頁面通通另外儲存為新的storyboard。
  2. 匡選欲移動的controller,Quick Actions選單快速找出Refactor to Storyboard功能。跳出取名,取為「Japanese.storyboard」

2.畫面即如願都搬到了新的 storyboard。

3.數量減半的Main.storyboard。

4.原本的連接處,只剩下一條未盡的線,連接寫明了指向Japanese.storyboard。(字好小)

5.更新上GitHub

後記:童話故事的日文翻譯是:「昔話(むかしばなし)」

雖然如果就字面來看的話好像會理解為:「過去的故事」,但動物應該是不可能變成孩子來報恩的。

大家在路上看到動物有危險,出手相救的同時,請不要有奇怪的期待。

參考文章:

文中提到素材庫:

--

--