iOS 앱개발 7주차

Xcode에서 project = > iOS = >App을 눌러 앱개발을 시작할 수 있다.

iOS 앱의 기본 세팅 

여기서 중요한 것은 Bundle Identifier이다 이는 앱스토어에서 유일해야하는 아이디이기 때문에 겹치지 않도록 주의해야 한다

Next 버튼을 눌러 계속 생성하게 되면 위와같은 General 세팅 환경이 나오게 된다.

오리엔테이션 부분은 앱이 어떤 방향으로 돌아갈지를 정하는 옵션이다 기본 세로부터 왼쪽 가로화면, 우측 가로화면 뒤집은 화면 등등

다양한 환경에서 반응을 하겠다는 옵션을 체크할 수 있다.

 

좌측 이 부분은 가장 많이 쓰이는 부분중 하나인 Navigation 영역이다.

이 부분은 inspectors 영역이며 이 부분도 많이 쓰인다.

간단하게 앱 만들기

 

command + shift + l 을 눌러서 ui를 배치할 수 있다

시뮬레이터에서 위 부분을 눌러 소프트웨어 키보드를 활성화 시킬 수 있다

이제 ui 작업이 끝났으니 코드 부분을 보면

이런 코드를 볼 수 있다

import UIKit // iOS 개발에 필요한 UIKit 프레임워크를 임포트 (UI 관련 클래스 제공)

class ViewController: UIViewController { // UIViewController를 상속받은 ViewController 클래스 선언

    override func viewDidLoad() { // 뷰가 메모리에 로드된 후에 호출되는 메서드 (라이프사이클 메서드)
        super.viewDidLoad() // 부모 클래스의 viewDidLoad 메서드 호출 (기본 설정 유지)
        // Do any additional setup after loading the view. // 뷰가 로드된 후 추가 설정을 할 수 있는 공간
    }

}

ui를 잡고 ctrl을 누른 뒤 클래스 안쪽으로 드래그하면 자동으로 멤버변수를 만들 수 있다

action을 지정하는 방법도 outlet과 마찬가지로 ctrl 키를 통해서 만들 수 있다

 

조심해야할 것은 ui에 여러 코드가 연결되어있으면

이런식의 에러 메세지가 뜨게된다

view Controller 에서 우측에 있는 연결 관리 도구에서 노란색으로 중복 연결된 부분을 제거하면 정상적으로 작동한다

 

import UIKit // iOS 앱 개발에 필요한 UIKit 프레임워크를 임포트

class ViewController: UIViewController { // UIViewController를 상속받아 ViewController 클래스 선언
    
    @IBOutlet weak var asd: UILabel! // 스토리보드의 UILabel과 연결된 IBOutlet (잘못된 변수명일 가능성이 있음)
    
    @IBAction func sendBtn(_ sender: UIButton) { // 버튼이 눌렸을 때 실행되는 IBAction (이벤트 함수)
        label.text = "Hello" + textFiled.text! // 텍스트 필드에 입력된 값을 "Hello" 문자열과 결합하여 레이블에 출력 (textFiled 변수명에 오타가 있음, textField로 수정 필요)
    }

    @IBOutlet weak var label: UILabel! // 스토리보드의 UILabel과 연결된 IBOutlet (출력할 레이블)
    @IBOutlet weak var textFiled: UITextField! // 스토리보드의 UITextField와 연결된 IBOutlet (입력할 텍스트 필드, 변수명 오타 있음: textFiled -> textField로 수정 필요)
    
    override func viewDidLoad() { // 뷰가 메모리에 로드된 후 호출되는 메서드
        super.viewDidLoad() // 부모 클래스의 viewDidLoad 메서드 호출
        // Do any additional setup after loading the view. // 뷰가 로드된 후 추가 설정이 필요하면 여기서 처리
    }
}

! (강제 언래핑)는 옵셔널 타입(Optional)의 값을 강제로 꺼낼 때 사용하는 Swift 문법입니다. 옵셔널은 변수나 상수가 값이 있을 수도 있고 없을 수도 있는 경우를 나타냅니다. textFiled.text는 옵셔널 값이기 때문에, 이를 강제로 언래핑하여 nil이 아니라고 가정하고 값에 접근하는 것이 !의 역할입니다.

 

