SwiftUI로 IOS 개발하기(4) - 샘플 프로젝트(TextField, Button, Image)

안녕하세요. 뉴핀입니다.

이번 주제는 간단한 애플리케이션 예제를 작성해보려고 하는데요.

화면의 구성은 아래와 같습니다.

넷X릭스나 여타 OTT 서비스의 프로필 설정 화면과 유사하다고 생각해주시면 됩니다.

우선 프로젝트에서 해당 화면에 필요한 View들을 파악해보면

• ① : Image
• ② : Text
• ③ : Image
• ④ : TextEdit
• ⑤ : Button

가 필요합니다.

화면 구성을 보고 어떤 View가 적절한지 파악하는 것은 점차 SwiftUI의 View들을 다양하게, 자주 사용해서 숙련도가 증가하면 점점 한눈에 파악 가능하게 되실 겁니다.

첫 번째로 변수를 선언해줍니다.

@State var profileImage = "profile_0"
@State var nickName = "no name"

@State var profileImageTemp = ""
@State var nickNameTemp = ""

ProfileImage와 nickName은 실제 표시되는 데이터를,

ProfileImageTemp와 nickNameTemp는 현재 선택 중인 데이터를 담게 됩니다.

그 후 위에서 언급했던 View들을 모두 작성해주고 구상해뒀던 레이아웃을 적절하게 조절하면 됩니다.

var body: some View {
    VStack(){
        Image(profileImage)
            .resizable() // 이미지 사이즈 조절
            .frame(width: 100, height: 100)
            .border(.black, width: 1) // 테두리 추가
        Text(nickName)
        HStack{
            Image("profile_1")
                .resizable()
                .frame(width: 80, height: 80)
                .border(.black, width: 1)
                .onTapGesture { // 제스쳐 인식
                    profileImageTemp = "profile_1"
                }
            Image("profile_2")
                .resizable()
                .frame(width: 80, height: 80)
                .border(.black, width: 1)
                .onTapGesture {
                    profileImageTemp = "profile_2"
                }
            Image("profile_3")
                .resizable()
                .frame(width: 80, height: 80)
                .border(.black, width: 1)
                .onTapGesture {
                    profileImageTemp = "profile_3"
                }
            Image("profile_4")
                .resizable()
                .frame(width: 80, height: 80)
                .border(.black, width: 1)
                .onTapGesture {
                    profileImageTemp = "profile_4"
                }
        }
        TextField("Nick Name", text: $nickNameTemp)
            .padding()
            .border(.black, width: 1)
        Button(action: {
            profileImage = profileImageTemp
            nickName = nickNameTemp
        }, label: {
            Text("변경")
                .foregroundColor(.white)
        })
        .padding([.vertical])
        .frame(maxWidth: .infinity)
        .background(Color.blue)
        .padding([.top], 100)
    }
    .padding()
}

위 코드 내용은 크게 어려운 부분이 없지만 직접 구현하실 때 헷갈릴 수 있는 부분이 .padding()입니다.

padding은 여백을 의미하며 여타 다른 개발환경에서 padding과 margin으로 안쪽 여백과 바깥쪽 여백으로 구분하지만

SwiftUI에서는 padding 하나로 구현합니다.

이번 단계에서는 padding의 위치를 어느 쪽에 놓느냐에 따라 의도하는 View의 바깥쪽과 안쪽으로 각각 설정된다고 알아두시면 좋을 것 같습니다.

다음에도 더 유익한 정보로 찾아뵙겠습니다.

감사합니다.