swift) UISegmentedControl 화면이동

안녕하세요 현즈입니다 !

이번에는 UISegmentedControl을 사용한 화면이동 구현을 포스팅하려고 합니다.

UISegmentedControl

segmentedControl은 여러 세그먼트로 구성된 수평 컨트롤로, 각 세그먼트는 개별 버튼으로 작동합니다.

스토리보드에서 세그먼트 수를 더 추가할 수도 있고,
세그먼트 내 제목(NSString객체) 또는 이미지( UIImage객체)를 추가하여 변경할 수도 있습니다.

이번 포스팅은 view안에 SegmentedControl을 추가한 다음
해당 세그먼트마다 화면이동을 하게끔 구현하도록 하겠습니다!

1. 스토리보드 SegmentedControl 추가 및 VC segue 연결
   

main.storyboard viewcontroller에

• SegmentedControl
• searchbar
• button
  3개를 추가합니다. (imageview는 넣어도 되고 안넣어도 됩니다)

viewcontroller 2개를 스토리보드에 추가하여,
각 view에 label-title을 설정해줍니다.
(저는 UserLisetVC, PhotoCollectionVC로 설정해주었습니다)

이 때 아래처럼 추가로 만들어준 2개의 뷰컨트롤러에 해당되는 새 swift파일을 만들어주고 class를 정의해주어야합니다 !!

만들어준 두 뷰컨트롤러의 identify inspector - customclass에서 방금 만들어준 파일을 연결시켜줍니다.

그 후, 메인뷰컨트롤러와 UserLisetVC, PhotoCollectionVC를 segue 연결을 해줍니다.

가장 중요한! segue identifier를 각각 지정해줍니다 !
(왜 중요하냐면,나중에 해당 세그먼트마다 화면이동 시켜줄 때, identifier가 필요하기 때문!)

2. viewcontroller에 outlet 연결

import UIKit

class HomeVC: UIViewController {
    
    @IBOutlet weak var searchFilterSegment: UISegmentedControl!
    
    @IBOutlet weak var searchBar: UISearchBar!
    
    @IBOutlet weak var searchButton: UIButton!
    
    @IBOutlet weak var searchIndicator: UIActivityIndicatorView!
    

3. valueChanged 속성을 사용해 세그멘티드 컨트롤에 타깃 액션 메소드등록

@IBAction func searchFilterValueChanged(_ sender: UISegmentedControl) {
       
        }

4. 액션 메소드를 등록해주었으면, switch문으로 selectedSegmentIndex 값에 따라 다른 플레이스홀더를 적용해주는 코드를 입력한다

 @IBAction func searchFilterValueChanged(_ sender: UISegmentedControl) {
        print("HomeVC - searchFilterValueChanged() called /index: \(sender.selectedSegmentIndex) ")
        
        //선택된 인덱스마다 플레이스 홀더 변경하기
        var searchBarTitle = ""
        
        switch sender.selectedSegmentIndex {
        case 0:
            searchBarTitle = "사진 키워드"
        case 1:
            searchBarTitle = "사용자 이름"
        default:
            searchBarTitle = "사진 키워드"
        }
        
        self.searchBar.placeholder = searchBarTitle + " 입력"
        
        self.searchBar.becomeFirstResponder()   //포커싱 - 키보드 올라오게하기
       // self.searchBar.resignFirstResponder() //포커싱 해제
    }
    
}

여기서 self.searchBar.becomeFirstResponder() 는 세그먼트를 눌렀을 때 포커싱을 해주어 키보드를 view에 올라오게 해주는 기능이다.

(만약 키보드가 올라오지 않는다면 cmd + k 를 하면 작동한다)

5. button을 액션메소드로 다시 segue 연결을 해준다.

String타입의 segueId 변수를 만든 후, switch문으로 searchFilterSegment.selectedSegmentIndex 값에 따라
화면이동을 하게끔 아래 코드를 작성한다.

 //선택된 인덱스에서 버튼 눌렀을 때 해당 인덱스 표시
    @IBAction func onSearchButtonClicked(_ sender: UIButton) {
        print("HomeVC - onSearchButtonClicked() called / selectedIndex  \(searchFilterSegment.selectedSegmentIndex) ")
        
        var segueId: String = ""
        
        switch searchFilterSegment.selectedSegmentIndex {
        case 0:
            print("사진 화면으로 이동")
            segueId = "goToPhotoCollectionVC"
        case 1:
            print("사용자 화면으로 이동")
            segueId = "goToUserListVC"
        default:
            print("default")
            segueId = "goToPhotoCollectionVC"
        }
        
        //화면 이동 - homevc 화면에서 이동한다 
        self.performSegue(withIdentifier: segueId, sender: self)
    }

case문 내 segueId에는 UserLisetVC, PhotoCollectionVC 두 컨트롤러로 segue에 지정한 identifier를 입력하여

유저가 세그먼트 지정 후, 버튼을 누를 때, 해당 화면으로 연결이 되게 구현한다.