iOS App 만들기 #7 🐥

longlivedrgn·2022년 3월 1일
0

App 만들기

목록 보기
7/7

API 프로젝트

LaunchScreen 설정하기

--> launchscreen -> 앱의 시작화면

Mainstoryboard 구성하기


--> 위와 같이 Navigation을 구성하자.
--> 맨 왼쪽 controller 아이콘을 클릭해서 옵션을 누르고 다른 controller와 show 옵션으로 이어준다. 그러면 맨 위와 같이 mainstoryboard를 구성할 수 있다.

--> 위와 같이 segue(둘중 하나로 선택해서 화면을 이동할 있는 것!)의 identifier를 설정하자.

HomeVC 구성하기


-->위와 같이 HomeVC를 구성하고, 각각의 controller를 viewcontroller와 클래스 연결을 해준다.

HomeVC viewcontroller 구성하기

outlet 가져오기


    @IBOutlet weak var container: UIView!
    
    @IBOutlet weak var searchFilterSegment: UISegmentedControl!
    
    @IBOutlet weak var searchIndicator: UIActivityIndicatorView!
    
    @IBOutlet weak var searchBar: UISearchBar!
    
    @IBOutlet weak var searchButton: UIButton!

segmented control 설정-> placeholder가 변경되게 설정하기

    // segmented control의 구성을 선택할 떄 마다 placeholder의 내용이 바뀌게 설정하기
    @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 + " 입력"
        
        //포커싱 설정 -> filtersegment를 변경하면 알아서 searchbar로 포커싱이 되는 것!
        self.searchBar.becomeFirstResponder()
        
        //포커싱 해제
//        self.searchBar.resignFirstResponder()
    }

검색을 누르면 해당 화면으로 이동하기

pushVC() 설정하기

 fileprivate func pushVC(){
        // segueIdentifier 설정하기
        var segueId : String = ""
        
        
        switch searchFilterSegment.selectedSegmentIndex {
        case 0:
            print("사진화면으로 이동")
            segueId = "goToPhotoCollectionVC"
        case 1:
            print("사용자 화면으로 이동")
            segueId = "goToUserListVC"
        default:
            print("default")
            segueId = "goToPhotoCollectionVC"
        }
        
        //화면 이동
        self.performSegue(withIdentifier: segueId, sender: self)
        
        
    }

검색버튼 클릭시 화면 이동


    @IBAction func onSearchButtonClicked(_ sender: UIButton) {
        print("HomeVC - onSearchButtonClicked() called / selectedIndex: \(searchFilterSegment.selectedSegmentIndex)")
        
        // 화면으로 이동!
        pushVC()
    
    }

searchBar 구성해보기

searchbar delegate을 설정해주기


--> 위와같이 UISearchBarDelegate을 추가해주고

--> delegate을 등록 또한 해준다.

searchbar delegate의 다양한 method를 사용해보자.


    // 만약 검색창에 글을 하나도 안썼을 경우 검색버튼을 없애고싶다면!/ 만약 쓰면 다시 생기고!
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        print("HomeVC - searchBar textDidChange() searchText : \(searchText)")
        
        if (searchText.isEmpty) {
            self.searchButton.isHidden = true
            
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
                searchBar.resignFirstResponder()
            }
            
            
        } else {
            self.searchButton.isHidden = false
        }
        
    }
    // 숫자에 따라서 12자보다 많으면 아예 타자를 치지못하게 지정하기
    func searchBar(_ searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {

        // 만약 text가 없으면 0이된다.
        let inputTextCount = searchBar.text?.appending(text).count ?? 0

        print("shouldChangeTextIn : \(inputTextCount)")
        
        // 글자가 몇 이상을 넘어갔을 때 문구뜨게 하기(이건 토스트를 사용한다)
        if (inputTextCount >= 12){
            self.view.makeToast("검색한 글자의 수가 너무 길어요", duration: 3.0, position: .center)
        }
        
//        // 12자보다 작으면 더 이상 타자를 칠 수 없다.
//        if (inputTextCount <= 12){
//            return true
//        } else{
//            return false
//        }
        
        // 위 주석과 아예 같은 뜻이다.
        return inputTextCount <= 12
    

    }

키보드 설정하기

view의 segmented control과 searchbar 외의 다른 곳을 누르면 keyboard가 닫히게 설정하기


--> UIGestureRecognizerDelegate을 추가


--> 변수 생성하기

--> delegate 등록하고, gesture를 추가하기(여기서 view는 최상단의 view를 의미한다)

    //MARK: - UIGestureRecognizerDelegate
    
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        print("HomeVC - gestureRecognizer shoudlReceive() called")
        
        // 터치로 들어온 뷰가 요놈이면-> 즉 segue나 검색바를 누르면 keyboard가 없어지지는 않지만, 나머지 부분을 누르면 없어지게 설정하기
        if(touch.view?.isDescendant(of: searchFilterSegment) == true){
            print("세그먼트가 터치되었다.")
         return false
        } else if (touch.view?.isDescendant(of: searchBar) == true){
            print("서치바가 터치되었다.")
            return false
        } else {
            view.endEditing(true)
            return true
        }
    }

