UISearchBar 사용하기

 

 

• UISearchBar를 사용하여 서치바를 커스텀했습니다. 
• 돋보기의 크기와 두께를 조절했습니다. 
• 서치바의 텍스트 필드의 배경색, 모서리에 라운드 및 색상을 추가했습니다. 

 

    let searchBar: UISearchBar = {
        let searchBar = UISearchBar()
        searchBar.placeholder = "지역, 공간, 큐레이션 검색"
        searchBar.searchBarStyle = .minimal
        return searchBar
    }()

 

 

func configureSearchBarTextField() {
        // UITextField appearance 설정
        let searchTextFieldAppearance = UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self])
        searchTextFieldAppearance.backgroundColor = UIColor.systemGray5 // 텍스트 필드 배경색
        searchTextFieldAppearance.layer.cornerRadius = 18 // 라운드 코너
        searchTextFieldAppearance.layer.masksToBounds = true
        searchTextFieldAppearance.textColor = .black // 텍스트 색상
        searchTextFieldAppearance.font = UIFont.systemFont(ofSize: 16) // 폰트 크기
        
        // 커스텀 아이콘 설정
        if let textField = searchBar.value(forKey: "searchField") as? UITextField {
            let customIcon = UIImage(systemName: "magnifyingglass")?.withConfiguration(UIImage.SymbolConfiguration(pointSize: 25, weight: .bold))
            let iconView = UIImageView(image: customIcon)
            iconView.tintColor = .black
            iconView.contentMode = .scaleAspectFit // 크기 맞춤 설정
            iconView.frame = CGRect(x: 0, y: 0, width: 25, height: 25) // 아이콘 크기 설정
            
            // leftView에 커스텀 아이콘 적용
            textField.leftView = iconView
            textField.leftViewMode = .always
        }
    }

 

 

    override func viewDidLoad() {
        super.viewDidLoad()
		...
        configureSearchBarTextField()
        
    }

 

 

 

• 아이콘 이미지 설정:
  • UIImage(systemName: "magnifyingglass")?.withConfiguration(UIImage.SymbolConfiguration(pointSize: 25, weight: .bold))로 원하는 크기와 두께를 적용한 아이콘 이미지를 생성합니다.
• UIImageView에 아이콘 적용:
  • UIImageView를 생성하여 leftView에 적용합니다.
  • contentMode를 .scaleAspectFit으로 설정하여 아이콘이 뷰 크기에 맞게 조절되도록 했습니다.
  • frame을 통해 아이콘 크기를 직접 설정하여 원하는 사이즈로 조정합니다.
• leftView에 아이콘 설정:
  • UITextField의 leftView에 커스텀한 UIImageView를 설정하여 원하는 크기와 두께의 아이콘이 표시되도록 합니다.

 

textField.leftViewMode = .always는 UITextField의 leftView가 언제 표시될지를 결정하는 속성입니다. leftView는 UITextField 왼쪽에 추가할 수 있는 보조 뷰(예: 아이콘)인데, leftViewMode를 통해 표시 조건을 설정할 수 있습니다.

leftViewMode의 주요 옵션은 다음과 같습니다:

1. .always: leftView가 항상 표시됩니다. 즉, 텍스트 필드가 비어 있거나 텍스트가 입력되었을 때 모두 보이게 됩니다.
2. .never: leftView가 절대 표시되지 않습니다. leftView에 아무리 뷰를 추가해도 보이지 않습니다.
3. .whileEditing: leftView가 텍스트 필드가 편집될 때만 표시됩니다. 즉, 사용자가 텍스트 필드에 커서를 두고 텍스트를 입력할 때에만 보입니다.
4. .unlessEditing: leftView가 텍스트 필드가 편집 중이 아닐 때만 표시됩니다. 텍스트 필드에 커서가 없는 경우에만 leftView가 보입니다.