23.12.13 TIL SwiftUI 8. Background And Overlays

Background And Overlays

• 백그라운드와 오버레이의 차이점: 백그라운드는 오리지널 아이콘의 뒤에 생성되고, 오버레이는 오리지널의 위에 생성된다
• alignment로 위치 변경하기
• 하트아이콘 만들면서 색넣고 그림자 넣고 위치도 변경해보기

import SwiftUI

struct BackgroundAndOverlayBootcamp: View {
    var body: some View {
        Image(systemName: "heart.fill")
            .font(.system(size: 40))
            .foregroundColor(.white)
            .background(
                Circle()
                    .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [Color(#colorLiteral(red: 0.5818830132, green: 0.2156915367, blue: 1, alpha: 1)), Color(#colorLiteral(red: 0.3236978054, green: 0.1063579395, blue: 0.574860394, alpha: 1))]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                    )
                    .frame(width: 100, height: 100)
                    .shadow(color: Color(#colorLiteral(red: 0.3236978054, green: 0.1063579395, blue: 0.574860394, alpha: 0.5)), radius: 10, x: 0.0, y: 10)
                    //overlay를 이용해서 하트 아이콘 위에 notification 만들기
                    .overlay(
                        Circle()
                            .fill(Color.blue)
                            .frame(width: 35, height: 35)
                        //notification 아이콘 위에 숫자 보여주기
                            .overlay(
                                Text ("5")
                                    .font(.headline)
                                    .foregroundColor(.white)
                            )
                            .shadow(color: Color(#colorLiteral(red: 0.3236978054, green: 0.1063579395, blue: 0.574860394, alpha: 0.5)), radius: 10, x: 5, y: 5)
                        , alignment: .bottomTrailing //notification Circle의 위치를 지정하는 코드
                    )
            )
        

        //3. Alignment
        //백그라운드와 오버레이는 둘 다 alignment를 쓸 수 있다
        Rectangle()
            .frame(width: 100, height: 100)
            //오버레이 Rectangle은 original Rectangle 위에 올라간다
            .overlay(
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 50, height: 50)
                , alignment: .bottomLeading
            )
            //백그라운드 Rectangle은 original Rectangle 뒤로 간다
            .background(
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 150, height: 150)
                , alignment: .leading
            )
        
        
        
        //2. Overlay
        //Overlay는 위에 쌓인다. Overlays go on top of each other instead of behind each other.
        Circle()
            .fill(Color.pink)
            .frame(width: 100, height: 100)
            .overlay( //Circle 위에 Text가 올라간다
                Text("1")
                    .font(.largeTitle)
                    .foregroundColor(.white)
            )
        //overlay와 background의 combination
            .background(
                Circle()
                    .fill(Color.purple)
                    .frame(width: 110, height: 110)
            )
       
        
        
        //1. 백그라운드는 뒤에 쌓인다
        Text("Hello, World!")
            //.frame(width: 100, height: 100, alignment: .center) //이걸 text에 써도 되고, circle에 써도 된다
            .background(
                //Color.red
                //LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)
                Circle()
                    .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
                    .frame(width: 100, height: 100, alignment: .center)
            )
            //.frame(width: 120, height: 120, alignment: .center)
            .background(
                Circle()
                    .fill(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.red]), startPoint: .leading, endPoint: .trailing))
                    .frame(width: 120, height: 120, alignment: .center)
            )
         
            
    }
}

#Preview {
    BackgroundAndOverlayBootcamp()
}

4번 완성 프리뷰