레이아웃에 대한 개념은 나름 자신이 있어서 포스팅이 그리 길지 않을 것 같다. 몰랐던 내용들 위주로만 정리하려 한다.
레이아웃 파일
레이아웃 파일은 소스 코드가 아닌 리소스로 분류되기 때문에 파일명은 모두 소문자로 작성되고 파일명 끝에 파일의 타입인 XML을 붙인다.
리소스
우리가 만드는 앱은 이미지, mp3, DB와 같은 많은 종류의 파일로 구성되는데, 코틀린으로 작성되는 소스 코드 파일을 제외한 모든 파일을 리소스라고 한다. 이 리소스 파일의 이름은 모두 소문자로 작성해야 한다.
(drawable 폴더 내 이미지 파일명들을 소문자로 해주어야 하는 이유가 이거다.)
컨스트레인트 레이아웃
컨스트레인트 레이아웃 하위로 들어간 뷰의 상하좌우에는 각각 동그라미가 하나씩 붙는데, 이걸 핸들러라고 한다.
이 핸들러를 끌어다 다른 위젯의 핸들러나 레이아웃 가장자리로 이어주면 주름무늬선이 생기는데, 이렇게 생긴 주름무늬선을 컨스트레인트 라고 하고, 컨스트레인트가 연결된 부위를 앵커 포인트 라고 한다.
연결되면 앵커 포인트(위젯 또는 레이아웃)와의 마진(거리값) 이 자동으로 설정된다.
크기 조절 핸들러
- 랩 컨텐트(Wrap Content) : 위젯의 크기를 내용물의 크기에 맞춰준다. 텍스트뷰의 경우 입력된 문자의 크기에 맞춰서 크기가 조절된다.
- 픽스드(Fixed) : layout_width, layout_height 속성에 입력된 크기로 고정된다. 예를 들어 layout_width 속성값에 '250dp'를 입력하면 250dp만큼 영역을 차지한다.
- 매치 컨스트레인트(Match Constraint) : 컨스트레인트의 시작과 끝(앵커 포인트)에 맞춰서 크기가 조절된다.
바이어스
상하 또는 좌우 양쪽이 같이 연결되었을 때는 바이어스 라는 위치 조절 버튼이 활성화된다.
처음에 50으로 설정되어 있는 값은 비율을 의미하며, 위젯을 양쪽 컨스트레인트의 중앙에 위치시킨다.
바이어스에서 버튼을 좌우로 드래그하면 0~100 사이의 값으로 변경할 수 있다.
가로세로비 설정
크기를 매치 컨스트레인트로 설정하면 가로세로비 기능이 활성화되면서 사각형의 좌측 위 모서리에 작은 삼각형 모양이 나타난다.
이 모양을 클릭하면 가로:세로 비율을 설정할 수 있는 ratio 필드가 나타나고, '1:1'을 입력하면 해당 위젯의 가로세로 비율이 변경된다. 위젯이란 여러 뷰들을 통틀어 이르는 명칭이다.
체인으로 연결하기
컨스트레인트 레이아웃을 처음 접하면 가장 다루기 어려운 것이 체이닝이다.
체이닝은 컨스트레인트로 연결된 위젯끼리 서로의 위칫값을 공유해서 상대적인 값으로 크기와 위치를 결정해주는데 각 화면 전체를 기준으로 했을 때는 물론, 화면을 가로세로로 전환했을 때도 위젯의 상대 비율을 유지해준다.
매우 유용한 기능이다.
예제는 따라해보고 내 깃허브 ThisisAndroid 레포지토리에 푸시해두었다.
가이드라인
가이드라인은 컨스트레인트 레이아웃에서만 사용할 수 있는 보조 도구다.
(가이드라인 위젯을 그렇게 사용해보려고 했는데 컨스트레인트 레이아웃에서만 사용할 수 있었는지 처음 알았다.. 어쩐지 안되더라;)
가로세로 두 가지 가이드라인이 있는데, 가이드라인을 드래그해서 화면 임의의 위치에 가져다 놓으면 레이아웃 안에 배치되는 위젯에 가상의 앵커 포인트를 제공한다.
