我的童年回憶錄經典動畫

絕對無敵雷神王這部動畫絕對是我從小的憧憬
到現階對為止我最愛的機器人動畫系列之一
看到這個教室變形出動的畫面你還能如此冷靜嗎?
在那個年代我們多希望教室也可以想這樣的變形
想像著我們就是那駕駛雷神王的駕駛員
雖然已經長大了,不過看到還是燃起來了

地球防衛組出動

這次結合Navigation Bar, Table View, Tab Bar三種Controller做一組介紹地球防衛組的介紹頁面,內頁Tab分別介紹緣起、地球防衛小組成員、反派以及機體等等 。頁面規劃初步如下圖所示。

App內頁畫面初稿

單一View Controller可由Editor➔Embed in➔Tab Bar Controller將其變成有Tab功能的controller。Tab bar要加入新的item可透過下圖的方式加入:

  1. 事先準備好另一個新的View Controller
  2. 按住control(^),點選Tab Bar Controller畫面
  3. 拉到想要新增的新view上,就會跳出獨立小視窗
  4. 選擇Relationship segue底下的view controllers
Tab Bar new item addition

Tab bar上的名稱是根據目標view底下的bar item修改的,另外如果有想要不一樣的icon也可以從這邊加入。

Bar Item setting

緣起的部分單純放入故事介紹介紹緣由,成員介紹部分結合Table View與Navigation Bar,分項介紹成員背景及個性,再由Navigation Bar回到成員列表。機體介紹也結合Navigation功能,但僅以介紹圖片為顯示內容。

Table View以簡單的Static方式建立cell,僅以角色名稱作為項目,尚未在cell中加入小圖片項目。單純設定好一組cell的設定,其餘項目就以複製方式建立。Tab Bar Icon的部分有自己去找圖片來製作,尺寸大小需求為25px*25px。可惜Icon上去之後都是填滿的樣式,並不會有原先圖片的樣子,icon樣式與導入之後樣子的比較如下圖。想要有看得出的特別樣式可能就要另外設計了。

Item icon setting

最後整體App內的元件設定畫面如下,元件到一定數量的時候跑起來真的會卡卡的,請給他一點愛等他一下(咦)。

簡單的幾個元件拉線製作其實不應該花這麼多時間,但是找內容的過程不免俗又分心的繼續看下去,畢竟還是我的最愛啊😂😂😂有興趣真的可以去找來回味一下童年,底下再分享兩個合體的影片來熱血一下啊!最後就是我的GitHub連結分享。

雷神王 無敵合體
雷神王 超無敵合體

--

--