관리 메뉴

java,javascript,android,php,sql,공부용,메모용

ViewController , 코드와 세그웨이 화면전환code, Segue로 화면전환 해보기 / Xcode SwiftUI 앱맨들기 본문

모바일/SwiftUI ios 공부

ViewController , 코드와 세그웨이 화면전환code, Segue로 화면전환 해보기 / Xcode SwiftUI 앱맨들기

yy_dd2 2021. 12. 1. 18:24
반응형

화면 전환하기
1. 프로젝트 생성
2. Main.Storyboard 에서 우측상단 + 눌러서 Navigation Controller 추가
3. 두개가 생성되는데 root navigation은 삭제


4. 우클릭 드래그Navigation Controller Scene → View Controller Scene 으로


Relationshop Segue에서
root view controller 선택

5. Navigation controller의 속성에서 View Controller 쪽에

Is Initial View Controller 선택

체크하면 없던 화살표가 생김 (스토리보드에 시작점을 알려주는 것)
 


6. View Controller에 버튼 4개 추가
Sugue로 Push, Sugue로 Present, 코드로 Push, 코드로 Present

Sugue로 Push
1). view controller 새로 추가 (Sugue로 Push)


2). 새로만든 ViewContro를 연결할 컨트롤러 생성

3). 다시 Main.storyboard에서 새로만든 파일과 스토리보드에있는 화면을 연결


 
4). view controller에서 sugue로 push 버튼 우클릭드래그해서 SuguePushView Controller로 연결 (action show 선택) 나오는 화살표를 sugueway화살표라고함 단방향

5). 실행해보면 버튼 눌렀을때 화면으로 이동됨
6). SuguePush 화면에서 BackButton 버튼을 누르면 뒤로가게 하기 (상단 Back 눌러도 이동함)
연결된 class의 코드를 보는 창을 보이게하기

7). SuguePushViewController

import UIKit

class SuguePushViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func tapBackButton(_ sender: UIButton) {
        // 이전 화면으로 이동
        self.navigationController?.popViewController(animated: true)
        // 첫번째 화면 root view화면으로 이동
        // self.navigationController?.popToRootViewController(animated: true)
        
    }
}



Sugue로 Present

1) Main.Storyboard 에서 + 눌러서 화면View 추가 라벨,Back버튼
2) 프로젝트 파일에서 class 파일 추가 SuguePresent ViewController
3) Main.Storyboard 에서 Custom Class속성에 파일 연결 
4) 우클릭 드래그 연결은 Acrion Sugue에 Present Modally
→ sugue로 present 버튼을 눌러서 호출하면 새로 덮어지듯이 호출된다

import UIKit

class SuguePresentViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func tapBackButton(_ sender: UIButton) {
        // 이전화면
        self.presentingViewController?.dismiss(animated: true, completion: nil)
    }
}


Presentation은 풀스크린이 아닌데 아래처럼 속성을 변경해주면 풀스크린이 된다


  
코드로 Push
1) Main.Storyboard 에서 + 눌러서 화면View 추가 라벨,Back버튼
2) 프로젝트 파일에서 class 파일 추가 CodePushViewController
3) Main.Storyboard 에서 Custom Class속성에 파일 연결 
4) ViewController 코드를 연다. (단축키 활용 ⌃ ⌥ ⌘ ↩︎ ) control + option + command + enter
5) 코드로 Push 우클릭 드래그 tabCodePushButton

@IBAction func tabCodePushButton(_ sender: UIButton) {
        //스토리보드에 있는 뷰컨트롤러(새로만든 코드로 Push 화면)를 인스턴스화 하기
        // 여기서 매개변수 identifier를 스토리보드에서 설정한 id를 작성한다
        // 옵셔널 반환이기 때문에 guard 문으로 처리한다
        guard
            let viewController = self.storyboard?.instantiateViewController(identifier: "CodePushViewController")
        else { return }
        // 화면전환 코드 여기서 viewController는 위에 사용된 상수명
        self.navigationController?.pushViewController(viewController , animated: true)

    }



이전 화면으로 돌아가는 back button은
CodePushViewController 파일에 코딩

CodePushViewController 파일에 코딩
@IBAction func tapBackButton(_ sender: UIButton) {
        self.navigationController?.popViewController(animated: true)
    }


코드로 Present
Present도 같음
코드
- ViewController

@IBAction func tapCodePresentButton(_ sender: UIButton) {
        guard
            let viewController = self.storyboard?.instantiateViewController(identifier: "CodePresentViewController")
        else { return }
        // 모달로 나오는 화면을 풀스크린으로 변경
        viewController.modalPresentationStyle = .fullScreen
        self.present(viewController, animated: true, completion: nil)
    }


- CodePresentViewController

@IBAction func tapBackButton(_ sender: UIButton) {
        self.presentingViewController?.dismiss(animated: true, completion: nil)

    }

 


앱 실행시 오류가 있던부분
-버튼의 글이 길어졌는데 이쁘게 안길어짐


화면에 style에 Plain을 Default로 변경해주니 처리됨
 





 

반응형
Comments