!를 쓰는 이유? Hello 는 string 형이고 field.text는 optional string 이기 때문에 언래핑을 해야한다 이번에는 가장 간단한 방법인 ! 강제 언래핑을 사용했다

런치스크린에서 앱이 로딩될동안 보일 화면을 디자인 할 수 있다

또한 Assets폴더 안에 앱 아이콘에 사용될 사진을 넣을 수 있는데 1024 * 1024의 사이즈만 넣을 수 있다

iOS 앱에서 버튼을 눌렀을 때 텍스트 필드에 입력한 내용을 레이블에 출력하는 기능을 구현하려면 아래 절차에 따라 진행할 수 있습니다. 각 단계와 함께 관련 코드를 제공하겠습니다.

구현 절차

1. 프로젝트 생성
   • Xcode에서 새로운 iOS 앱 프로젝트를 생성합니다.
   • Single View App 템플릿을 선택합니다.
2. 스토리보드에서 UI 구성
   • 스토리보드(Interface Builder)에서 다음 UI 요소를 추가합니다:
     • UILabel (레이블): 텍스트 출력용
     • UITextField (텍스트 필드): 텍스트 입력용
     • UIButton (버튼): 입력된 텍스트를 출력하는 기능을 수행할 버튼
3. IBOutlet 및 IBAction 연결
   • IBOutlet: 스토리보드에서 추가한 UILabel과 UITextField를 코드에 연결하여 참조할 수 있게 합니다.
   • IBAction: UIButton을 눌렀을 때 발생하는 액션을 코드에 연결합니다.

구체적인 코드 작성

1. 스토리보드에서 IBOutlet 및 IBAction 연결하기

1. UILabel, UITextField, UIButton을 스토리보드에 추가합니다.
2. UILabel과 UITextField를 코드에 IBOutlet으로 연결하고, UIButton의 터치 이벤트를 IBAction으로 연결합니다.
   • Control 키를 누른 상태에서 스토리보드에서 해당 UI 요소를 코드로 드래그합니다.

2. ViewController.swift에 코드 작성

import UIKit

class ViewController: UIViewController {

    // UILabel과 연결된 IBOutlet (결과를 출력할 레이블)
    @IBOutlet weak var resultLabel: UILabel!

    // UITextField와 연결된 IBOutlet (사용자가 입력할 텍스트 필드)
    @IBOutlet weak var inputTextField: UITextField!

    // UIButton과 연결된 IBAction (버튼을 눌렀을 때 실행)
    @IBAction func sendButtonPressed(_ sender: UIButton) {
        // 텍스트 필드에 입력된 값을 레이블에 출력
        resultLabel.text = inputTextField.text
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // 초기 설정, 뷰가 로드될 때 실행됨
    }
}

 

3. 코드 설명

1. IBOutlet 연결:
   • resultLabel: 텍스트 필드에서 입력된 결과가 출력될 레이블
   • inputTextField: 사용자가 텍스트를 입력하는 텍스트 필드
2. swift
    
   @IBOutlet weak var resultLabel: UILabel! @IBOutlet weak var inputTextField: UITextField!
3. IBAction 연결:
   • 버튼이 눌렸을 때 실행되는 함수입니다. inputTextField.text에서 입력된 텍스트를 가져와 resultLabel에 할당하여 레이블에 출력합니다.
4. swift
   코드 복사
   @IBAction func sendButtonPressed(_ sender: UIButton) { resultLabel.text = inputTextField.text }

4. 추가 설명

• Nil 병합 연산자 사용 가능성: 텍스트 필드에 아무런 값도 입력하지 않았을 경우, 앱이 안전하게 동작하도록 nil 처리를 추가할 수 있습니다. 예를 들어, 텍스트 필드가 비었을 때 빈 문자열을 출력하게 할 수 있습니다.
• swift
  코드 복사
  resultLabel.text = inputTextField.text ?? ""

5. UI 요소 배치

• 스토리보드에서 UILabel, UITextField, UIButton을 적절히 배치한 후, 각 요소와 코드의 IBOutlet 및 IBAction을 연결하세요.
  • UILabel: 텍스트가 표시될 위치
  • UITextField: 사용자 입력을 받을 필드
  • UIButton: 버튼을 눌러 액션을 트리거

---

총 위와같은 절차를 겨처서 만들 수 있다!

 

결과물:

HelloGDY.zip

0.06MB

출저: 스마일한의 스위프트 기초