#53 照片牆(Grid Photo Wall)
Published in
6 min readAug 9, 2018
基本版功能需求
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 套件抓圖。
