ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Hello World Alert App
    Programming Language/Swift 2020. 6. 23. 01:23
    반응형

    Hello World Alert App

    1. 프로젝트 생성

    1.1. Xcode app 실행

    • Xcode.app 을 처음 실행 하면 나오는 모습
    • 세 가지 버튼 중, Create a new Xcode project 버튼 클릭

     

     

    1.2. 템플릿 선택

    • 간단한 어플을 만들기 위해서, Single View App 선택 

     

     

    1.3. 어플 이름 설정

    • Product Name: 어플리케이션의 이름
    • Organization Identifier: 고유 주소..?
    • User Interface: Swift UI or Storyboard 선택

     

     

     

    1.4. 프로젝트 생성된 화면

    • 이 창에서 버전, 빌드 번호 등을 수정 할 수 있다.
    • Main Interface 에 선택된 것이 메인이 되는 storyboard
    • Launch Screen File 은 앱을 실행 시 처음에 나오는 화면

     

     

    2. storyboard 에 버튼 추가

    2.1. Main.storyboard 선택

    • 해당 어플리케이션의 화면들을 설정하는 공간

     

     

    2.2. 컴포넌트 라이브러리 오픈

    • 단축키: ⇧ + ⌘ + L (shift + command + L)

     

     

     

    2.3. Button 을 드래그 하여 화면에 넣기

    • 라이브러리의 Button 을 마우스로 클릭 -> 드래그를 하여 화면에 추가한다.

     

     

    2.4. 텍스트, 크기 등 조건 수정

     

     

    2.5. Constraints(제약 조건) 추가

    • x, y 좌표의 중심값 입력
    • Horizontally in Container / Vertically in Container 체크로 화면의 가장 중심에 버튼을 위치 시킬 수 있다.

     

     

    2.6. 버튼 추가 완료

     

     

    3. Assistant 켜기

    • 오른쪽 상단의 빨간색 상자안의 아이콘을 클릭하여 Assistant 를 켠다.
    • 아래 사진 처럼 ViewController 와 Swift 파일을 함께 볼 수 있게 된다.

     

     

     

    4. 버튼과 코드 연결하기

    • 버튼을 ⌃ + Drag (control + 드래그) 를 통해 코드로 가져가면, 파란선이 연결되는 것을 볼 수 있다.
    • 자동으로 해당 버튼에 대한 함수를 생성하는 방법

     

     

    4.1. 버튼과 연결된 함수 자동 생성

    • Connection: 버튼이므로 Action 선택
    • Name: 함수의 이름
    • Type: 컴포넌트 타입
    • Touch Up Inside : 클릭이 떨어질 때 동작

     

     

    4.2. 코드 입력

        @IBAction func showMessage(_ sender: UIButton) {
            let alertController = UIAlertController(title: "First APP", message: "Hello, World!", preferredStyle: UIAlertController.Style.alert)
            alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
            present(alertController, animated: true, completion: nil)
        }

    5. 빌드 및 실행

    5.1. 빌드 버튼 클릭 및 확인

    • 왼쪽 상단의 빌드 버튼 클릭 or ⌘ + R (command + R)

     

     

    • 빌드가 성공되면 화면 중간에 해당 팝업이 뜬 후 시뮬레이터가 실행 된다.

     

     

    5.2. simulator 로 생성한 어플 동작 확인

     

     

    반응형

    'Programming Language > Swift' 카테고리의 다른 글

    [SwiftUI] NavigationView 와 NavigationLink 사용법  (0) 2021.04.27
    Swift 기본 문법 정리 #2  (0) 2020.07.21
    Swift 기본 문법 정리  (0) 2020.06.22

    댓글

Designed by Tistory.