앨런 Swift 앱 만들기 UIKit | 오토레이아웃과 스토리보드와 코드 연결하기

안녕하세요

오늘은 오토레이아웃 다루기와

스토리보드와 코드를 연결하는 방법에 대해서 듣고 정리하였습니다 :0

 

 

 

command + shift + L

을 눌러서 라이브러리로 가서 원하는 오브젝트를 클릭해줍니다

저는 라벨과 버튼이 필요해서 화면에 넣어준 후

오토 레이아웃으로 정리해줬습니다

 

 

 

이렇게 각 오브젝트를 누르고 오른쪽 버튼을 누르면 잘 연동되었는지 알 수 있습니다

다른 방식으로 인스펙터 창에서 확인할 수 있습니다

 

 

그리고는 잘못 연동하거나 필요없다고 느껴지면 해제할 수도 있습니다

 

 

Referencing Oulets에서 View Controller 구역에

커서를 올리게되면 x버튼이 자동적으로 나오게 됩니다

클릭을 하게되면 사라지게됩니다

 

 

오토레이아웃은

한 번 위치를 잡게되면 인스펙터 창에서 변경을 해야합니다

 

 

 Add New Constraints는 객체에서 처음으로 위치를 잡을 때 사용하지만

위에서 말했던것 처럼 위치를 이미 잡았다면 

 

 

우측에 보이는 인스펙터 창에서 수정을 해야합니다

그렇지 않으면 하나가 더 중복으로 추가되어

에러 표시가 나게됩니다

 

그리고 기준에 미치지 못하도록 정렬 제한 항복이 너무 적어도 오류가 발생하게 됩니다

 

제약을 주고 싶다면 Add New Constrains에서 적용하면 되겠지만

가운데 정렬을 하고 싶다면 

 

 

말 그대로

Horizontally in Container

핸드폰 가로(수평) 중앙

 

Vertically in Container

핸드폰 세로(수직) 중앙

 

을 정렬하고 싶을 때 사용하고 있습니다

 

 

 

스토리보드와 코드를 연동하고 싶다면 객체를 누른 상태에서 컨트롤을 누르고 코드로 드래그 하시면

연동하는 인터페이스가 나옵니다

변수명을 지어주고 connect하면 완료됩니다

 

버튼과 라벨의 내부 속성과 메서드를 사용할 때 타입이 궁금할 때는 

 

 

option을 누르면 ?아이콘을 볼 수 있습니다

그 상태에서 클릭 하게 되면 타입을 볼 수 있습니다

 

그리고 코드에 대해서 설명하고 각 라벨과 버튼에 대한

속성에 대해서 알아보았던건 코드로 작성해 놓겠습니다

 

import UIKit


class ViewController: UIViewController {
    //interface builder - oulet(배출구)
   
    @IBOutlet weak var titleLabel: UILabel!
    //버튼의 경우는 속성을 변경해야하는 경우 변수를 만들 수가 있음(액션만 만들 수 있는게 아님)
    @IBOutlet weak var myButton: UIButton!
    //앱을 실행시키면 처음 실행시키는 함수
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //스토리보드에 세팅했다고 해도 viewDidLoad에서 세팅을 다시했다면
        //스토리보드에서 세팅한건 무효화됨
        titleLabel.text = "hello"
        titleLabel.backgroundColor = UIColor.yellow
        myButton.isEnabled = false
    }

    
    
    //buttonPressed
    //함수를 누르면 실행이됨
    //interface builder - action(행동)
    
    //⭐️스토리보드상 이벤트(동작)이 일어나느 경우 어떤 함수를 호출하여 실행시킬건지 알려주는 키워드
    //함수? func
    @IBAction func ButtonTapped(_ sender: UIButton) {
        
        //라벨
        titleLabel.text = "반갑습니다"
        
        //titleLabel.backgroundColor = .yellow
        //위 코드와 동일함 ⭐️ #colorLiteral() ⭐️을 하게되면 아래처럼 이미지를 넣을 수 있게 변경됨
        titleLabel.backgroundColor = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1)
        
        titleLabel.textAlignment = .center                       //정렬 - 가운데 정렬
        titleLabel.font = UIFont.boldSystemFont(ofSize: 30)
        titleLabel.numberOfLines = 0                             //0으로 세팅시 여러줄 작성이 가능함
        titleLabel.isHidden = true                               //숨기는 기능

        //버튼
        myButton.backgroundColor = .yellow
        myButton.setTitleColor(.black, for: UIControl.State.normal)
        myButton.isHidden = false
        
    }
}

 

여기서 코드를 몇 개 주석하고 시뮬레이터를 돌려봤습니다

 

 

 

단순하지만 나오는걸 보니 뿌듯하군요 

 

 

짜자

 

뜬금없지만 마지막으로 창 나누기에 대해서 말하고자 합니다

control + option + command + enter 키를 누르게 되면

창의 분리가 일어나고

Layout을 클릭하고 Editor on Left를 클릭하면

 

 

 좌 우로 창이 추가되는걸 볼 수 있습니다

 

 

 

 

참고

앨런앱 만들기 강의 (추천)