[SwiftUI fundamental Tutorial] Layout

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다. 

 

 

구조 파악하기

 

요소가 3개로 이루어진 VStack 카드

요소 3개 중 1개는 HStack

 

 

import SwiftUI

struct MyCard: View{
	var body: some View{
    
    	VStack{
        	Text("iOS 프로젝트")
            Text("10AM - 11AM")
            HStack{
            	Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
            }
        }
    	.background(Color.yellow)
    }

}

 

 

 

 

 

 

import SwiftUI

struct MyCard: View{
	var body: some View{
    
    	VStack{
        	Text("iOS 프로젝트")
            Text("10AM - 11AM")
            HStack{
            	Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
            }
        }
        .padding(30)
    	.background(Color.yellow)
    }

}

padding()을 주고 background(Color.) 설정

이유: SwiftUI는 위에서부터 아래로 뷰를 그려나가는 형식

 

 

 

VStack 요소들 좌측 정렬하기

import SwiftUI

struct MyCard: View{
	var body: some View{
    
    	VStack(alignment: .leading){
        	Text("iOS 프로젝트")
            Text("10AM - 11AM")
            HStack{
            	Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
            }
        }
        .padding(30)
    	.background(Color.yellow)
        .cornerRadius(20)
    }

}

VStack(alignment: .leading)으로 글자들은 좌측 정렬이 되지만 Circle()들은 좌측 정렬이 안됨

카드 크기를 넓혀서 요소들을 좌측 정렬하고 싶음

 

 

 

지난 Stack 강의에서 배운 

1. Divider() 사용하기

2. empty View 사용하기(✔️)를 이용하여 좌측 정렬하기

import SwiftUI

struct MyCard: View{
	var body: some View{
    
    	VStack(alignment: .leading){
 
        	Rectangle().frame(height: 0)
            
        	Text("iOS 프로젝트")
            Text("10AM - 11AM")
            
            HStack{
            	Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
            }
        }
        .padding(30)
    	.background(Color.yellow)
        .cornerRadius(20)
    }

}

 

 

padding() 또는 Spacer()를 사용하여 글자 간격 띄우기, 텍스트 설정하기

import SwiftUI

struct MyCard: View{
	var body: some View{
    
    	VStack(alignment: .leading){
 
            Rectangle().frame(height: 0)
            
            Text("iOS 프로젝트")
                .font(.system(size:23))
                .fontWeight(.bold)
                .padding(.bottom,5)
                
            Text("10AM - 11AM")
                  .foregroundColor(.secondary)
                  //secondary = 회색
            
            HStack{
            	Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                Circle().frame(width: 50, height: 50)
                
                Spacer()
                
                Text("확인")
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 80)
                        .background(Color.blue)
                        .cornerRadius(20)
            }
        }
        .padding(30)
    	.background(Color.yellow)
        .cornerRadius(20)
    }

}

 

 

 

 

 

랜덤 유저 이미지 사이트에서 이미지 저장

https://randomuser.me/

Random User Generator | Home

 

 

 

Circle() 대신 이미지 사용

import SwiftUI

struct MyCard : View {
    
    var body: some View{
       
        VStack(alignment: .leading){
            
            Rectangle().frame(height:0)
            
            Text("iOS 프로젝트")
                .font(.system(size:23))
                .fontWeight(.bold)
                .padding(.bottom,5)
           
            Text("10 AM - 11 AM")
                .foregroundColor(.secondary)
            
            Spacer().frame(height:20)
            
            HStack{
                Image("1")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                    .overlay(
                    Circle()
                        .stroke(lineWidth: 1)
                        .foregroundColor(Color.red)
                    )
                Image("2")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                Image("3")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                
                Spacer()
                
               
                Text("확인")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding()
                    .frame(width: 80)
                    .background(Color.blue)
                    .cornerRadius(20)
                
            }
        }
        .padding(30)
        .background(Color.yellow)
        .cornerRadius(20)
    }
}

Rectangle()을 사용하면 옵션이 default로 spacing이 추가된 상태

 

 

 

 

 

 

VStack 옵션에 spacing: 0 처리

import SwiftUI

struct MyCard : View {
    
    var body: some View{
       
        VStack(alignment: .leading, spacing: 0){
            
            Rectangle().frame(height:0)
            
            Text("iOS 프로젝트")
                .font(.system(size:23))
                .fontWeight(.bold)
                .padding(.bottom,5)
           
            Text("10 AM - 11 AM")
                .foregroundColor(.secondary)
            
            Spacer().frame(height:20)
            
            HStack{
                Image("1")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                    .overlay(
                    Circle()
                        .stroke(lineWidth: 1)
                        .foregroundColor(Color.red)
                    )
                Image("2")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                Image("3")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                
                Spacer()
                
               
                Text("확인")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding()
                    .frame(width: 80)
                    .background(Color.blue)
                    .cornerRadius(20)
                
            }
        }
        .padding(30)
        .background(Color.yellow)
        .cornerRadius(20)
    }
}

 

 

 

 

