作業#36照片牆Grid Photo Wall
上禮拜上課時,Petet說我可以練習用女朋友的照片來做collectionView照片牆。剛好我們也再一起快5週年!就做成一個app來當禮物吧!
1.首先拉好StoryBoardUI跟相對應的page
建立好其他要用到的頁面,記得幫他們拉Class。不然會找不到!
2.建立struct、加入照片到Assets
因為是用我跟我女朋友的照片,所以我直接把照片加入到Xcode裡面。
import Foundationstruct 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...10let 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打出所需要的值跟他的型態,需要一樣的型態才能傳遞資料。
// 傳遞的 photoTitlevar photoTitle = ""// 傳遞的圖片名稱var imagesArray: [String] = []// 顯示圖片的allImagevar allImage: [UIImage] = []// 定義接收的內容以及接收到的型態init?(coder: NSCoder, photoTitle: String, imageArray: [String]) {// 標題self.photoTitle = photoTitle// 圖片名稱self.imagesArray = imageArray// codersuper.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的Layoutlet 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來顯示!
這次的作業也算是我第一次用那麼多頁面,中間的傳遞資料跟轉換型態有點深奧。必須再多做點作業!