#3 實作電子書app(不寫程式)

這份作業如同標題,
不寫程式完成一個可以查詢NBA的所有球隊(30支隊伍),
以及2020全明星賽先發球員。
內容包括2020–2021球季各隊戰績、排名、球隊歷年得獎、明星賽先發球員資訊、總教練等等。
*作業製作時,正進行NBA冠軍賽,有些球隊因戰績考量或其他原因查詢不到總教練

以下從使用者角度來介紹此款APP,以及解說製作方式。

  1. 使用LaunchScreen,插入圖片製作app首頁。

這部分碰到的問題是要注意照片size,目前只知道要盡量找邊長夠長的照片,硬要放其他size不合適的照片的話會被切到(Aspect Fill)或是被拉成奇怪的樣子(Scale Fill)。

Scale Fill&Aspect Fill

2.設定首頁為2020全明星賽先發球隊,
串連(segue)二支球隊明星頁面介紹

使用者進入app通過開頭畫面後會先進入到下方正中間的畫面,可以選擇「TEAM LEBRON」(西區球隊)或是「TEAM GIANNIS」(西區球隊)。

這張頁面使用了放了二個button,分別放上二張照片,但一開始二張照片因為放上不同size,所以二個按鈕大小不一至。所以選擇了其他二張相同的照片。點選後會分別進入「TEAM LEBRON先發球員」及「TEAM GIANNIS先發球員」。點選上面的back可以返回隊伍選擇的頁面。

嗨
從 storyboard 運用 tab bar controller,navigation controller加上segue 串接頁面。

3.設定navigation title 及 barbutton title 名稱。
設定後可讓使用者返回或選擇另一隻明星球隊。

navigation的運用及名稱設定

4. 分別設定左右捲動(scroll view)方式,紹介先發球員。
詳細製作方式可參考彼得潘大大的PO文。

5.設定Tab bar controllert,切換介面下方介紹,可以選擇分別選擇頁面「2020全明星賽」「Esat」(table view controller with static cells)、「West」(table view controller with static cells)

可以分別查詢東區及西區共30隻球隊,點選球隊後還可以查詢球隊獲獎紀錄

每個 cell 拉 segue 到對應的頁面設定 accessory 為 Disclosure Indicator

並且隨時可以按下方icon切換「2020全明星賽」、「Esat」、「West」頁面。這部分最花時間了,要收集30隻全隊照片及資訊。

table view controller with static cells

待解決課題:湖人隊級賽爾提克隊因為獲獎次數資訊過多,後續試試text view,來解決這個問題。

以上算是我第一次做出較完整、夠多資訊量的app,花了快二天的時間完成。雖然還有很多需要加強的地方,待後續學習後慢慢加強。

--

--