개요

iOS 앱 개발은 지금까지 한 적이 없었지만, 시험에 SwiftUI를 사용하여 간단한 앱을 만들어 보았으므로 비망록으로 메모해 둡니다. (※ 이해도가 얕기 때문에, 잘못된 기재가 있을 가능성이 있습니다)
평상시 민첩한 개발을 하고 있습니다만, 이번은 그 때에 사용할 수 있는 것 같은 플래닝 포커적인 어플을 만들어 보았습니다.
↓ SwiftUI의 공식 튜토리얼을 참고로 작성했지만, 꽤 충실했습니다.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 쓰리 아 ls / 슈 f

전제

· Xcode 등, SwiftUI에서의 개발 환경이 갖추어져 있다

완성 이미지

완성 이미지는 다음과 같습니다.

카드 화면

피보나치 열의 카드가 스크롤로 표시됩니다.

카드를 선택하면 중앙 부분의 숫자가 그 값이되어 선택한 카드를 알 수 있습니다.

화면 상단에는 설정 화면에서 설정 한 이름이 표시됩니다.

설정 화면

카드 화면에 표시 할 이름을 입력하십시오

구현

최종 코드는 다음과 같습니다.

포인트①

설정 페이지에서 사용자의 입력 값을 카드 페이지로 전달해야했지만,
struct간의 값의 전달이 되므로, @EnvironmentObject 를 이용하고 있습니다.
struct내이면 @State 로 값의 상태를 관리하고 있습니다.

<참고 : SwiftUI의 Property Wrappers 및 데이터에 액세스하는 방법>
htps : // 이 m / shi · ms / 6 e f87 79499623306

포인트②

설정 페이지에서 사용자 입력 값에 따라 카드 페이지의 값을 동적으로 변경하고 싶었기 때문에,ObservableObject 와 @Published 를 조합해 동적 변경을 실현하고 있습니다.

<참고 : ObservableObject 이용시의 View 갱신 타이밍을 세밀하게 제어한다>
htps : // 코 m / 조코 야마 / ms / 588c3569b8d89cd223

ContentView.swift

import SwiftUI

/*
 Card 要素用　struct
*/
struct Card: Identifiable {
    var id: String
    var color: Color
}


/*
 ユーザ入力用 class
*/
class UserInput: ObservableObject {
    @Published var name = "TEST"
}

/*
 ランダムカラー生成用
*/
extension Color {
    static var random: Color {
        return Color(
            red: .random(in: 0.5...0.9),
            green: .random(in: 0.5...0.9),
            blue: .random(in: 0.5...0.9)
        )
    }
}

/*
 フィボナッチ数列作成関数
*/
func fib() -> Array<Card>
{
    var items = [] as Array<Card>
    var f1 = 1, f2 = 1
    for _ in 0..<11 {
        items.append(Card(id: String(f1), color: Color.random ))
        (f1, f2) = (f2, f1 + f2)
    }
    items.removeFirst()
    return items
}


/*
 メニューリスト（タブ）
*/
struct Menu_List: View {
    let userInput = UserInput()
    var body: some View {
        TabView {
            CardView().environmentObject(userInput)
                .tabItem {
                    Image(systemName: "greetingcard")
                    Text("Card")
                }
            SettingView().environmentObject(userInput)
                .tabItem {
                    Image(systemName: "square.and.pencil")
                    Text("Setting")
                }
        }
    }
}

/*
 Card ページ用 struct
*/
struct CardView: View {
    @EnvironmentObject var input: UserInput
    @State var flg = true
    @State var count = "0"
    var items = fib()

    var body: some View {
        VStack {
            Text(input.name).fontWeight(.bold).offset(x: 0, y: -150).font(.largeTitle).foregroundColor(Color.green)
            Text(count).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/).offset(x: 0, y: -100).font(.largeTitle)
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(self.items) { card in
                            CardsItem(card: card).onTapGesture {
                                self.count = card.id
                        }}
                }
            }
            .frame(height: 100)
        }
    }
}

/*
 Card リスト表示用 struct
*/
struct CardsItem: View {
    @State var flg = false
    let card: Card
    var body: some View {
        VStack(alignment: .leading) {
            Text(card.id)
                .font(.headline)
                .padding( 75).background(Rectangle().foregroundColor(card.color).frame(width: 150, height: 150).cornerRadius(10))
    }
}
}

/*
 Setting ページ用 struct
*/
struct SettingView: View {
    @EnvironmentObject var input: UserInput

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Name")){
                    TextField("名前を入力してください", text: $input.name)
                }
            }
            .navigationBarTitle("Settings")
        }
    }
}

/*
 Canvas 表示用 struct
*/
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Menu_List()
    }
}

요약

SwiftUI를 사용하여 간단한 앱(플래닝 포커)을 만들어 보았습니다.
SwiftUI는 처음이었습니다만, UI 구축을 struct 단위로 관리할 수 있을까, 데이터의 갱신이 자동으로 View 에 반영할 수 있을까와 구현은 하기 쉬운 것일까라고 생각했습니다.
앞으로는 SwiftUI 더 시험해 나가 개인개발 뿐만이 아니라 상용에서도 사용할 수 있게 되면 좋겠다고 생각하고 있습니다.