기본 프로필 페이지를 만들어 SwiftUI에 익숙해지세요.

스위프트UI

SwiftUI는 2019년에 도입된 Apple의 새로운 사용자 인터페이스 프레임워크입니다. 그 주요 목적은 개발자에게 스토리보드를 사용하지 않고 라이브 미리보기로 사용자 인터페이스를 구축할 수 있는 자연스러운 방법을 제공하는 것입니다.

뭐가 필요하세요

시작하기 전에 다음 항목이 있는지 확인하십시오.

• Xcode 11 이상
• 라이브 미리보기를 위한 macOS Catalina

일반 iOS 앱 프로젝트처럼 SwiftUI 프로젝트를 생성하되 인터페이스가 Storyboard 대신 SwiftUI 인지 확인하세요 .

1. Xcode를 엽니다.
2. 새 Xcode 프로젝트 생성
3. 앱 을 선택 하고 다음 을 클릭 합니다.
4. 원하는 대로 프로젝트 이름 지정
5. 인터페이스가 SwiftUI 인지 확인하십시오 .

이제 프로젝트는 다음과 같습니다.

오른쪽의 빈 화면은 라이브 미리보기 페이지입니다. 앱의 실시간 미리보기를 시작하려면 Resume오른쪽 상단을 클릭하고 1~2초 정도 기다리면 됩니다.

iPhone 화면이 빈 페이지에 나타나면 라이브 미리보기가 모두 설정된 것입니다. 이제부터는 모든 변경 사항이 실시간 미리 보기에 거의 즉시 반영되어야 합니다. 편리하지 않습니까?

코딩을 시작합시다

파일 을 엽니다 ContentView.swift. 모든 UI 코딩이 수행될 파일입니다.

struct이 파일에는 ContentView및 라는 두 개의 가 있습니다 ContentView_Previews.

• 화면 의 ContentView내용과 레이아웃을 담당합니다. 기본적으로 적절한 UI 요소를 사용하여 ContentView의 속성 내에서 앱의 사용자 인터페이스를 구성합니다.body
• 이름에서 알 수 있듯이 ContentView_Previews 라이브 미리 보기를 만드는 역할을 합니다. 그것은 단순히 그것을 보여주기 위한 인스턴스를 포함하는 보기를 생성 ContentView합니다.

프로필 이미지, 이름 및 몇 가지 추가 정보가 포함된 프로필 페이지를 만들어 보겠습니다.

1. 일부 프로필 이미지를 폴더로 드래그 합니다(이 폴더는 프로젝트 탐색기Assets.xcassets 의 왼쪽에 있음) .
2. 기본 Hello world 텍스트를 프로필 이미지 ContentView로 바꿔서 수정하세요 .

struct ContentView: View {
    var body: some View {
        Image("profile_pic") // YOUR PICTURE NAME HERE
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(Circle()) // Make the picture circular
    }
}

• 수직 포지셔닝을 위한 수직 스택,VStack
• 수평 위치를 위한 수평 스택,HStack
• 요소를 서로 위에 배치하기 위한 중첩 스택,ZStack

struct ContentView: View {
    var body: some View {
        VStack{
            Image("profile_pic")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .clipShape(Circle())
            Text("Artturi Jalli")
                .foregroundColor(.black)
                .font(.title)
            Text("iOS Engineer")
                .foregroundColor(.gray)
                .font(.subheadline)
        }
    }
}

이제 기본 프로필 페이지가 완성되었으며 다음과 같아야 합니다.

그게 다야!

유용하게 사용하시기 바랍니다. 다른 사람들도 찾을 수 있도록 박수를 쳐주세요!

놓치는 일이 없도록 Medium 에서 저를 팔로우하세요 . 또한 Linkedin 에서 친구가 됩시다 .

참고문헌