Overlay란?

ZStack과 유사하게 뷰를 중첩하기 위해 overlay를 이용할 수 있다. 단지 ZStack과 몇가지 차이가 있다.

A뷰 위에 B뷰를 오버레이한다고 가정하자.
1. B는 항상 A 위에 위치한다.
2. B는 항상 A 좌표 안에 위치한다.

사용 예제 : 검색 바

트위터 클론코딩 중 검색 바를 만들 때 이용했다.

struct SearchBar: View {
    
    @Binding var text: String
    
    var body: some View {
        HStack {
            VStack {
                HStack(spacing: 0) {
                    Image(systemName: "magnifyingglass")
                        .padding(.leading, 10)
                    TextField("Search", text: $text)
                        .frame(width: 320, height:40)
                }
                .background(Color(.systemGray6))
                .cornerRadius(8)
                .foregroundColor(.gray)
                .padding(.horizontal, 24)
                
                TextField("Search", text: $text)
                    .padding(8)
                    .padding(.horizontal, 24)
                    .background(Color(.systemGray6))
                    .cornerRadius(8)
                    .overlay(
                        HStack {
                            Image(systemName: "magnifyingglass")
                                .foregroundColor(.gray)
                                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                .padding(.leading, 8)
                        }
                    )
            }
           
        }
        .padding(.horizontal, 10)
        
       
        
    }
}

TextField를 만들면 기본적으로 앞에 공간이 남아있는데 이 부분을 돋보기 이미지를 넣었다. 이미지 크기를 키우려고해도 텍스트필드에 오버레이 된 상태이기 때문에 그 크기를 넘어갈 수 없다.

위의 검색바는 굳이 오버레이를 이용해야할까 싶어서 내가 따로 작성한 검색바다. 이 경우에는 HStack을 이용하는 편이 더 깔끔하다고 생각한다.