2. 헤더 메뉴 추가하기

이전글: 2024.08.04 - [🔨 개발/💡 PROJECT.흑백논리] - 1. 스플래시(splash) 화면과 게임중 화면 트랜지션

스플래시 화면 이후 제대로 된 첫 화면 개발에 돌입. 먼저, 여러 화면에 두루 사용될 헤더 메뉴를 디자인하는 것으로 시작해본다.

 

스토리보드에서 헤더 메뉴 추가하기

스토리보드에 헤더 메뉴 추가

뒤로가기와 마이페이지로 가는 버튼을 포함한 조촐한 헤더 메뉴를 구성해보자. 스토리보드의 우측 상단에 + 버튼에서 UIView를 추가한다. UIView는 html에서 div와 같은 역할을 하는 것으로 추측된다...(아직 나도 잘 모르고 그냥 쓴다ㅋㅋㅋ) 좀 더 자세한 개념은 찾아보고 swift 카테고리에 정리해봐야겠다.

 

Constraints 추가로 위치 고정하기

UIView를 드래그앤드롭으로 스토리보드에 위치시킨 후 constraint를 추가하여 위치를 잡아준다. 위치 제약조건으로는 Top, Left, Right를 safearea 에 0px로 딱 붙여준다. 그리고 header 영역의 height는 60pt로 설정해준다.(처음엔 44pt로 설정했다가 너무 작아서 60으로 늘려주었다.)

 

viewcontroller 코드와 연결(IBOutlet, IBAction)

스토리보드에서 만든 UI 요소들을 코드에서 사용하려면, ViewController와의 연결이 필요하다. IBOutlet을 사용하여 headerView라는 이름으로 코드에서 액션을 지정할 수 있도록 @IBOutlet weak var headerView: UIView! 라는 코드를 한 줄 추가한다.

import UIKit

class GamingViewController: UIViewController {
    @IBOutlet weak var headerView: UIView! // header menu IBOutlet
    
    override func viewDidLoad() {
        super.viewDidLoad()

        headerView.backgroundColor = UIColor(white: 0.8, alpha: 1.0)   
    }

}

이렇게 하면 headerView.backgroundColor = UIColor(white: 0.8, alpha: 1.0)으로 헤더 메뉴의 배경색을 지정할 수 있다. 이 회색 배경색은 일단 개발 단계에서만 이렇게 두고, 디자인이 들어갈 때 수정하도록 해보자.