위젯을 추가하기 전, 일단 앱 자체를 만들고 난 뒤에 노래 객체를 가져와 위젯에서 띄워주는 것이 작업 수순에 알맞을 듯 하여 메인 앱부터 만들기로 결정했다.
메인 화면 구성
NavigationController
네비게이션 컨트롤러를 이용하여 시작 화면을 세팅하였다.
타이틀 타입은 Large Title로 선택해주었다.
TableView
노래 목록을 나열하기 위해서는 TableView가 적합하다고 여겨졌다.
Cell의 내용으로는 앨범 사진, 노래 제목, 노래 길이(분:초)를 넣을 예정이다.
StackView
현재 재생중인 노래의 정보를 나타내기 위해 Horizontal Stack view를 사용하였다.
Distribution은 Fill로 하였다.
Fill은 hugging, compression의 우선도에 따라 빈 부분이 있다면 객체를 늘려 채워준다.
hugging의 우선도가 낮으면 낮을수록 먼저 잡아늘여지고,
반대로 compression의 우선도가 낮으면 낮을수록 공간이 부족하다면 객체의 크기가 줄어든다.
중요한 것은, 첫번째 객체의 Leading은 0으로 해주어야하며, 마지막 객체의 Trailing도 0으로 해주어야 한다. 그 뒤, 사이사이의 객체를마다 spacing을 설정해주면 된다.
TabBar
후에 위젯 설정을 위한 More 탭과 노래를 보기 위한 Music 탭을 구분해주었다.
SearchBar
스크롤을 하더라도 검색바가 계속 보이도록 해주고 싶어 찾아보았다.
UISearchController 을 사용하면 된다.
해당 뷰의 ViewController의 viewDidLoad() 아래 적어주면 된다.
let searchController = UISearchController(searchResultsController: nil)
self.navigationItem.searchController = searchController
self.navigationItem.hidesSearchBarWhenScrolling = falsesearchResultsController은 검색 시 보이는 뷰를 넣어주면 된다.
현재 상태에서는 아직 노래조차 없기때문에, 해당 뷰는 나중에 추가해 줄 예정이다.
여기에서, 스크롤을 하더라도 검색 바가 계속 보이도록 해주고 싶었기 때문에
hidesSearchBarWhenScrolling을 false로 설정해주어야 한다.
기본값은 true이다.
이후 추가 방법은 해당 블로그를 참고하여 할 예정이다.
해야함
- 하단 재생 탭
- 스택 뷰
메인 앱에서 개발해야 할 부분
- 검색 뷰 구현
- More 뷰 구현, Tab Bar 연결
- 메인화면 버튼 동작 구현
- 노래 데이터 연동 구현
- 노래 디테일 뷰 구현
