[swift] 스택 뷰를 사용하여 음악 플레이어 만들기

01 Dec 2023

이번에는 스택 뷰를 사용하여 간단한 음악 플레이어를 만들어 보겠습니다. 스택 뷰를 사용하면 간단한 인터페이스를 쉽게 구축할 수 있습니다.

스택 뷰란?

스택 뷰는 여러 뷰들을 수직 또는 수평으로 정렬하여 표시하는데 사용하는 뷰입니다. 스택 뷰는 자동으로 뷰들의 크기를 조정하므로 인터페이스를 동적으로 관리하는데 큰 도움을 줍니다.

먼저 Xcode에서 새로운 프로젝트를 생성합니다. 프로젝트 설정은 주요한 설정이 아니므로 생략하도록 하겠습니다.

Main.storyboard를 열고 스택 뷰를 추가해보겠습니다. Interface Builder에서 오른쪽 패널에 있는 Object Library에서 “Stack View”를 검색하여 찾습니다.

스택 뷰를 Main.storyboard의 원하는 위치에 드래그해서 추가합니다.

스택 뷰에는 여러 개의 뷰를 추가해서 인터페이스를 구성할 수 있습니다. 예를 들어 음악 플레이어에는 이미지 뷰, 제목 레이블, 버튼 등이 들어갈 수 있습니다.

이 예제에서는 이미지 뷰, 제목 레이블, 재생 버튼을 추가해보겠습니다.

Interface Builder에서 Object Library를 사용하여 UIImageView, UILabel, UIButton을 찾고 스택 뷰에 추가합니다.
각 뷰의 값을 설정하여 음악 플레이어에 적합하게 구성합니다. 예를 들어 제목 레이블에는 현재 재생 중인 곡의 제목을 표시할 수 있습니다.
각 뷰의 제약 조건을 설정하여 원하는 위치와 크기로 지정합니다.

스택 뷰를 사용하면 지정된 방향으로 뷰들이 자동으로 정렬됩니다. 이 예제에서는 수평으로 뷰들을 정렬하도록 설정하겠습니다.

스택 뷰를 선택하고 Interface Builder에서 오른쪽 패널을 엽니다.
Axis를 “Horizontal”으로 설정합니다.
Alignment와 Distribution을 적절하게 조정하여 뷰들의 정렬 방식을 설정합니다. 예를 들어 Alignment를 “Center”로 설정하고 Distribution을 “Equal Spacing”으로 설정하면 뷰들이 가운데 정렬되고 동일한 간격으로 자동으로 정렬됩니다.

이제 위에서 설정한 인터페이스를 실제로 실행해보겠습니다. Xcode에서 시뮬레이터를 선택하고 실행시켜보세요. 스택 뷰에 추가한 뷰들이 수평으로 정렬되어 표시될 것입니다.

스택 뷰를 사용하여 음악 플레이어를 구성하는 방법을 알아보았습니다. 스택 뷰는 간단한 인터페이스를 쉽게 구성할 수 있게 해줍니다. 이러한 기능을 활용하여 더 복잡한 인터페이스를 만들어보세요.