[Ting] UISearchBar, Custom Navigation Bar 구현

Project Ting

작업내용

1. SearchBar 구현 (클릭시 뷰 이동)
2. Custom Navigation Bar 구현

SearchBar 구현

SearchBar UI 구현

    let searchBar = UISearchBar().then {
        $0.placeholder = "검색"
        $0.searchBarStyle = .minimal
        $0.backgroundImage = UIImage()
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationBar()
        configureUI()
        searchBar.delegate = self // 서치바 delegate 설정
    }

 

backgroundImage에 빈 UIImage()를 생성함으로써 서치바의 배경을 투명하게 설정.

UIImage에 저장된것이 아무것도 없기 때문에 투명하게 보이는 것을 이용한 것이다.

 

SearchBar 클릭 시 검색 뷰로 이동

searchBar 클릭 시, 미리 생성해놓은 검색 뷰로 이동하게끔 구현.

searchBar에는 addTarget 속성이 없기 때문에, delegate 패턴 사용.

 

UISearchBarDelegate 프로토콜 채택

class MainVC: UIViewController, UISearchBarDelegate {

}

 

searchBar delegate 설정

override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationBar()
        configureUI()
        searchBar.delegate = self // 서치바 delegate 설정
    }

 

클릭 시 동작 설정

func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
        let searchVC = SearchVC()
        navigationController?.pushViewController(searchVC, animated: true)
        print("검색버튼 클릭 됨 | 이동완료")
        return false
    }

 

UISearchBarDelegate라는 프로토콜에서 제공하는 메서드 중

searchBarShouldBeginEditing이라는 메서드를 채택.

 

searchBarSearchButtonClicked라는 메서드도 있지만,

이건 서치바를 눌러서, 검색을 위해 키보드가 나왔을때, 검색어를 입력하고 키보드의 리턴키를 눌렀을 때 호출되는 메서드.

 

따라서 서치바를 클릭했을 때 호출되는 메서드인 searchBarShouldBeginEditing이 적합하다.

 

그리고 navigationController를 사용해서 push하는 방식으로 화면을 전환하기 때문에(pushViewController),

SceneDelegate에서 rootViewController를 UINavigationController로 한번 감싸줌

 

window.rootViewController = UINavigationController(rootViewController: MainVC())

 

 

Custom Navigation Bar

기존에는 앱 로고를 그냥 label로 왼쪽 상단에 띄우고 그 밑에 searchBar를 구현했었는데,

위에서 rootViewController를 UINavigationController로 감싸주었기 때문에, 

Navigation Bar가 생김.

 

따라서 아래와 같은 모양으로 로고 위, 상단에 갭이 생김 -> 빈 Navigation Bar가 생성된 것.

 

 

따라서 로고의 구현 방식을 바꿔야했음.

 

Custom Navigation Bar를 구현하게 됨.

 

구현

로고가 왼쪽에 있는 것으로 디자인 되었기 때문에, 

Navigation Bar Item 중, leftBarButton을 이용하기로 함.

 

아래의 글을 읽고 오는 것이 이해에 도움이 된다.

[iOS / Swift] UINavigationBar를 구현해보자.

 

func navigationBar() {
        
        // 커스텀 UILabel을 만들어서 왼쪽 아이템에 넣음
        let logo = UILabel().then {
            $0.text = "Ting"
            $0.font = UIFont(name: "Gemini Moon", size: 50)
            $0.textColor = UIColor(hexCode: "C2410C")
        }
        
        let barItem = UIBarButtonItem(customView: logo)
        navigationItem.leftBarButtonItem = barItem
    }

 

logo라는 이름으로 label을 하나 만들고, 들어갈 텍스트와, 폰트, 컬러, 사이즈를 정의함

(컬러를 RGB가 아닌 Hex Color Code로 사용하는 방법은 아래의 글을 참고)

[Swift / iOS] Hex Color로 색 구현하기

 

그리고 navigationItem의 leftBarButtonItem으로 지정.

따로 버튼 클릭 액션이나 다른것은 넣지 않았기 때문에, 단순이 label이 그 자리에 떠있게 됨.

 

 

로고가 제대로 된 위치에 자리하고, 서치바를 클릭했을때, 뷰가 전환되게 됨.