[iOS] MVC구조와 오토레이아웃 / Xcode구조

MVC구조와 IBAction IBOutlet / 오토레이아웃 / Xcode구조

iOS에서의 모델 뷰 컨트롤러 ( MVC )

 

모델과 뷰는 직접적으로 통신하지  않으며 항상 분리되어있다.

 

모델 레이어

• 데이터를 저장하지만 사용자 인터페이스에 대하여 알지 못함
• 앱에서 모델은 문제와 정답의 목록을 가지는 문자열 리스트로 구성
• 대개 모델 레이어는 현실 세계의 사물을 대상으로 한다.

뷰 레이어

• 사용자에게 보이는 모든 객체를 포함
• 버튼, 텍스트필드, 슬라이더 등이 있다.
• 대부분 이미 만들어져 있는 것을 그대로 사용한다.

컨트롤러 레이어

• 응용 프로그램을 관리한다.
• 사용자에게 보이는 뷰를 구성한다.
• 뷰와 모델을 연결하고 동기화한다.

 

 

 

 

 

오토 레이아웃

하나의 앱은 적어도 1개 이상의 기기에서 실행될 것이며 각각의 기기는 다른 해상도를 가지기 때문에 특정 기기에 맞도록만 설계하면 원하지 않는 결과를 가져온다.

따라서 다양한 기기에 맞도록 하기 위해 오토 레이아웃을 사용한다.

 

위치와 크기 제약조건

• 하나의 뷰는 다른 뷰 (또는 컨테이너)에 상대적 위치와 크기를 가진다.

객체 연결하기

• 객체 연결이란 뷰 레이어에 있는 객체를 컨트롤 레이어에 연결시키는 것이다.
• Qutlet(변수 참조)와 Action(함수 호출) 두 가지 방법이 있다

 

@IBOutlet(아웃렛 변수) 

• StoryBoard (Objective-C 일 경우 헤더 파일) 상에 선언한 View 객체를 Interface Builder(IB)가 알아볼 수 있게 만드는 것
• 스토리보드 상에 선언한 View 객체를 가리키는 변수이다
• 객체를 소스 코드에서 참조하기 위해 사용하는 키워드이며 주로 색상, 크기, 모양, 선의 두께, 텍스트 내용 등 객체의 속성을 제어하는 데 사용한다.

@IBAction(액션 함수) 

• 스토리보드 상에 선언한 View 객체가 특정 이벤트를 발생시켰을 경우 호출되는 함수이다.
• 특정 객체에서 원하는 이벤트가 발생했을 때 정해진 작업을 실행하기 위해 사용한다.

@IBAction은 Event가 일어난 경우 호출되는 Action을 정의해둔 것, @IBOutlet은 값에 접근하기 위한 변수

 

:UI~~ 의 의미

• UI 중에서 어떤 항목을 가리키도록 설정할 것인가를 의미한다.

@ 의 의미

• 컴파일러에게 어떤 속성을 가지고 있다고 전하는 역할을 하는 예약어이다.
• 컴파일러에게 @가 붙은 명령어에 대해 어떤 attribute가 부여되었음을 말한다. 
  @IBAction // Interface Builder와 연결된 Action이다.
  @UIApplicationMain // App의 Main이 여기에 있다.

IB

• Interface Builder의 약자이며, @IB로 시작되는 변수나 함수는 Interface Builder와 관련된 변수나 함수라는 것을 의미한다.

 

 

 

객체 연결하기

Main.stroyboard에 라벨, 버튼 추가

ViewController에 코드 추가

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBOutlet var questionLabel: UILabel!
    @IBOutlet var answerLabel: UILabel!
    
    @IBAction func showNextQuestion(sender: AnyObject){
        
    }
    
    @IBAction func showAnswer(sender: AnyObject){
        
    }

}

 

 

모델 레이어 만들기

- ViewController.swift 

//
//  ViewController.swift
//  Quiz_Animation
//
//  Created by 이정민 on 2022/09/20.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        questionLabel.text = questions[currentQuestionIndex]
    }

    @IBOutlet var questionLabel: UILabel!
    @IBOutlet var answerLabel: UILabel!
    
    let questions:[String] = ["From what is cognac made?" , "What is 7 + 7?", "What is the capital of Vermont?"]
    let answers:[String] = ["Grapes", "14", "Montepeller"]
    var currentQuestionIndex: Int = 0
    
    @IBAction func showNextQuestion(sender: AnyObject){
        currentQuestionIndex = currentQuestionIndex + 1
        if(currentQuestionIndex == questions.count){
            currentQuestionIndex = 0
        }
        let question: String = questions[currentQuestionIndex]
        questionLabel.text = question
        answerLabel.text = "???"
    }
    
    @IBAction func showAnswer(sender: AnyObject){
        let answer:String = answers[currentQuestionIndex]
        answerLabel.text = answer
    }

}

 

 

 

 

 

Xcode구조

이미지출처 구글

 

Inspector Tab

 

 

코드화면

스토리보드

 

• 파일 인스펙터 (File Inspector) : 선택된 파일에 대한 정보를 보여준다.
• 히스토리 인스펙터 (History Inspector) 
• 빠른 도움 (Quick Help) 
  
  
• 아이덴티티 인스펙터 (identity Inspector) :  인터페이스 빌더에 추가된 객체와 이를 구현한 클래스 사이의 연결이나 객체의 ID 등, 각종 객체의 고유 정보를 관리한다.
• 어트리뷰트 인스펙터 (Attribute Inspector) : 선택된 객체의 속성을 관리한다.
• 사이즈 인스펙터 (Size Inspector) : 선택된 객체의 외형에 대한 속성을 관리한다.
• 커넥션 인스펙터 (Connection Inspector) : 인터페이스 빌더와 소스 코드 간의 연결 관계를 관리한다.

---

[Swift 기초 문법] - IBAction과 IBOutlet이 뭘까 (tistory.com)

[Swift 기초 문법] - IBAction과 IBOutlet이 뭘까

[iOS] @IBOutlet, @IBAction (velog.io)

[iOS] @IBOutlet, @IBAction

https://plcprogrammer-dy.tistory.com/25

[공부] Xcode inspector Tab 설명 개요

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sqlpro&logNo=221045495843 

실전편 학습을 위한 Xcode의 구조와 활용 - 1. Xcode의 각 영역과 명칭