[SwiftUI] 공부 1일차

Swift UI 공부 1일차

 

Step.1 Text 표현하기

struct ContentView: View {
    var body: some View {
    //HTML body라고 생각하면 된다.
        Text("Hello World!")
    }
}


//입력된 코드의 미리보기를 위한 코드
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

실행 결과

Step.2 Stack사용하기

Stack에는 Z,H,V Stack이 있다.

Z는 좌표계 z와 같이 생각하면 된다. 뷰들을 겹쳐서 사용할 경우 ZStack을 사용하면 된다.

HStack은 Horizon Stack 으로 수평으로 뷰들을 나열할 수 있다. 

VStack은 역시나 Vertical 수직방향으로 뷰들을 그려낼 수 있다.

 

아래에 각각 예시.

 

ZStack

struct ContentView: View {
    var body: some View {
        ZStack{
            Rectangle()
                .background(Color.black)
                .frame(width: 200,height: 200)
            
            Text("안녕하세요")
                .foregroundColor(.white)
        }
    }
}

도형과 텍스트가 겹쳐서 보임

 

HStack

struct ContentView: View {
    var body: some View {
        ZStack{
            
            Rectangle()
                .background(Color.black)
                .frame(width: 200,height: 200)
            
            HStack{
                
                Text("안녕하세요")
                    .foregroundColor(.white)

                Text("안녕하세요")
                    .foregroundColor(.white)

            }
        }
    }
}

HStack이 적용된 텍스트가 가로로 나열됨

 

VStack

struct ContentView: View {
    var body: some View {
        
        VStack{
            
            ZStack{
                
                Rectangle()
                    .background(Color.black)
                    .frame(width: 200,height: 200)
                
                HStack{
                    Text("안녕하세요")
                        .foregroundColor(.white)
                    Text("안녕하세요")
                        .foregroundColor(.white)
                }
                
            }
            
            ZStack{
                
                Rectangle()
                    .background(Color.black)
                    .frame(width: 200,height: 200)
                
                HStack{
                    Text("안녕하세요")
                        .foregroundColor(.white)
                    Text("안녕하세요")
                        .foregroundColor(.white)
                }
                
            }
        }
        
    }
}

VStack을 이용해 세로로 나열

 

Stap.3 이미지 넣기

 

1. 이미지를 넣기 위해서는 우선 Assets에다가 이미지파일을 생성해주어야 된다.

왼쪽 프로젝트 디렉토리 목록에서 Assets을 클릭한다.

2. 페이지가 열리면 오른쪽 클릭을 해서 Import 또는 드래그 앤 드랍으로 이미지를 불러올 수 있다.

원한다면 2x 3x도 추가 가능하다

이렇게 이미지를 생성해주고

Image("iu") #Image(파일명)

입력하면 이미지 입력은 끝이다.