[Android] 4(1). 배치를 담당하는 레이아웃
배치를 담당하는 레이아웃
레이아웃은 눈에 보이지 않으면서 그 안에 버튼, 텍스트 뷰 등 여러 요소의 배치를 도와줍니다.
레이아웃 파일
프로젝트를 생성하면 MainActivity.kt 파일과 activity_main.xml이라는 파일이 만들어지는데, 이 activity_main.xml이 바로 레이아웃 파일입니다. 레이아웃 파일은 리소스로 분류됩니다.
✋ 리소스란?
코틀린으로 작성되는 소스 코드를 제외한 이미지, MP3, DB 등의 모든 파일을 리소스라고 합니다. 이 리소스 파일의 이름은 모두 소문자로 작성해야 합니다.
컨스트레인트 레이아웃
컨스트레인트 레이아웃은 안드로이드 기본 레이아웃으로 화면에 배치되는 위젯 사이에 간단한 제약 조건 설정만으로 전체 화면을 쉽게 구성할 수 있습니다.
기본 레이아웃
핸들러
화면에 배치된 위젯을 클릭하면 선택 영역이 텍스트뷰 주위에 표시되고 주변에 4개의 동그라미가 나타나는데, 이것을 핸들러라고 합니다.
핸들러가 연결 상태이면 파란색, 연결되어 있지 않으면 흰색으로 나타납니다. 이 때 연결되는 선을 컨스트레인트라고 하고, 컨스트레인트가 연결될 수 있는 부위를 앵커 포인트라고 합니다.
컨스트레인트 편집기
위젯을 선택하면 컨스트레인트를 조절할 수 있는 편집기가 속성 영역에 나타납니다.
편집기의 검은색 동그라미가 UI 편집기의 파란색 동그라미와 같은 핸들러이며, 편집기에서 핸들러를 클릭하면 현재 연결을 해제할 수 있습니다.
연결 해제 시 검은색 동그라미가 (+) 표시로 대체되고, UI 편집기의 파란색 동그라미도 하얀색 동그라미로 바뀝니다. (+)를 클릭하면 가장 가까이에 있는 다른 위젯 또는 레이아웃의 앵커 포인트에 컨스트레인트가 생성됩니다.
연결 시 (+) 모양이 다시 검은색 동그라미로 바뀌고, 연결된 앵커 포인트와의 마진(거리값)이 자동으로 설정됩니다.
크기 조절 핸들러
크기 조절 핸들러는 상하 또는 좌우 양쪽에 컨스트레인트가 연결되었을 때 사용하고 핸들러 가운데에 보이는 사각 박스 안을 클릭하면 3가지 모도로 변경할 수 있습니다.
- >> << (랩 컨텐트, Wrap Content): 위젯의 크기를 내용물의 크기에 맞춥니다.
- |–| |–| (픽스드, Fixed): layout_width, layout_height 속성에 입력된 크기로 고정됩니다.
- |w| |w| (매치 컨스트레인트, Match Constraint): 컨스트레인트의 시작과 끝(앵커 포인트)에 맞춥니다. 매치 컨스트레인트 모드에서 마진 값을 직접 입력하면 컨스트레인트로부터 입력한 값만큼 떨어진 위치로 크기가 조정됩니다.
바이어스
상하 또는 좌우 양쪽이 같이 연결되었을 때는 바이어스라는 위치 조절 버튼이 활성화도비니다. 바이어스에서 버튼을 좌우로 드래그하면 0~100 사이의 값으로 변경하여 위치를 옮길 수 있습니다.
가로 세로비 셜정
크기를 매치 컨스트레인트로 설정하면 가로세로비 기능이 활성화되면서 사각형의 좌측 위 모서리에 작은 삼각형 모양이 나타납니다.
이 모양을 클릭하면 가로:세로 비를 설정할 수 있는 ratio 필드가 나타납니다.
레이아웃 툴바
어떤 레이아웃을 선택하느냐에 따라 해당 레이아웃의 맞는 툴바가 UI 편집기 상단에 제공되는데, 컨스트레인트 레이아웃은 다음과 같이 8개의 도구가 제공됩니다.
- 뷰 옵션: 제약 조건을 화면에 표시하거나 숨길 수 있습니다. 제약 조건이 너무 많거나 화면에 표시되는 위젯의 수가 많아져 복잡해지면 클릭해서 끌 수 있습니다.
- 오토 커넥트: 오토 커넥트가 켜진 상태에서 위젯을 컨스트레인트 레이아웃에 가져다 놓으면 기본 컨스트레인트를 연결해줍니다.
- 디폴트 마진: 컨스트레인트 연결 시 설정한 만큼 기본 마진값을 적용합니다.
- 클리어 컨스트레인트: 화면 상의 모든 컨스트레인트를 제거합니다. 개별로 제거할 때는 위젯에 마우스 포인터를 올리면 나타나는 동일한 모양의 아이콘을 클릭합니다.
- 인퍼 컨스트레인트: 오토 커넥트를 끄고 작업할 때 사용합니다. 가까운 위젯이나 레이아웃에 2개 이상의 컨스트레인트를 연결합니다.
- 팩: 여러 개의 위젯을 동시에 선택한 상태에서 크기를 조절할 때 사용합니다. 선택된 위젯의 상태에 따라서 크기가 조절될 때도 있고, 위치가 조절될 때도 있습니다.
- 얼라인: 선택된 위젯들을 정렬해줍니다.
- 가이드라인: 레이아웃 안의 모든 위젯에 공통의 여백으르 지정할 때 사용합니다. 가로 또는 세로 가이드라인을 삽입하면 위젯은 가이드라인에 컨스트레인트를 연결할 수 있습니다.
✋ 툴바가 보이지 않거나 부족한 경우
팔레트(Palette)의 레이아웃(Layouts) 카테고리를 선택했는지 확인해보세요.
체인으로 연결하기
체이닝은 컨스트레인트로 연결된 위젯끼리 서로의 위칫값을 공유해서 상대적인 값으로 크기와 위치를 걸정해주는데, 각 화면 전체를 기준으로 했을 때는 물론 화면을 가로 세로로 전환했을 때도 위젯의 상태 비율을 유지해줍니다.
체인은 다음 과정에 따라 생성됩니다.
연결하고 싶은 위젯들(2개씩 하는 것을 권장)을 동시에 선택합니다. 마우스 우클릭하여 [Chains] - [Create Chain] 을 선택하면 체이닝이 되고 화면을 portrait에서 landscape로 바꿔도 화면에 대한 위젯의 비율이 유지됩니다.
가이드라인
가이드라인은 컨스트레인트 레이아웃에서만 사용할 수 있는 보조 도구입니다. 가이드 라인을 드래그해서 화면 임의의 위치에 가져다 놓으면 레이아웃 안에 배치되는 위젯에 가상의 앵커 포인트를 제공합니다.
가이드라인은 레이아웃 툴바 또는 Pallette - Helpers 에서 선택할 수 있습니다.
리니어 레이아웃
리니어 레이아웃은 위젯을 가로 또는 세로 한 줄로 배치하기 위한 레이아웃입니다. 레이아웃의 속성 중 orientation(horizontal/vertical)을 변경해주면 위젯들의 방향을 바꿀 수 있습니다.
리니어 레이아웃을 기본 레이아웃으로 사용하기
레이아웃 모드를 Code 모드로 바꾸고 두번째 줄의 androidx.constrainlayout.widget.ConstraintLayout을 LinearLayout으로 변경합니다.
다시 Design 모드에서 컴포넌트 트리를 확인하면 최상위 레이아웃이 리니어 레이아웃으로 변경된 것을 볼 수 있습니다.
orientation 속성
orientation 속성을 지정하면 위젯들이 일렬로 세로 또는 가로로 배치되도록 할 수 있습니다. 기본값은 horizontal입니다.
layout_weight 속성
레이아웃 안에 배치되는 위젯의 크기를 비율로 나타낼 수 있는 옵션입니다. 위젯의 layout_weight 속성을 ‘2’ 로 바꾸면 (기본 값은 1) 다른 위젯들과의 상대적인 크기(orientation 속성에 따라 가로 크기 혹은 세로 크기)가 2배가 됩니다.
❗ 주의 사항
layout_weight 속성을 정확하게 주기 위해서는 layout_width 또는 layout_height 속성값을 ‘0dp’로 주어야 합니다. 그렇지 않으면 각각의 위젯이 가지고 있는 기본 속성값이 부가적으로 적용되어 정확한 비율로 표시되지 않습니다.
gravity 속성
gravity 속성은 다른 레이아웃의 필수 속성이기도 합니다. 레이아웃에 삽입되는 위젯을 gravity 속성에서 설정된 방향으로 정렬합니다. 동시에 2개 이상의 방향을 선택할 수 있습니다. 버튼이나 텍스트 뷰의 경우 내부의 텍스트 위치가 변경됩니다.
gravity 속성은 Attributes - All attributes 영역에 있으며, Attributes의 검색창에서 검색하여 원하는 속성을 찾을 수 있습니다.
layout_gravity 속성
자신이 속한 레이아웃(부모 레이아웃)을 기준으로 자신의 위치를 설정할 때 사용합니다.
스크롤뷰와 함께 사용하기
위젯들이 화면을 넘어갈 경우 최상위 레이아웃을 스크롤 할 수 있는 요소로 감싸야 스크롤이 가능해집니다.
스크롤 뷰를 사용할 수 있는 방법에는 크게 2가지가 있습니다.
- 기본 레이아웃을 스크롤 뷰(ScrollView)로 변경해서 사용
- 기본 레이아웃 안에 스크롤뷰 추가
빈 여백을 만드는 Space 도구
레이아웃에 있는 스페이스 도구는 빈 여백을 만들 수 있는 레이아웃 보조 도구입니다. 리니어 레이아웃에 여러 개의 위젯을 배치하면서 사이에 일정한 간격을 두고 싶을 때 사용합니다.
layout_width 또는 layout_height을 지정하면 해당하는 만큼의 빈 여백을 만들 수 있습니다.
프레임 레이아웃
프레임 레이아웃은 위젯의 위치를 결정하기보다는 위젯을 중첩해서 사용하기 위한 레이아웃입니다. 주로 게임 화면처럼 배경과 플레이어가 서로 다른 레이어에서 겹쳐 움직여야 할 때 사용하면 좋습니다.
또한 레이아웃 중에서 처리 속도가 가장 빠르기 때문에 1개의 이미지만 화면에 보여준다든지 하는 단순한 형태로 사용할 경우에 성능이 가장 좋습니다.
프레임 레이아웃은 주로 다른 레이아웃이나 위젯을 겹쳐 놓는 용도이기 때문에 레이아웃으로의 필수 속성이 따로 없습니다. 정렬도 프레임 레이아웃이 아닌 삽입되는 위젯의 layout_gravity 속성을 사용합니다.
정리
- 레이아웃에는 컨스트레인트 레이아웃, 리니어 레이아웃, 프레임 레이아웃이 있습니다.
- 컨스트레인트 레이아웃을 사용하면 간단한 드래그 앤 드롭 만으로 각각의 화면 요소들을 원하는 곳에 배치할 수 있습니다.
- 리니어 레이아웃은 위젯을 가로 또는 세로 한 줄로 배치하기 위한 레이아웃입니다.
- 프레임 레이아웃은 입력되는 위젯의 위치를 결정하기보다는 위젯을 중첩해서 사용하기 위한 레이아웃입니다.
Leave a comment