#03雙聯盟成定局! 做一個雙介面的台灣職籃App

這次對UI元件有更多了解 因此把職籃App的功能完整化

運用 storyboard / tab bar controller / navigation controller

做出兩種功能不同 操作介面不一樣的「多階層App」

https://github.com/terry-coding/-2.0

首先第一頁是兩個職籃聯盟的 imageView 並且底層都有Button

分到兩個 NavigationController P. LEAGUE+ 及 TPBL

首先從TPBL開始

會看到第一頁是類似Facebook/Instagram的tableView

使用InsetGrouped 做出照片精選/PO文畫面

我在頂部 用ScrollView做了一排

類似Instagram限時動態的隊伍Button

點擊後將會進入各隊的 詳細數據/新消息動態 (未來寫程式完成)

接著使用TabBarController連接到比數介面

這頁會顯示近期比賽的比數成績

(未來寫程式建立單場數據表/並具有單一球員查詢功能)

接著是P.LEAGUE+介面

由於只有四隊 用imageView配四隊LOGO做成Button

點擊後會進入各隊簡介畫面

這邊我將View放在imageView的上層後 調整View的Alpha數值為0.6499…

做出不同顏色的半透明底圖

配合LOGO及單純的Label做出球隊簡介

這邊再次使用tableViewController

搭配ScrollView可左右滑動 觀看球衣及隊員展示

讓我們回到P.LEAGUE+的第一頁畫面

這一層點選 tableViewController 會進入聯盟消息介面

這一層比較類似新聞App的展示畫面

scrollView的風格選用Style

可以向下滑動 查看聯盟公告的圖文訊息

整體操作展示

App Icon 則是由Copilot生成

有趣的是 當我請Copilot在icon加上”台灣”二字的時候

無論如何都會跑出簡體亂碼 但卻能會生成國旗元素

— — — — — —

所有版權LOGO使用 非作為商業用途 純屬App開發練習使用