개요
iOS 앱에서 툴바(Toolbar)에 뒤로 가기용 왼쪽 화살표 버튼을 만들려면 iOS의 두 가지 기본 컴포넌트와 뒤로 가기 화살표 이미지가 필요합니다. 본격적으로 시작하기 전에 각 컴포넌트가 무엇인지 먼저 살펴보겠습니다.
- 툴바(Toolbar) – iOS의 네이티브 컴포넌트로, 주로 화면 하단에 여러 항목(버튼 등)을 배치하여 표시하는 데 사용됩니다.
- 바 버튼 아이템(Bar Button Item) – 툴바나 내비게이션 바(Navigation Bar) 위에 생성되는 버튼 요소입니다.
스토리보드(Storyboard)를 이용해 툴바를 생성하면 기본적으로 바 버튼 아이템 하나가 함께 포함되어 있습니다.
프로젝트 설정하기
먼저 새 프로젝트를 생성합니다. Main.storyboard에서 현재 존재하는 유일한 뷰 컨트롤러(ViewController)에 배경색을 지정해 줍니다.
오브젝트 라이브러리(Object Library)에서 툴바를 드래그하여 뷰 컨트롤러의 하단에 놓습니다. 이때 툴바와 함께 바 버튼 아이템도 자동으로 생성됩니다.
툴바를 선택한 뒤, 아래쪽·왼쪽·오른쪽 제약 조건(Constraint)을 모두 0으로 설정하고 높이(Height)는 50으로 지정합니다.
화살표 이미지 적용하기
뒤로 가기 화살표 이미지를 다운로드한 후, 툴바 위의 바 버튼 아이템을 선택합니다. 그다음 어트리뷰트 인스펙터(Attribute Inspector)에서 해당 이미지를 지정합니다.
어트리뷰트 인스펙터에서는 이미지 외에도 타이틀(Title), 틴트 컬러(Tint Color) 등 다양한 속성을 자유롭게 설정할 수 있습니다.
실행 결과 확인하기
이제 프로젝트를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
툴바는 포함된 항목의 개수에 따라 각 아이템의 위치와 간격을 자동으로 균등하게 배치해 줍니다. 따라서 버튼을 여러 개 추가하더라도 별도의 정렬 작업 없이 깔끔한 레이아웃을 유지할 수 있다는 점이 큰 장점입니다.