YagSill

Swift SearchBar 활용하기 본문

Swift IOS 앱 아무거나 만들어보기

Swift SearchBar 활용하기

YagSill 2022. 1. 19. 10:46
728x90

안녕하세요 Yagsill 입니다~!

 

오늘은 SearchBar를 이용해 검색 기능을 구현해 보겠습니다!

-> 저희가 만들 앱은 이런 형식입니다

 

1. 오브젝트 Oulet 연결하기

  @IBOutlet weak var SearchFilterSegment: UISegmentedControl!
  @IBOutlet weak var SerachBar: UISearchBar!
  @IBOutlet weak var SearchBtn: UIButton!
  @IBOutlet weak var Indicator: UIActivityIndicatorView!

-> 위 앱에서 카카오 라이언 이미지 밑에 SegmentControl, searchBar, Button, Button 위에 Indicator까지 총 4개를 아울렛 연결을 해 주었습니다.

 

 

2. SegementControl 액션 넣기

@IBAction func SearchFilterValueChanged(_ sender: UISegmentedControl) {
        
        // SearchFilterSegement 두개 선택 시 SearchBar placeholder 값 변경하기
        var SearchBarTitle = ""
        //서치바에 포커싱 주기
        self.SerachBar.becomeFirstResponder()
        
        switch sender.selectedSegmentIndex {
        case 0 :
            SearchBarTitle = "사진 키워드"
        case 1 :
            SearchBarTitle = "사용자 이름"
        default :
            SearchBarTitle = "사진 키워드"
        }
        self.SerachBar.placeholder = SearchBarTitle + " 입력"
        
        
        print("Called")
        
    }

-> SegementControl에서 0번과 1번이 있습니다. 해당 번호를 클릭할 때 마다 이벤트를 주면 됩니다.

-> SearchBar의 Title을 String타입으로 주시고 self.SerachBar.placeholder에 SearchBar를 주면 됩니다.

 

3.하단 Button에 액션 넣기

@IBAction func OnSearchBtnClicked(_ sender: UIButton) {
        print("Search 버튼 눌림\(SearchFilterSegment.selectedSegmentIndex)")
        
        var segueId : String = ""
        
        switch SearchFilterSegment.selectedSegmentIndex {
        case 0:
            print("사진 화면으로 이동")
            segueId = "PhotoViewController"
        case 1:
            print("사용자 화면으로 이동")
            segueId = "UserViewController"
        default:
            print("default")
            segueId = "PhotoViewController"
        }
        
        // 화면 이동하기 -> segue는 스토리보드 화살표에 Identifier 걸어야함.
        
        self.performSegue(withIdentifier: segueId, sender: self)

 

-> 하단에 Search 라는 Button에 이벤트를 걸어줍니다.

-> Switch 문을 사용해서 페이지를 이동시킵니다.

-> 페이지를 이동시키는데 가장 중요한건 맨 아래 withIdentifier 입니다. 이 부분에 인자값으로 segueId라는 변수를 넣어줍니다.

-> segueId 변수에는 String 타입으로 컨트롤러를 넣어주면 됩니다.

 

4. SearchBar에 적용될 함수(func) 두가지 넣기

 

// SearchBar에 텍스트 입력시 shouldChangeText를 써서 해당 입력값의 카운트를 알 수 있음.
    func searchBar(_ searchBar : UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        
        // 사용자가 searchBar에 입력한 Text의 카운트가 입력된다.
        let inputTextCount = searchBar.text?.appending(text).count ?? 0
        
        // searchBar에 입력한 Text가 입력될 때 12개에서 1개 더 입력하려 할 때
        if(inputTextCount >= 12) {
            // 토스트 메세지를 날려줌
            // 토스트 메세지를 날리기 위해서는 "Toast_Swift" 라이브러리를 설치해야 합니다.
            self.view.makeToast("👉 12자까지만 입력가능합니다", duration : 3.0, position : .center)
        }
        
        // searchBar에 입력한 Text가 입력될 떄
        if(inputTextCount <= 12) {
            // 12개 보다 적게 입력하면 입력됨
            return true
        } else {
            // 12개 보다 많게 입력하면 입력안됨
            return false
        }
//
//        print("\(inputTextCount)")
    }

 

SearchBar를 이용하여 페이지를 이동하는 방법까지 완성했습니다! 다음 포스팅은 진짜 검색이 되는 기능을 넣어보도록 하겠습니다!

 

감사합니다!

 

 

728x90