誰說程式設計師不懂浪漫，教你使用SwiftUI搭建一個電子相簿送給她吧～

語言: CN / TW / HK
時間 2022-10-09 23:15:35

theme: smartblue

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第12天，點選檢視活動詳情。

在本章中，你將學會使用SwiftUI搭建一個電子相簿。

專案背景

每到七夕情人節、紀念日等節日，身為程式設計師的我們總是不知道該送什麼禮物表達心意，畢竟滿腦子裝的都是程式碼。

那我們能不能用程式碼做一個禮物送給心愛的那個她呢？

即能表達心意，又剛好碰上自己的專業領域。

說幹就幹。

專案搭建

首先，建立一個新的SwiftUI專案，命名為ElectronicAlbum。

1.png

素材匯入

首先，我們需要匯入一堆圖片作為展示的素材。我們在Assets.xcassets檔案中匯入一批圖片，示例：

2.png

資料模型

素材匯入完成後，接下來我們建立資料模型，我們新增一個Swift檔案，命名為Model.swift。

``` import SwiftUI

struct Model:Identifiable {     var id = UUID()     var imageName: String }

//示例資料 var models = (1...6).map { Model(imageName:"($0)") } ```

上述程式碼中，我們聲明瞭一個結構體Model，遵循Identifiable協議。

在Model結構體中，我們聲明瞭一個id作為唯一識別符號，然後聲明瞭一個變數imageName用來關聯圖片。

在之前我們已經匯入了一批圖片，並且圖片名稱為1～6，因此我們可以宣告一個數組models，通過map建立示例資料。

頁面樣式

我們回到ContentView.swift檔案，建立一個新檢視來展示圖片。示例：

// 圖片檢視 func imageCardView() -> some View {     ForEach(models) { item in             Image(item.imageName)                 .resizable()                 .aspectRatio(contentMode: .fit)                 .cornerRadius(10)                 .padding(.horizontal)                 .shadow(color: .pink, radius: 5, x: 0, y: 0)     } }

3.png

上述程式碼中，我們建立了一個新檢視imageCardView。

在imageCardView檢視中，我們使用ForEach迴圈遍歷models陣列中的資料，並賦值給Image圖片。

圖片樣式部分，我們保持圖片原有aspectRatio寬高比，加個cornerRadius圓角，設定橫向padding邊距，最後加了加了一個粉色的邊框。

基礎互動

頁面樣式完成後，我們需要左右滾動圖片檢視，可以使用到TabView，示例：

var body: some View {     TabView {         imageCardView()     }     .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))     .background(Color(red: 254 / 255, green: 207 / 255, blue: 238 / 255)).edgesIgnoringSafeArea(.all) }

上述程式碼中，我們在ContentView檢視中使用TabView構建了一個輪博檢視。

我們設定了PageTabViewStyle樣式為隱藏輪播小圓點，然後設定了背景顏色為粉色。

我們預覽下效果：

4.gif

互動進階

基礎互動我們完成基礎的輪播圖樣式，下一步為了讓互動更加優雅些，我們可以嘗試使用加入些3D切換的效果。

3D切換效果我們需要使用到rotation3DEffect修飾符，而由於rotation3DEffect旋轉角度接收Double型別的數值，但我們檢視偏移修飾符接收的數值卻是CGFloat型別，因此我們首先宣告一個方法進行型別轉換和設定旋轉互動的角度。

func getAngle(xOffset: CGFloat) -> Double {     let tempAngle = xOffset / (UIScreen.main.bounds.width / 2)     let rotationDegree: CGFloat = 30     return Double(tempAngle * rotationDegree) }

上述程式碼中，我們聲明瞭一個方法getAngle，接收一個CGFloat型別的引數xOffset，返回一個Double型別的引數。

因為我們需要把每個檢視展示在中間，因此檢視切換角度tempAngle為螢幕一半來計算角度，然後我們提供旋轉角度為30度，最後返回計算好的旋轉角度。

我們將rotation3DEffect修飾符加到檢視中。

// 圖片檢視 func imageCardView() -> some View {     ForEach(models) { item in         GeometryReader { innerView in             Image(item.imageName)                 .resizable()                 .aspectRatio(contentMode: .fit)                 .cornerRadius(10)                 .padding(.horizontal)                 .shadow(color: .pink, radius: 5, x: 0, y: 0)                 .frame(width: innerView.frame(in: .global).width, height: innerView.frame(in: .global).height)                 .rotation3DEffect(Angle(degrees: getAngle(xOffset: innerView.frame(in: .global).minX)),                                   axis: (x: 0.0, y: 1.0, z: 0.0),                                   anchor: innerView.frame(in: .global).minX > 0 ? .leading : .trailing,                                   perspective: 2.5                 )         }     } }

我們使用GeometryReader幾何檢視來確定圖片滾動時的圖片的大小，然後使用frame修飾符調整其滾動時的圖片大小變化，最後使用rotation3DEffect修飾符，設定滾動時的角度變化。

專案預覽

5.gif

恭喜你，完成了整個專案的全部內容！

快來動手試試吧。

如果本專欄對你有幫助，不妨點贊、評論、關注～

「其他文章」
「」
「」