--> 위와 같이 gestureRecognizer 코드를 구성하기

화면 넘어가기

상수 설정해주기(새로운 파일 하나 만들기)

enum SEGUE_ID {
    static let USER_LIST_VC = "goToUserListVC"
    static let PHOTO_COLLECTION_VC = "goToPhotoCollectionVC"
}

prepare함수를 통해서 화면 넘어가게 하기

// 화면이 넘어가기 전에 준비한다.
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        print("HomeVC - prepare() called/ segue.identifier : \(segue.identifier)")
        
        switch segue.identifier {
            
        case SEGUE_ID.USER_LIST_VC:
            
            // 다음 화면의 뷰컨트롤러를 가져온다.
            let nextVC = segue.destination as! UserListVC
            
            // searchBar에 입력한 내용을 가져오기
            guard let userInputValue = self.searchBar.text else{return}
            
            nextVC.vcTitle = userInputValue + "🌲"
        
        case SEGUE_ID.PHOTO_COLLECTION_VC:
            
            // 다음 화면의 뷰컨트롤러를 가져온다.
            let nextVC = segue.destination as! PhotoCollectionVC
            
            // searchBar에 입력한 내용을 가져오기
            guard let userInputValue = self.searchBar.text else{return}
            
            nextVC.vcTitle = userInputValue + "🌻"
        
        default:
            print("default")

        }}

키보드가 검색버튼을 안가리게 설정해보기

노티피케이션 설정하기

// keyboard가 검색을 안가리게 설정하기--> 따라서 먼저 올라가고 내려가는 신호를 받기위해서 노티피케이션 센터를 설정하자!
    // 기본적으로 keyboard가 올라가는 거고 내려가는 거는 ios에서 신호를 보내준다. 따라서 그냥 그 신호를 받을 수있는 노티피케이션 센터만 설정하고 해제해주면 된다
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        print("HomeVC - viewWillAppear() called")
        
        // 키보드 올라가는 이벤트를 받는 처리
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShowHandle(notification:)), name: UIResponder.keyboardDidShowNotification, object: nil)
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHideHandle(notification:)), name: UIResponder.keyboardWillHideNotification, object: nil)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        print("HomeVC - viewWillDisappear() called")
        
        // 키보드 노티 해제하기
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
    }

노피티케이션을 통해서 신호를 받을 때 실행될 함수 생성하기

    @objc func keyboardWillShowHandle(notification: NSNotification){
        print("HomeVC - keyboardWillShowHandle() called")
//        // 키보드 사이즈 가져오기
        // 아래 코드는 frame.origin.y 의 값을 오해해서 만든 값이다
//
//        if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue{
//
//            print("keyboardSize.height: \(keyboardSize.height)")
//            print("searchButton.frame.origin.y : \(searchButton.frame.origin.y)")
//
//            if(keyboardSize.height < searchButton.frame.origin.y){
//                print("키보드가 버튼을 덮었다.")
//                let distance = keyboardSize.height - searchButton.frame.origin.y
//                print("이만큼 덮었다. distance : \(distance)")
//                self.view.frame.origin.y = distance + searchButton.frame.height
//            }
//
//        }
//         최상단의 y좌표를 -100으로 한다
//         즉 origin은 자신의 superview를 기준으로 왼쪽 상단에서 얼마나 떨어져있는지를 알려준다.
        self.view.frame.origin.y = -100
    }
    
    @objc func keyboardWillHideHandle(notification: NSNotification){
        print("HomeVC - keyboardWillHideHandle() called")
        // self.view -> 최상단이다.
        self.view.frame.origin.y = 0
    }

0개의 댓글