SwiftUI Basic Components

스위프트3을 접하고 몇 년이 지나고 ... 정들었던 UIkit의 자리를 swiftUI가 점점 뺏고 있는와중

나도 swiftUI를 공부해야겠다 싶어 시작한다.

uikit의 내용을 swiftUI와 대조하며 파악해보려한다.

이글은 내 개인의 학습하면서 쓰는 글이라 틀린 정보가 있을 수 있다.

UIWindow -> windowGroup

WindowGroup {
    ContentView()
}

UILabel ->

Text("hello world")

UIButton ->

init(action: @escaping () - Void, @ViewBuilder label: () -> Label)

var body: some View {
    Button {
        print("Tap")
    } label: {
       Text("Tap me!")
    }
}

UITextField ->

init(LocalizedStringKey, text: Binding<String>)

@State private var textValue: String = ""

var body: some View {
    TextField("PlaceHolder...", text: $textValue)
}

UIImageView ->

init(_ name: String, bundle: Bundle? = nil)

var body: some View {
    Image(systemName: "star") // systemImage
}

UITableView ->

init(@ViewBuilder content: () -> Content)

var body: some View {
    List {
        ForEach(0 ..< 10, id: \.self) { i in
            Text("item \(i)")
        }
    }
}

UICollectionView ->

ScrollView + 
init(columns: [GridItem], alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, pinnedViews: PinnedScrollableViews = .init(), @ViewBuilder content: () -> Content)

let layout: [GridItem] = [
    GridItem(.flexible(minimum: 40, maximum: 100)),
    GridItem(.flexible(minimum: 40, maximum: 100)),
]

var body: some View {
    VStack(alignment: .center) {
        ScrollView(.vertical) {
            LazyVGrid(columns: layout) {
                ForEach(0 ..< 100, id: \.self) { index in
                    Text("item \(index)")
                        .frame(height: 30)
                }
            }
        }
        .frame(maxHeight: .infinity)
        .background(.yellow)

        ScrollView(.horizontal) {
            LazyHGrid(rows: layout) {
                ForEach(0 ..< 100, id: \.self) { index in
                    Text("item \(index)")
                        .frame(height: 30)
                }
            }
        }
        .frame(maxHeight: .infinity)
    }
}

UIAlertController style.alert->

View().alert(isPresented: Binding<Bool>, content: () -> Alert) -> some View
View().alert<A>(_ titleKey: LocalizedStringKey, isPresented: Binding<Bool>, @ViewBuilder actions: () -> A) -> some View where A : View

@State private var showingAlert = false

var body: some View {
    Button(action: {
        self.showingAlert = true
    }) {
        Text("Show Alert")
    }
    .alert("title", isPresented: $showingAlert) {
        Button("OK", role: .cancel) {
            print("tap ok")
        }
        Button("NO", role: .destructive) {
            print("tap no")
        }
    }
    /*
    .alert(isPresented: $showingAlert) {
        Alert(title: Text("Title"), message: Text("This is a alert message"), dismissButton: .default(Text("Dismiss")))
    }
    */
}

UIAlertController style.actionSheet

View().actionSheet(isPresented: Binding<Bool>, content: () -> ActionSheet) -> some View

@State var showActionSheet = false
var body: some View {
    Button("sheet") {
        showActionSheet = true
    }
    .buttonStyle(.bordered)

    .actionSheet(isPresented: $showActionSheet) {
        ActionSheet(title: Text("Title"), buttons: [
            ActionSheet.Button.default(Text("text"), action: {
                print("tap text")
            }),
            .default(Text("default")),
            .cancel()
        ])
    }
}

UISwitch ->

init(isOn: Binding<Bool>, @ViewBuilder label: () -> Label)

@State private var toggleValue: Bool = false

var body: some View {
    Toggle(isOn: $toggleValue) {
        Text("토글 텍스트")
    }
}

UIPickerView + UISegmenetedControl( style segmented ) ->

init(_ titleKey: LocalizedStringKey, selection: Binding<SelectionValue>, @ViewBuilder content: () -> Content)
init(selection: Binding<SelectionValue>, label: Label, @ViewBuilder content: () -> Content)

@State var select = "Apple"

var fruits = ["Apple", "Apricot", "Banana", "Pear"]

var body: some View {
    VStack(alignment: .leading) {
        Picker("picker 타이틀", selection: $select) {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
        .pickerStyle(.inline)
        .background(.red)

        Picker(selection: $select, label: Text("Fruit")) {
            ForEach(fruits, id: \.self) {
                Text($0)
            }
        }
        .background(.green)

        NavigationView {
            Picker(selection: $select, label: Text("Fruit")) {
                ForEach(fruits, id: \.self) {
                    Text($0)
                }
            }
            .pickerStyle(.navigationLink)
            .background(Color.mint)
        }

        Picker("title", selection: $select) {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
        .pickerStyle(.segmented)
        .background(Color.orange)

    }.padding()
}

UIViewcontroller().present ->

View().sheet<Content>(isPresented: Binding<Bool>, onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> Content) -> some View where Content : View
View().fullScreenCover<Content>(isPresented: Binding<Bool>, onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> Content) -> some View where Content : View

struct ModalView: View {
    @Binding var isShow: Bool
    var body: some View {
        ZStack {
            Color.yellow.ignoresSafeArea()
            VStack {
                Button("close") {
                    isShow = false
                }
                .frame(height: 50)

                Text("hello world")
            }
            .background(.green)
        }
    }
}

struct TestPresent: View {
    @State private var fullShow = false
    @State private var modalShow = false

    var body: some View {

        VStack {
            Button("Present0") {
                self.fullShow = true
            }
            .padding()

            Button("Present1") {
                self.modalShow = true
            }
            .padding()

            .sheet(isPresented: $modalShow) {
                ModalView(isShow: $modalShow)
            } // 아직도 애네들이 어떻게 붙어서 동작하는지 이해가 안간다.
        }
        .fullScreenCover(isPresented: $fullShow) {
            ModalView(isShow: $fullShow)
        } // 도대체 넌 어떻게 붙어서 동작하는거니 안에 View 아무곳에 붙여도 동작함
    }
}

\