#53 照片牆(Grid Photo Wall)
基本版功能需求
1 第一頁顯示格子狀(grid)的照片牆。
2 點選照片後,切換到下一頁顯示大張圖片。
三種版本
版本 1: 無程式版。
提示:
1 使用 static cells 的 table view controller,在 cell 裡加入多個 image view 實現一排顯示多張照片。
2 在每個 image view 上加上 button,實現照片點選的效果。(也可以不用 image view,直接使用 button 搭配圖片,不過當圖片的比例和 button 不同,將造成圖片變形,要搭配程式才能維持比例)
3 將 table view 的分隔線拿掉。(Separator 設為 None)
版本 2: 程式版,使用 collection view controller
相關教學:
點選照片後,切換到下一頁顯示大張圖片:
從 cell 連 segue 到大圖的 controller,透過 function prepare 或 IBSegueAction 傳資料,從 collection view 的 property indexPathsForSelectedItems 可得知使用者點選第幾個 cell。
版本 3: 在 view controller 上加入 collection view
參考 App 範例: LINE 貼圖。
進階版
- 模仿 iOS 的 Music or TV App。
- 第二頁的大圖頁面可左右滑動瀏覽其它照片。
- 搭配 Lorem Picsum API 和 Kingfisher 套件抓圖。