📌 번외: 시간 응용하기

임의로 넣은 고정 시간이 아닌 현재 시간(실시간) 받아오기 

import SwiftUI

struct MyCard : View {

    @State
    var shouldShowAlert : Bool = false
    
    let date = Date()
    
    var body: some View{
       
        VStack(alignment: .leading, spacing: 0){
            
            Rectangle().frame(height:0)
            
            Text("iOS 프로젝트")
                .font(.system(size:23))
                .fontWeight(.bold)
                .padding(.bottom,5)
           
             Text(date, style: .time)
                .foregroundColor(.secondary)
            
            Spacer().frame(height:20)
            
            HStack{
                Image("1")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                    .overlay(
                    Circle()
                        .stroke(lineWidth: 1)
                        .foregroundColor(Color.red)
                    )
                Image("2")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                Image("3")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                
                Spacer()
                
               
                Text("확인")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding()
                    .frame(width: 80)
                    .background(Color.blue)
                    .cornerRadius(20)
                
            }
        }
        .padding(30)
        .background(Color.yellow)
        .cornerRadius(20)
    }
}

현재 시간 출력

 

 

 

 

 

 

 

 

일반 VStack 카드 만들기

 

 

 

 

import SwiftUI

struct MyBasic: View{
    
    var body: some View{
        HStack(spacing: 20){
            Image(systemName: "flag.fill")
                .font(.system(size: 40))
                .foregroundColor(.white)
            
             VStack(alignment: .leading, spacing: 0){

                  Divider().opacity(0)
//                Rectangle.frame(height:0)

                Text("test")
                    .fontWeight(.bold)
                    .font(.system(size: 23))
                    .foregroundColor(.white)
                
                Spacer().frame(height:5) //제목과 시간 간격
                
                Text("test")
                    .foregroundColor(.white)
            }
        }
        .padding(30)
        .background(Color.purple)
        .cornerRadius(20)
        
        
    }
}

 

 

 

 

 

 

ContentView에서 만든 카드들 VStack으로 쌓기

import SwiftUI

struct ContentView: View{
	var body: some View{
    
    	VStack{
        
            MyCard()
            MyBasic()
            MyBasic()
            MyBasic()
            
        }
        .padding()
    }
}

그냥 파일 명으로 불러오면 됨

 

 

 

 

 

하단에 플러스 버튼 만들기

import SwiftUI

struct ContentView: View{
	var body: some View{
    
    
        ZStack(alignment: .bottomTrailing){
    	    VStack{
        
                MyCard()
                MyBasic()
                MyBasic()
                MyBasic()
            
            }
            .padding()
            
            Circle()
                .foregroundColor(Color.yellow)
                .frame(width: 60, height: 60)
            .overlay(//sumbol 이미지 넣기
                Image(systemName: "plus")
                .font(.system(size:30))
                .foregroundColor(.white)
            )
                .padding(.trailing, 10)
            .shadow(radius: 20)
        }
    }
}

 

 

 

 

스크롤뷰 처리하기 

import SwiftUI

struct ContentView: View{
	var body: some View{
    
    
        ZStack(alignment: .bottomTrailing){
        
            ScrollView{
        
    	        VStack{
        
                    MyCard()
                    MyBasic()
                    MyBasic()
                    MyBasic()
                    MyBasic()
                    MyBasic()
                    MyBasic()
            
                }
                .padding()
            }
            
            Circle()
                .foregroundColor(Color.yellow)
                .frame(width: 60, height: 60)
            .overlay(//sumbol 이미지 넣기
                Image(systemName: "plus")
                .font(.system(size:30))
                .foregroundColor(.white)
            )
                .padding(.trailing, 10)
            .shadow(radius: 20)
        }
    }
}

 

 

 

 

 

상단 제목, 햄버거 바, 프로필 추가

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing){
            VStack(alignment: .leading, spacing: 0){
                
                HStack{
                    Image(systemName: "line.horizontal.3")
                        .font(.largeTitle)
                    Spacer()
                    Image(systemName: "person.crop.circle.fill")
                        .font(.largeTitle)
                    
                }.padding(.top, 20)
                .padding(.horizontal, 20)
                
                Text("TODO LIST")
                    .font(.system(size: 40))
                    .fontWeight(.black)
                    .padding(.horizontal, 20)
                    .padding(.top,20)
                ScrollView{
                            VStack{
                                    MyCard()
                                    MyBasic()
                                    MyBasic()
                                    MyBasic()
                                    MyBasic()
                                    MyBasic()
                                    MyBasic()
                                	
                                    
                            }.padding()
                    }
            }
            Circle()
                .foregroundColor(Color.yellow)
                .frame(width:60, height: 60)
                .overlay(Image(systemName: "plus")
                            .font(.system(size:30))
                            .foregroundColor(.white))
                .padding(10)
                
                .shadow(radius: 20)
        }
    }
}

 

 

 

 

 

