作業#36照片牆Grid Photo Wall

上禮拜上課時，Petet說我可以練習用女朋友的照片來做collectionView照片牆。剛好我們也再一起快5週年！就做成一個app來當禮物吧！

1.首先拉好StoryBoardUI跟相對應的page

建立好其他要用到的頁面，記得幫他們拉Class。不然會找不到！

2.建立struct、加入照片到Assets

因為是用我跟我女朋友的照片，所以我直接把照片加入到Xcode裡面。

在名稱後面加入號碼比較方便顯示

import Foundation
struct Love{
//    標題名稱
let name: String
//    照片
let image:String
}

3.第一頁ViewController

因為之前都做一頁式的這次做的是3頁的App所以一頁一頁的來講他們的功能。

宣告func

用For-in的方式叫出照片名稱在用Append儲存到Array裡面。

//    叫出圖片儲存到[String]
func showImage(image: String){
//        跑1-10把名稱後面加入編號
for i in 1...10{
//                image就會變成 名稱1...10
let image = "\(image)\(i)"
//                print(image)
//                儲存到imageArray裡
imageArray.append(image)
}
}
// 顯示全部的照片
func showAllImage(){
//        跑 photos的每一個主題
for photo in photos {
//            在跑每張照片1...10的編號
for i in 1...10{
let image = "\(photo.image)\(i)"
//                print(image)
//                儲存到Array裡
imageArray.append(image)
}
}
}

宣告變數、IBAction

其實比較要注意得就是Segue記得取名稱，才能讀到，圖片裡有每個程式碼的功能。

IBSegueAction

這邊就要看下一頁宣告有什麼init。

//    到下一頁顯示圖片
@IBSegueAction func showPhoto(_ coder: NSCoder) -> PhotoCollectionViewController? {
//        將資料傳到下一頁
return PhotoCollectionViewController(coder: coder, photoTitle: photoTitle, imageArray: imageArray)
}

4.第二頁PhotoCollectionViewController

宣告變數以及接收到的值

這邊一開始就要先用init打出所需要的值跟他的型態，需要一樣的型態才能傳遞資料。

//    傳遞的 photoTitle
var photoTitle = ""
//    傳遞的圖片名稱
var imagesArray: [String] = []
//   顯示圖片的allImage
var allImage: [UIImage] = []
//    定義接收的內容以及接收到的型態
init?(coder: NSCoder, photoTitle: String, imageArray: [String]) {
//        標題
self.photoTitle = photoTitle
//        圖片名稱
self.imagesArray = imageArray
//         coder
super.init(coder: coder)
}
//      保護程式閃退
required init?(coder: NSCoder) {
fatalError("there isn not code")
}

override func

算是UICollectionView裡面最重要的項目，負責控制顯示的物件。

func

兩個func一個是設定圖片大小的Func可以參考peter的文章！

另一個是把文字變成圖片的func

//    設定一張圖片的大小
func configureCellSize() {
//      每張圖的間隔
let itemSpace: Double = 3
//      一排有幾張
let columnCount: Double = 2
//      設定collectionView的Layout
let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout
//      寬度會是 銀幕寬度 - ((間隔*幾張圖片-1)/幾張圖片)
let width = floor((collectionView.bounds.width - itemSpace * (columnCount-1)) / columnCount)
//      設定每張圖的大小因爲是1:1所以都一樣
flowLayout?.itemSize = CGSize(width: width, height: width)
//
flowLayout?.estimatedItemSize = .zero
//      最小左右的間隔
flowLayout?.minimumInteritemSpacing = itemSpace
//         最小的上下間隔
flowLayout?.minimumLineSpacing = itemSpace
}
//    取出每張照片的名稱回傳承[images]
func getPhoto(){
for i in imagesArray{
if let images = UIImage(named: i){
allImage += [images]
}
}
}

IBSegueAction

點選之後圖片會放大的Action，也是我覺得最難的地方。要怎麼讓程式知道你是點到哪張圖片？就要用到indexPathsForSelectedItems。

這邊比較難懂一點！

5.第三頁PhotoCollectionViewControllerCell

就只是第二頁裡面顯示圖片的Cell

記得幫imageView拉autoLayout到時候照片牆才不會跑版！

6.第四頁DetailViewController

相對起來最輕鬆的一頁只要把宣告的值傳到這裡就可以囉！記得拉好AutoLayout！

成品展示

這邊就用我女朋友在用的iPhone8來顯示！

這次的作業也算是我第一次用那麼多頁面，中間的傳遞資料跟轉換型態有點深奧。必須再多做點作業！

GitHub - ChuGoGo/GridPhotoWall: happy5year

參考作品

#53 照片牆(Grid Photo Wall)

利用 flow layout 的 collection view 製作照片牆

#19 照片牆｜吉卜力劇照APP