[SwiftUI Project] 검색화면으로 전환하기 NavigationLink

HomeView에서 SearchView로 전환하기

재사용 가능한 검색창 SearchBarView.swift

import SwiftUI

struct SearchBarView: View {
    
    @Binding var searchText: String
    
    var body: some View {
        
        HStack(spacing: 0) {
            IconView(iconName: "magnifyingglass")
                .padding(.vertical, -10)
                .padding(.horizontal, -5)
            
            TextField("Search", text: $searchText)
                .foregroundColor(Color.white)
                .accentColor(Color.theme.binanceColor) // Cursor color
                .overlay(
                    Image(systemName: "xmark.circle.fill")
                        .padding()
                        .foregroundColor(Color.theme.iconColor)
                        .offset(x: 10)
                        .opacity(searchText.isEmpty ? 0.0 : 0.5) <- 입력이 시작되면 삭제버튼 보여주기
                        .onTapGesture {
                            searchText = "" <- 삭제버튼을 누르면 입력한 내용이 삭제됩니다.
                        }
                    , alignment: .trailing
                )
        }
        .background(Color.theme.searchBar)
        .cornerRadius(25)
    }
}

struct SearchBarView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SearchBarView(searchText: .constant(""))
                .preferredColorScheme(.dark)
                .previewLayout(.sizeThatFits)
            SearchBarView(searchText: .constant(""))
                .preferredColorScheme(.light)
                .previewLayout(.sizeThatFits)
        }
    }
}

 

SearchBarView.swift 프리뷰

이후 SearchView.swift 생성해주었습니다. 

import SwiftUI

struct SearchView: View {
    
    @StateObject private var viewModel = HomeViewModel()
    @Environment(\.presentationMode) var presentationMode <- 이전 화면으로 돌아가기
    
    var body: some View {
        ZStack {
            Color.theme.background
                .ignoresSafeArea()
            VStack(spacing: 0) {
                searchBar
                Spacer()
            }
        }
        .navigationBarHidden(true)
    }
}

struct SearchView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView()
            .preferredColorScheme(.dark)
    }
}

extension SearchView {
    
    private var searchBar: some View {
        HStack {
            SearchBarView(searchText: $viewModel.searchText)
                .frame(width: 320)
            Spacer()
            Text("Cancel")
                .foregroundColor(Color.theme.binanceColor)
                .font(.subheadline)
                .onTapGesture {
                    presentationMode.wrappedValue.dismiss() <- 이전 화면으로 돌아가기
                }
        }
        .padding()
    }
}

 

HomeView.swift 에서도 돋보기 버튼을 눌렀을 때 SearchView로 넘어갈 수 있도록 수정

    private var homeHeader: some View {
        HStack {
            IconView(iconName: showMenu ? "arrow.left" : "person.circle")
                .onTapGesture {
                    withAnimation() {
                        showMenu.toggle()
                    }
                }
                .animation(.none, value: showMenu)
            
            Spacer()
            
            if !showMenu {
                HStack {
                    NavigationLink( <- 지정하는 화면으로 전환할 수 있게 해줍니다.
                        destination: SearchView()) {
                            IconView(iconName: "magnifyingglass")
                                .padding(.trailing, -20)
                        }
                    IconView(iconName: "qrcode.viewfinder")
                }
            } else {
                IconView(iconName: "sun.min.fill")
                    .padding(.trailing, 18)
            }
        }
    }

완성!

화면 전환하기 완료!

 

보완해야 할 점은 화면 전환했을 때 검색 textField가 Focus 되어서 바로 키보드가 활성화되는 것인데요. 

 

지금은 검색화면에서 유저가 텍스트필드를 한번더 클릭해야 키보드가 활성화되기 때문에 유저경험에서 별로 좋지 않을 것 같습니다.

 

곧 보완해서 업데이트 할 예정..!

오늘의 NavigationLink 공부했던 블로그: https://seons-dev.tistory.com/entry/NavigationView

SwiftUI : NavigationView / NavigationLink

보완을 위해 참고하게 될 유튜브 영상: https://www.youtube.com/watch?v=7Q8WE8u3HAg&ab_channel=JamesHaville