SwiftUI 검색창 만들기 가벼운 필터 기능 추가

안녕하세요 SwiftUI 로 검색창 만들고 가벼운 필터까지 넣을수 있는 기능 바로 시작합니다.

 

SearchBar with Filter

 

긴 말 싫어합니다 바로 만들러가죠

struct searchBar: View {
    //Binding은 외부에서 값을 바인딩시킬수있다.
    //택스트필드에 들어갈 값을 저장하기위한 변수
    @Binding var text : String
    @State var editText : Bool = false
    
    var body: some View {
        HStack{
            //검색창을 받을수있는 택스트필드
            TextField("검색어를 넣어주세요" , text : self.$text)
                //hint와 태두리에 간격을 띄우기위해 15정도의 간격을주고
                .padding(15)
                //양옆은 추가로 15를 더줌
                .padding(.horizontal,15)
                //배경색상은 자유롭게선택
                .background(Color(.systemGray6))
                //검색창이 너무각지면 딱딱해보이기때문에 모서리를 둥글게
                //숫자는 취향것
                .cornerRadius(15)
                //내가만든 검색창 상단에
                //돋보기를 넣어주기위해
                //오버레이를 선언
                .overlay(
                    //HStack을 선언하여
                    //가로로 view를 쌓을수있도록 하나 만들고
                    HStack{
                        //맨오른쪽으로 밀기위해 Spacer()로 밀어준다.
                        Spacer()
                        //xcode에서 지원해주는 이미지
                       
                        if self.editText{
                            //x버튼이미지를 클릭하게되면 입력되어있던값들을 취소하고
                            //키입력 이벤트를 종료해야한다.
                            Button(action : {
                                self.editText = false
                                self.text = ""
                                //키보드에서 입력을 끝내게하는 코드
                                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                            }){
                                Image(systemName: "multiply.circle.fill")
                                    .foregroundColor(Color(.black))
                                    .padding()
                            }
                        }else{
                            //magnifyingglass 를 사용
                            //색상은 자유롭게 변경가능
                            Image(systemName: "magnifyingglass")
                                .foregroundColor(Color(.black))
                                .padding()
                        }
                       
                    }
                ).onTapGesture {
                    self.editText = true
                }
        }
        
        
    }
}

 

우선 간단하게 View 를 그려줍니다.

 

이렇게 선언해주면

만들어진 검색창 (왼쪽 입력전 , 오른쪽 입력시작시)

간단하게 검색창을 그릴수있습니다. 여기서 추가적인 기능을 원한다면 커스텀을 하면되겠죠?

 

현재 제가 만든 기능들은 주석을통해 적어놓았습니다.

 

저는 흠 좀 많이 쓰일 상황인 필터를 여기에 추가로 작업을 해봤어요

 

 

방금 전 만든 서치바를 이용하고 아래쪽에는 간단한 리스트를 만들어봤어요 만들어진 화면은

 

struct main : View {
    @State var text : String = ""
    
    var body :some View{
        VStack{
            searchBar(text: self.$text)
            List(0..<20){ i in
                Text("\(i)")
            }
        }
    }
}

그럴싸 하쥬 이제 여기서 제가 검색한 키워드에 따라 필터가 된다면 얼마나 좋을까요?

 

그럴때 리스트에서 자체적으로 지원해주는 filter함수를 사용하면 됩니다. 

 

 

struct main : View {
    @State var text : String = ""
    
    var body :some View{
        VStack{
            searchBar(text: self.$text)
            List((0..<20).filter({"\($0)".contains(self.text) || self.text.isEmpty}), id : \.self){ i in
                Text("\(i)")
            }
        }
    }
}

 

이렇게에 필터를 넣어준후 키워드를 입력하게된다면

입력값에 따라 필터가 적용된모습

 

이렇게 입력값에 따라 필터가 적용된 모습을 볼수있었습니다.

 

 

모두 즐코딩하세요!