Design an interface

Practice putting views where you want them and inspecting their size by building two onboarding screens for an iOS app. As you code, play with your own layout, colors, graphics, and text to make this project meaningful to you.
Apple Tutorial

Tutorial Goal

View를 배치하고 검사하는 능력 기르기

Tutorial View	My View

첫 번째 View는 그럭저럭 비슷했지만 두 번째는 확연히 달랐다.
확실히 여러 줄의 Text와 Image의 frame을 마음대로 다루기 어려웠다.
사용 가능한 modifier을 여럿 알고 있는데도 막상 사용하니 생각했던 대로 움직이지 않았다.

Newly Learned

TabView

TabView는 우리가 흔히 보던 하단에 탭이 위치한 View를 구성해준다.
이번 튜토리얼에선 페이지 형식의 TabView가 사용되었다.

TabView {
	SomeView1
    SomeView2
}
.tabViewStyle(.page) //페이지 스타일로 전환
.ignoresSafeArea() //그라데이션을 화면가득 채우기 위함
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))//.never 시 배경 안 보임, 흰색 배경에서도 인디케이터를 보기 위함

image의 사이즈 조정

Image에 바로 .frame modifier를 사용했을 때 사이즈 변경이 되지 않았다.
Image의 사이즈 변경을 위해선 .resizable()을 붙여주어야 했다.

Image(systemName: "sun.max")
.resizable()
.frame(width:50, height:50)

선형 그라데이션

Gradient를 입력하면 사용 가능한 그라데이션이 여럿 나온다.
위에서 아래로 내려오는 선형 그라데이션이 목표이므로 LinearGradient를 사용했다.

LinearGradient(colors: [Color("Purple"), Color("Orange")], startPoint: .top, endPoint: .bottom)
    .ignoresSafeArea()//화면 가득 그라데이션을 넣기 위한 수정자. 
    //여기 뿐 아니라 상위 View에도 추가해야 했다.
    
    //색상은 ColorAsset을 추가해서 사용했다.
   

Learned from Tutorial

.background

튜토리얼은 여러 색상의 .border를 통해 어떤 객체가 어떻게 공간을 차지하고 있는지 시각적으로 체크하며 조정해나갔다.
바로 이전 튜토리얼에서 .border를 이렇게 쓴다고 읽었는데 이번에 적용해볼 생각을 못한게 아쉽다.

튀어나간 텍스트	좌측 정렬 안 됨

혼자 해볼 때 RoundedRectangle을 .background가 아닌 ZStack으로 넣으면서 발생한 문제가 있었다.
.background로 Text와 Image가 있는 HStack에 종속되어 있지 않고 따로 존재했기 때문에 Text가 여러줄이 되었을 때 도형을 넘어가는 문제가 생겨 .lineLimit()을 넣어야 했다.
또 Text가 여러줄이 되면서 frame의 크기가 바뀌니 2줄과 3줄일 때 이미지와의 위치가 달라졌다.
HStack에 Spacer()을 넣어서 두 번째 문제는 해결했지만 첫 번째는 튜토리얼을 본 후에 해결했다.
다만 일정한 크기로 고정되어야 하는 경우에 사용할 수 있는 lineLimit()을 알게 된 게 나쁘진 않았다.

Color, Gradient

Gradient(colors: [Color])를 보면 알 수 있듯 색상 배열을 이용해 그라데이션을 줄 수 있다. 따로 설정하지 않는다면 위에서 아래로, 배열의 순서대로 색을 넣어준다.

추가로 Color Asset에 입력한 이름을 자동으로 카멜케이스에 맞춰 변환해준다.

safeArea에 색 넣기

내가 배경에 색을 넣은 방법은 해당 View안에 ZStack을 이용한 것이다. 이렇게 할 때 위아래에 생기는 safeArea의 흰 배경을 지우기 위해 배경이 될 그라데이션에 .ignoresSafeArea()를 넣었다.
튜토리얼에서는 전역 변수로 색상 배열을 선언한 뒤 View 자체에 .background()를 사용해 색상을 넣었다.
작은 아이콘이나 이미지, 텍스트 등을 쌓아나갈 때는 분명한 차이가 있지만, 가장 밑에 깔리는 배경만 보았을 때 ZStack과 .background()의 차이는 없어보였다.

기존 코드

LinearGradient(colors: [Color("Purple"), Color("Orange")], startPoint: .top, endPoint: .bottom)
    .ignoresSafeArea()
VStack{
    Text("Features")
        .foregroundStyle(.white)
        .font(.largeTitle)
        .bold()
        .padding()
    ZStack{
        RoundedRectangle(cornerRadius: 15)
            .opacity(0.3)
            .frame(width: .infinity, height: 100)
        HStack{
            Image("Coffee")
                .resizable()
                .frame(width: 50,height: 50)
                .clipShape(RoundedRectangle(cornerRadius: 20.0))
                .padding(.leading)
            
            
            Text("This is my coffe. \nThe art name is Rosetta. \nI practiced many times")
                .multilineTextAlignment(.leading)
                .font(.title3)
                .lineLimit(2)
            
            Spacer()
        }
        .foregroundStyle(.white)
    }
    .padding(.horizontal)
    //
    ZStack{
        RoundedRectangle(cornerRadius: 15)
            .opacity(0.3)
            .frame(width: .infinity, height: 100)
        HStack{
            Image(systemName:"quote.bubble.fill")
                .resizable()
                .frame(width: 50,height: 50)
                .padding(.leading)
            
            
            
            Text("mich nicht umbright, macht mich stärker")
                .font(.title3)
                .lineLimit(2)
            
            Spacer()
            
        }
        .foregroundStyle(.white)
    }
    .padding(.horizontal)
    Spacer()
}

개선 코드

ZStack{
    LinearGradient(colors: [Color("Purple"), Color("Orange")], startPoint: .top, endPoint: .bottom)
        .ignoresSafeArea()
    VStack{
        Text("Features")
            .foregroundStyle(.white)
            .font(.largeTitle)
            .bold()
            .padding(.top,50)
        
        Bubble(iconName: "person.2.crop.square.stack.fill", description: "Apple tutorial")
        Bubble(iconName: "quote.bubble.fill", description: "mich nicht umbright, macht mich stärker")
        Spacer()
        
    }
    .padding()
    
}
struct Bubble: View {
    
    let iconName: String
    let description: String
    
    var body: some View {
        
        HStack{
            Image(systemName: iconName)
                .font(.largeTitle)
                .frame(width: 50)
                .padding(.trailing)
            Text(description)
            Spacer()
        }
        .padding()
        .foregroundStyle(.white)
        .background(RoundedRectangle(cornerRadius: 10)
            .foregroundStyle(.tint)
            .opacity(0.2)
            .brightness(-0.4))
        
        
        
    }
}

View 비교

Tutorial	Before	After