[iOS/UI] 서치바 커스텀하기 (Custom UISearchBar)

안녕하세요! Foma입니다!

이번에는 서치바에 대해서 다뤄볼건데요.

가끔 서치바의 배경색이나 돋보기이미지 등을 바꾸고싶을 때가 있었습니다.

그래서 열심히 구글링해본 결과

 

   1.서치바의 플레이스홀더(검색하기 전에 회색글씨로 떠있는것) 세팅

   2.서치바의 왼쪽 돋보기 아이콘 이미지 세팅

   3.서치바의 오른쪽 엑스버튼 이미지 세팅(검색했을 때)

   4.서치바를 네비게이션바에 넣는법

   5.서치바의 배경화면,글씨색,플레이스홀더색 세팅

   6.서치바 왼쪽,오른쪽 이미지 넣기 틴트색 세팅

 

이렇게 커스텀하는 법을 알 수 있었습니다.

 

먼저 가장 먼저 해주어야할 것은 searchbar를 만들어주는 것입니다. = > let searchBar = UISearchBar()

 

1.플레이스홀더 설정법은 searchBar에 .placeholder를 해주시고 원하는 문구를 써주시면 됩니다. => searchBar.placeholder = "Search"(원하는 문구)

 

2.서치바의 왼쪽 돋보기 아이콘 이미지 세팅은 .setImage를 해주시고 차례대로 원하는 이미지와 for:UISearchBar.Icon.search(서치아이콘),state는 .normal로 해주시면 됩니다.

 => searchBar.setImage(UIImage(named: "icSearchNonW"), for: UISearchBar.Icon.search, state: .normal)

 

3.서치바의 오른쪽 엑스버튼 이미지 세팅(검색했을 때)  2와 마찬지이지만 for에는 .clear(검색한 문장을 없앨때 아이콘)로만 바꿔주시면 됩니다.

 => searchBar.setImage(UIImage(named: "icCancel"), for: .clear, state: .normal)

 

4. 서치바를 네비게이션바에 넣는법은 주의하실점은 네비게이션 콘트롤러가 상위 뷰컨트롤러로 존재해야합니다.

만약 존재한다면 navigationBar에 topItem에 titleView를 searchBar로 설정해주시면됩니다.

=> self.navigationController?.navigationBar.topItem?.titleView = searchBar

 

5.서치바의 배경화면,글씨색,플레이스홀더색 세팅은

가장 먼저

=>  if let textfield = searchBar.value(forKey: "searchField") as? UITextField { ...} 로 서치바의 서치필드 값을 가진 textfield를 만들어주시고 배경화면과 글씨색은 간단하게 .backgroundColor와 .textColor로 설정해줍니다.

플레이스홀더는 따로 NSAttributedString으로 attributes 안에  [NSAttributedString.Key.foregroundColor : 원하는색]을 넣어주시면 됩니다.

=> textfield.backgroundColor = UIColor.black (배경화면)

     textfield.attributedPlaceholder= NSAttributedString(string: textfield.placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor : UIColor.lightGray]) (플레이스홀더)

     textfield.textColor = UIColor.white(글씨색)

 

6.서치바의 왼쪽 오른쪽 이미지 넣기 및 틴트설정은 먼저 텍스트필드의 왼쪽뷰(leftView)를 이미지뷰로 만들어주시고

leftView의 이미지를 image.witheRenderingMode(.alwaysTemplate)로 설정해줍니다.

그 다음 틴트 설정은 .tintColor = 원하는 색으로 해줍니다.

오른쪽은(rightView)로 해주시고 마찬가지로 해주시면 됩니다.

 

=> if let leftView = textfield.leftView as? UIImageView {

                leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)

                leftView.tintColor = UIColor.white

            }

=> if let rightView = textfield.rightView as? UIImageView {

                rightView.image = rightView.image?.withRenderingMode(.alwaysTemplate)

                rightView.tintColor = UIColor.white

            }

이렇게 모두 설정해주시면 아래와 같이 자신만의 커스텀된 서치바를 볼 수 있습니다!!!!

 

 

전체코드

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

import UIKit   class ViewController: UIViewController {               override func viewDidLoad() {                  setSearchBar()              }          //서치바 세팅     func setSearchBar(){                  //서치바 만들기         let searchBar = UISearchBar()         searchBar.placeholder = "Search"         //왼쪽 서치아이콘 이미지 세팅하기         searchBar.setImage(UIImage(named: "icSearchNonW"), for: UISearchBar.Icon.search, state: .normal)         //오른쪽 x버튼 이미지 세팅하기         searchBar.setImage(UIImage(named: "icCancel"), for: .clear, state: .normal)         //네비게이션에 서치바 넣기         self.navigationController?.navigationBar.topItem?.titleView = searchBar                  if let textfield = searchBar.value(forKey: "searchField") as? UITextField {             //서치바 백그라운드 컬러             textfield.backgroundColor = UIColor.black             //플레이스홀더 글씨 색 정하기             textfield.attributedPlaceholder = NSAttributedString(string: textfield.placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor : UIColor.lightGray])             //서치바 텍스트입력시 색 정하기             textfield.textColor = UIColor.white             //왼쪽 아이콘 이미지넣기             if let leftView = textfield.leftView as? UIImageView {                 leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)                 //이미지 틴트컬러 정하기                 leftView.tintColor = UIColor.white             }             //오른쪽 x버튼 이미지넣기             if let rightView = textfield.rightView as? UIImageView {                 rightView.image = rightView.image?.withRenderingMode(.alwaysTemplate)                 //이미지 틴트 정하기                 rightView.tintColor = UIColor.white             }           }     }      } Colored by Color Scripter

cs