SwiftUI 개발 macOS 환경설정 및 Image HStack VStack padding 기초문법 활용해보자 !

웹개발자가 해보는 애플 앱 개발

• 앱 생명 주기
• 뷰 생명 주기
• 다중 스레드 
• 소프트웨어 아키텍처
•  

아이폰 앱 개발자가 되기 위해선 이런 것들이 중요하다고 한다 .
어떤 서비스 개발이든 동일하지 않을까 생각된다. 
iOS 앱 개발을 하기위해서는 고가의 맥북이 필요하다. 
물론 요즘 Flutter or React Native 크로스플랫폼 개발이 인기가 많지만 
또 서비스의 안정성을 위해 안드로이드 체제와 분리해서 개발하는게 기존 개발 방식이다. 
고가의 맥북을 샀다면 맥북에 애플에서 제공하는 Xcode 프로그램을 설치해주면 된다. 
그럼 그냥 바로 시작하면된다. 해달 프로그램에서 아이폰 버전에 맞는 시뮬레이터를 제공한다.  
 

 

 

 

https://developer.apple.com/sf-symbols/

SF Symbols - Apple Developer

 

심볼즈라는 페이지에 들어가서 다운로드해주자 . 
이건 이제 앱 개발할 때 유용한 이모티콘? 패키지이다. 
위 스크린 캡쳐 코드를 보면 해당 패키지에서 코드로 이모티콘을 불러온 것을 알 수 있다. 
https://unsplash.com/ko

 

아름다운 무료 이미지 및 사진 | Unsplash

위 페이지는 고화질의 사진을 내려 받을 수 있는 사이트 입니다. 

 

 

내려 받은 사진을 Assets 이라는 곳에 드래그 엔 드랍으로 넣어줍니다. 사진을 드래그 해서 저 하얀색 페이지 부분에 드랍 해주시면 됩니다.
사진 파일 명은 수정 하는 게 좋습니다. 코드에서 이미지 불러올 때 해당 파일 이름으로 합니다.

 

//
//  CircleimageView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct CircleImageView : View{
    var body: some View{
        //        Image(systemName: "bolt.circle")
        //            .font(.system(size: 200))
        //            .foregroundColor(.yellow)
        //            .shadow(color: .gray, radius: 2, x: 0, y:10)
        Image("myimage").resizable()
            .scaledToFill()
//            .aspectRatio(contentMode: .fill)
            .frame(width: 300, height: 300)
            .clipShape(Circle())
            // color는 항상 맨 앞으로 !
            .shadow(color: .green ,radius: 10,x:0,y:10)
            .overlay(Circle().foregroundColor(.black).opacity(0.4))
            .overlay(Circle().stroke(Color.red,lineWidth: 10).padding())
            .overlay(Circle().stroke(Color.yellow,lineWidth: 10).padding(30))
            .overlay(Circle().stroke(Color.green,lineWidth: 10))
            .overlay(Text("CentumJoonho").foregroundColor(.white).font(.system(size: 30)).fontWeight(.bold))
//            .clipped()
//            .edgesIgnoringSafeArea(.all)
    }
        
}

struct Previews_CircleimageView_Previews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

 

 

문법 설명

1. Image().resizable()
2. .scaledToFill()
3. .frame()
4. .clipShape()
5. .shadow()
6. .overlay()
7. .Circle().foregroundColor(색).opacity(사이즈)
8. Circle().stroke(Color.색 , linewidth : 사이즈)
9.Text("").foregroundColor(색).font(.system(size :사이즈 )).fontWeight(특)

 

 

 

 

ContentView -> 메인 화면 뷰라고 보면 된다. 
사전에 작업한 코드를 메서드 형식으로 ContentView로 불러오면 된다. 
 
ContentView

//
//  ContentView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Text("1")
                .font(.system(size :50))
                .fontWeight(.bold)
            Text("2")
                .font(.system(size :50))
                .fontWeight(.bold)
            Text("3")
                .font(.system(size :50))
                .fontWeight(.bold)
        }
       
//        CircleImageView()
        
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

Vstack - > Hstack으로 바꾸면 

 

 

//
//  ContentView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            Text("1")
                .font(.system(size :50))
                .fontWeight(.bold)
            Text("2")
                .font(.system(size :50))
                .fontWeight(.bold)
            Text("3")
                .font(.system(size :50))
                .fontWeight(.bold)
        }//Hstack
        .background(Color.red)
       
//        CircleImageView()
        
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

 

 

 

 

 

//
//  ContentView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.red)
            
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.red)
            
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.red)
            
        }
        
        
       
//        CircleImageView()
        
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

//
//  ContentView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.yellow)
            
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.red)
            
            VStack{
                Text("1")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("2")
                    .font(.system(size :50))
                    .fontWeight(.bold)
                Text("3")
                    .font(.system(size :50))
                    .fontWeight(.bold)
            }//Vstack
            .background(Color.green)
            
        }//HStack
        .padding(30)
        .background(Color.indigo)
        
        
       
//        CircleImageView()
        
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

.padding(.위치 ,사이즈)

• .top : 위
• .bottom : 아래
• .leading : 왼쪽
• .trailing  :오른쪽

padding 주는 위치가 달라집니다. 

 

 

 

 

최종 결과물

 

 

 

따단  ! 위에 작성한 코드를 swift 파일로 따로 분리하고 상속하였다.

//
//  ContentView.swift
//  StudySwift
//
//  Created by jysoft on 2023/03/03.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            MyVstackView()
            MyVstackView()
            MyVstackView()
            CircleImageView()
        
            
        }.padding(20)
            .background(Color.purple)
}

    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}