Music Wave 레이 아웃

기본 적인 레이 아웃을 확인 합니다.

MusicWave 기본화면

전체 적으로 확인해 보면, 조금 복잡해 보입니니다. 처음 앱을 개발하는 과정을 간략히 설명하면서 레이 아웃에 대해서 설명해 보도록 합니다. 

• MusicWave는 아이팟 라이브러리로 부터 로컬 파일의 플레이 리스트를 읽어 와서, 그 파일을 로드 합니다. 
• 로드한 파일은 웨이브 폼으로 그려지고, 그려진 웨이브 폼에 필요한 부분을 확인하여 북 마크를 합니다. 
• 북 마크가 된 부분들을 연동하여 필요한 작업을 할 수 있습니다.

쉽게 얘기 하면 필요한 부분에 대한 리피팅 기능을 할 수 있는 반복 작업용 리피터라고 할 수 있습니다. 

 

좀 더 구체적으로 하나 하나씩 설명해 보도록 하지요.

전체 UI는 크게 5개의 row를 가집니다. 

네비게이션 바

음악과 북 마크는 각각 음악 리스트 와 북 마크 리스트 창으로 라우팅 되는 버튼입니다. 가운데 부분의 노란 색은 위쪽은 노래의 제목, 아래 쪽은 노래 가수를 알려 주는 디스플레이 영역 입니다.

웨이브 폼 뷰 화면

노란색 사각형 부분이 음악의 웨이브 폼 부분입니다. 파란색 부분은 가운데 리피팅 스위치와 현재 웨이브 폼의 위치를 알려주는 스테이터스 바 입니다. 

북 마크 셀렉터와 북 마크 버튼

노란색 부분이 Horizontal Selector 왼쪽과 오른쪽 입니다. 가운데 버튼이 북 마크 버튼입니다. 원하는 위치로 이동해서 북 마크 버튼을 누르면 북 마크가 생기게 되고, 그 북 마크를 왼쪽과 오른쪽 셀렉터로 선택하여 영역을 만듭니다.

볼륨 컨트롤과 플레이 기능 버튼들

위쪽은 볼륨 컨트롤이고, 아래쪽 컨트롤들은 기본적인 포워드 백워드 스킵 버튼과 플레이 버튼 그리고 반복 재생 버튼입니다.

이런 방식으로 기본 레이 아웃이 이루어진 앱이 바로 MusicWave입니다. 앱 개발의 기본 중의 기본은 위와 같은 디자인에 맞추어 기능들을 정의 하는 것입니다. 기본 적인 기능들에 대해서 설명을 마쳤으니, 다음 작업은 프로토 타입을 만들어 볼 차례입니다.