Storyboard 電子書 App — アニメ大好き

(b,0)
彼得潘的 Swift iOS / Flutter App 開發教室
3 min readFeb 20, 2017

這次的作業是要做一個自己有興趣的電子書APP,所以身為動漫迷的我當然是做動漫相關的APP啦~名字叫做アニメ大好き,icon是狂三

我的製作步驟為:

1 構思:先想好自己想要呈現的畫面並設計好所有的畫面

2 找圖片:找到想要的圖片之後,記得要把他切成適當大小喔!

3 開始做APP:接下來就開始拉畫面囉~

我的畫面有點多,所以安排上要稍微想一下,才不會佔版面太大或是很亂

接下來介紹一下我的畫面~~

我的第一個畫面是「私心推薦」,就是我最愛的幾部動畫,所以必須優先讓大家看到,在這邊我遇到第一個困難,因為我的動畫名稱很長,不像詩人名字一樣短短的,可以使用按鈕,所以我是使用表格的方式來呈現,配合不一樣的image與標題及副標題來呈現一個項目,問題來了,我覺得背景用預設的白色太單調了,因此我想用自己的圖片,但是我找了很久,都找不到哪裡可以設定,最後求助於彼得潘,才知道要使用Container View才可以不用程式來實現,並且每個cell的背景都要設為Clear Color,這樣才看得到背景,有興趣可以看一下彼得潘的文章~~

Container View拉出來的Table View Controller裡面,因為我只放了六部動畫,放不滿整個畫面,但是把他拉寬又很醜,所以我希望多出來的分格線消失,因此加入了高度為0的View在最下面。

接下來就進入了介紹動畫的頁面,這邊又遇到了第二個困難,一般來說,加上Navigation Item時,畫面上就會顯示出一排白白的東西,但是因為我用了Container View的關係,所以不會直接顯示出來,不過模擬器上面會顯示,問題在於,我需要放文字在Navigation下面,如果看不到它會讓我不知道他的範圍到底在哪裡,因此問了彼得潘之後得知,必須把這個Controller做以下設定,才能顯示出來

然後因為我的文字內容有多有少,因此使用Text View來顯示多行文字

我的畫面真的很多,所以我的每個畫面都有取名字,不然我真的不知道誰是誰~~

然後我發現我找圖片的時間跟寫出這個APP的時間好像差不多?!因為我找圖片時,會去思考放什麼樣的圖片比較好,然後我還要選每個image跟icon的圖片,每個都不一樣,但是做畫面的話只要做好一個,後面就通通複製就可以了,很快,只是我還不熟練,所以一些名稱會忘記,要查一下投影片……

Github:

--

--