Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- spring boot
- mac
- Node.js
- db
- 앱개발
- 통신
- UI
- Swift
- SwiftUI
- 개발자
- swagger
- 회원가입
- 백준
- 아이폰
- 백엔드
- spring
- database
- java spring
- node
- IOS
- 개발
- JavaScript
- 알고리즘
- API
- 앱
- Xcode
- post
- Alamofire
- Java
- 서버개발
Archives
- Today
- Total
YagSill
Swift SearchBar 활용하기 본문
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
'Swift IOS 앱 아무거나 만들어보기' 카테고리의 다른 글
Swift TextField 키보드 감지 하기(NotificationCenter) (0) | 2022.01.20 |
---|---|
Swift AutoLayout 코드로만 작성해보기 (0) | 2022.01.14 |
IOS Swift Delegate 알아보기 (0) | 2022.01.06 |
IOS Swift 배경이 보이는 팝업(popup)창 만들기 (0) | 2022.01.05 |
IOS Swift NavigationTabBar 사용하기 (0) | 2022.01.04 |