MyBasic()안에 매개변수를 만들어서 자체 인스턴스를 생성할 때 커스텀 카드를 만들 수 있게 하기

import SwiftUI

struct MyProject: View{
    
    var icon : String
    var title : String
    var start: String
    var end : String
    var bgColor : Color
    
    var body: some View{
        HStack(spacing: 20){
            Image(systemName: icon)
                .font(.system(size: 40))
                .foregroundColor(.white)
            
            VStack(alignment: .leading, spacing: 0){
                Divider().opacity(0)
//                Rectangle.frame(height:0)
                Text(title)
                    .fontWeight(.bold)
                    .font(.system(size: 23))
                    .foregroundColor(.white)
                
                Spacer().frame(height:5)
                
                Text("\(start) - \(end)")
                    .foregroundColor(.white)
            }
        }
        .padding(30)
        .background(bgColor)
        .cornerRadius(20)
        
        
    }
}

//매개변수 넣어주기
struct MyProject_Previews: PreviewProvider{
    static var previews: some View{
        MyProject(icon: "book.fill", title: "책 읽기", start: "13:00", end: "15:00", bgColor: Color.green)
    }
}

 

 

 

 

ContentView에 커스텀 카드 적용하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing){
            VStack(alignment: .leading, spacing: 0){
                
                HStack{
                    Image(systemName: "line.horizontal.3")
                        .font(.largeTitle)
                    Spacer()
                    Image(systemName: "person.crop.circle.fill")
                        .font(.largeTitle)
                    
                }.padding(.top, 20)
                .padding(.horizontal, 20)
                
                Text("TODO LIST")
                    .font(.system(size: 40))
                    .fontWeight(.black)
                    .padding(.horizontal, 20)
                    .padding(.top,20)
                ScrollView{
                            VStack{
                                    MyCard()
                                MyProject(icon: "tray.fill", title: "책상 정리하기", start: "13:00", end: "14:00", bgColor: Color.blue)
                                MyProject(icon: "book.fill", title: "책 읽기", start: "14:00", end: "16:00", bgColor: Color.green)
                                MyProject(icon: "tray.fill", title: "기숙사 짐 싸기", start: "16:00", end: "18:00", bgColor: Color.red)
                                MyBasic()
                                    
                                    
                            }.padding()
                    }
            }
            Circle()
                .foregroundColor(Color.yellow)
                .frame(width:60, height: 60)
                .overlay(Image(systemName: "plus")
                            .font(.system(size:30))
                            .foregroundColor(.white))
                .padding(10)
                
                .shadow(radius: 20)
        }
    }
}

 

 

 

 

버튼 처리하기 (팝업 띄우기)

import SwiftUI

struct MyCard : View {
    
    @State
    var shouldShowAlert : Bool = false
    
    let date = Date()
    
    var body: some View{
       
        VStack(alignment: .leading, spacing: 0){
            
            Rectangle().frame(height:0)
            
            Text("iOS 프로젝트")
                .font(.system(size:23))
                .fontWeight(.bold)
                .padding(.bottom,5)
           
            Text(date, style: .time)
                .foregroundColor(.secondary)
            
            Spacer().frame(height:20)
            
            HStack{
                Image("1")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                    .overlay(
                    Circle()
                        .stroke(lineWidth: 1)
                        .foregroundColor(Color.red))
                Image("2")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                Image("3")
                    .resizable()
                    .frame(width: 50, height:50)
                    .clipShape(Circle())
                
                Spacer()
                
                Button(action:{
                    print("확인 되었습니다")
                    self.shouldShowAlert = true
                    
                }){//버튼 생김새
                    Text("확인")
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 80)
                        .background(Color.blue)
                        .cornerRadius(20)
                }.alert(isPresented: $shouldShowAlert){
                    Alert(title: Text("완료 하셨나요?"))
                }
            }
        }
        .padding(30)
        .background(Color.yellow)
        .cornerRadius(20)
    }
}

Button의 기본 형태

Button(action: {

버튼 액션처리

}){

버튼 생김새

}

 

 

버튼의 팝업 창을 띄우기 위해서는 @State 이용

struct 구조는 값이 고정되어 있음 (class는 참조형)

struct 안에서 변수를 사용할 수 있도록 (값을 설정하고 변경할 수 있도록) @State 사용

 

alert안에서는 변수 사용시 $를 붙여야 함