[Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린] 뷰를 배치하는 레이아웃

🌼선형으로 배치 - LinearLayout

💡LinearLayout 배치 규칙

• LinearLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스다.
• orientation이라는 속성에 horizontal이나 vertical 값으로 방향을 지정한다.

• 방향만 설정하면 뷰를 추가한 순서대로 나열하며, 화면에서 벗어나도 줄을 자동으로 바꾸지 않는다.

• 가로세로가 중첩된 복잡한 구조는 LinearLayout을 중첩하면 구현할 수 있다.

<LinearLayout
	android:orientation="horizontal">
	<ImageView />
	<LinearLayout
		android:orientation="vertical">
		<TextView />
		<TextView />
	</LinearLayout>
	<TextView />
</LinearLayout>

💡여백을 채우는 layout_weight 속성

• 화면에 뷰를 배치하다 보면 여백이 생기는데, 이 여백을 뷰로 채울 수 있다.

• 여백을 뷰로 채우려면 layout_weight 속성을 사용한다.
• layout_weight 속성을 사용하면 수치를 따로 계산하지 않아도 각 뷰에서 설정한 가중치로 여백을 채울 수 있다.
• layout_weight 속성에 지정한 숫자는 가중치를 나타낸다. 예를 들어 버튼 2개에 layout_weight 를 1과 3으로 각각 설정하면, 각 버튼은 가로 여백을 1/4, 3/4만큼 나누어 차지한다.

• 중첩된 레이아웃에서는 같은 영역에 있는 뷰끼리만 layout_weight로 설정한 가중치가 영향을 미친다.

• 뷰의 크기를 0으로 하고 layout_weight 값만 설정할 수도 있다. 뷰의 크기가 0이면 화면에 아무것도 나오지 않는다(화면 전체가 여백이 된다). 이 때 layout_weight 를 설정하면 여백을 모두 차지하게 된다.
💡
뷰의 크기를 퍼센트로 지정할 수는 없다. ex) android:width=”10%” 하지만 크기를 0으로 설정하고 layout_weight 값으로 설정하면 가중치로 크기를 결정하므로 퍼센트로 크기를 지정한 것과 같은 효과를 볼 수 있다.

💡뷰를 정렬하는 gravity, layout_gravity 속성

• 뷰를 정렬할 때는 gravity, layout_gravity 속성을 사용한다. 이 속성을 사용하지 않으면 기본값은 left/top(왼쪽 위)이 된다.
• gravity 속성의 정렬 대상은 콘텐츠(해당 레이아웃에 추가한 뷰)고, layout_gravity 속성의 정렬 대상은 뷰 자체를 정렬하는 속성이다.
• gravity 속성을 right|bottom 값으로, layout_gravity 속성을 center_horizontal 값으로 지정하는 식으로 뷰를 원하는 위치에 지정할 수 있다.

• LinearLayout의 orientation 속성에 설정한 방향과 같은 방향으로는 layout_gravity 속성이 적용되지 않는다.
• 따라서 뷰를 LinearLayout 영역의 가운데로 정렬하고 싶다면, 뷰에 layout_gravity="center" 로 설정하는 게 아니라, 레이아웃에 gravity=”center”로 설정해야 한다.

🌼상대 위치로 배치 - RelativeLayout

💡RelativeLayout 배치 규칙

• RelativeLayout은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스다.
• android:layout_above : 기준 뷰의 위쪽에 배치
• android:layout_below : 기준 뷰의 아래쪽에 배치
• android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치
• android:layout_toRightOf : 기준 뷰의 오른쪽에 배치

• RelativeLayout 은 LinearLayout처럼 자동으로 가로세로 방향으로 배치되지 않으므로 콘텐츠에 id값을 설정하고, layout_above 등의 속성값으로 지정하지 않으면 겹쳐서 배치된다.

💡맞춤 정렬하는 align 속성

• 해당 콘텐츠의 크기가 서로 달라서 원하는 위치에 배치되지 않을 수 있다. 이 때 align 속성에 id값을 입력하는 것으로 상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정할 수 있다.`
• android:layout_alignTop : 기준 뷰와 위쪽을 맞춤
• android:layout_alignBottom : 기준 뷰와 아래쪽을 맞춤
• android:layout_alignLeft : 기준 뷰와 왼쪽을 맞춤
• android:layout_alignRight : 기준 뷰와 오른쪽을 맞춤
• android:layout_alignBaseline : 기준 뷰와 텍스트 기준선을 맞춤

• 상위 레이아웃을 기준으로 맞춤 정렬하는 속성도 있다. 뷰를 부모 영역의 오른쪽 또는 아래쪽에 붙이고 싶을 때 사용하는 속성이다.
• android:layout_alignParentTop : 부모의 위쪽에 맞춤
• android:layout_alignParentBottom : 부모의 아래쪽에 맞춤
• android:layout_alignParentLeft : 부모의 왼쪽에 맞춤
• android:layout_alignParentRight : 부모의 오른쪽에 맞춤
• android:layout_centerHorizontal : 부모의 가로 방향 중앙에 맞춤
• android:layout_centerVertical : 부모의 세로 방향 중앙에 맞춤
• android:layout_InParent : 부모의 가로 세로 중앙에 맞춤

🌼겹쳐서 배치 - FrameLayout

💡FrameLayout

• FrameLayout은 뷰를 겹쳐서 출력하는 레이아웃 클래스다.

• 주로 똑같은 위치에 여러 뷰를 겹쳐서 놓고, 어떤 순간에 하나의 뷰만 출력할 때 사용한다.
• 따라서 대부분 뷰의 표시 여부를 설정하는 visibility 속성을 함께 사용한다.
• 처음에는 visibility="invisible"로 보이지 않게 설정했다가 액티비티 코드에서 원하는 순간에 뷰의 visibility를 바꾸는 식으로 활용할 수 있다.
💡
대표적으로 탭 화면을 만들 때 사용하면 편하다. 탭 버튼을 누를 때 FrameLayout으로 배치된 특정 화면을 보이게 하는 방식이다.

🌼표 형태로 배치 - GridLayout

💡GridLayout 배치 규칙

• GridLayout은 행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스다.
• orientation : 방향 설정
• rowCount : 세로로 나열할 뷰 개수
• columnCount : 가로로 나열할 뷰 개수

• rowCount 나 columnCount 에 설정한 개수만큼 뷰를 추가하면 자동으로 줄바꿈해서 그 다음 줄에 뷰를 출력한다.

• GridLayout에 추가한 뷰의 크기는 기본으로 wrap_content로 지정되므로 layout_width, layout_height를 설정하지 않아도 오류가 발생하지 않는다.

💡GridLayout 속성

• GridLayout 으로 뷰를 배치하면 추가한 순서대로 배치되는데, layout_row, layout_column 속성을 이용하면 특정 뷰의 위치를 조정할 수 있다.
• layout_row : 뷰가 위치하는 세로 방향 인덱스
• layout_column : 뷰가 위치하는 가로 방향 인덱스

• 위치를 변경한 이후에 추가된 뷰는 지정한 위치 다음부터 차례로 출력된다.

• GridLayout 을 이용하면서 특정 뷰의 크기를 확장해야 할 때가 있다. 이 경우 layout_gravity=”fill_horizontal” 속성을 이용한다.
• 공간이 충분하다면 layout_row, layout_column 속성으로 여백에 다음 뷰를 넣어 한 칸에 뷰를 두 개 표시할 수도 있다. 이 경우 같은 칸에 표시하면 뷰가 겹치므로 layout_gravity 속성으로 정렬 위치를 지정해 줘야 한다.

• 어떤 뷰가 테이블에서 여러 칸을 차지하게 설정할 수 있다.
• layout_columnSpan : 가로로 열 병합
• layout_rowSpan : 세로로 행 병합

🌼계층 구조로 배치 - ConstraintLayout

💡레이아웃 편집기에서 레이아웃 구성하기

• ConstraintLayout은 androidx에서 제공하는 라이브러리다. 그에 따라 build.gradle.kts의 dependencies에 implementation을 선언해야 한다.

implementation(libs.androidx.constraintlayout)

• ConstraintLayout 은 뷰를 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공한다.
• 하지만 이 많은 속성을 XML 파일에 직접 작성하기는 어렵다.

• 그에 따라 안드로이드 스튜디오에서는 마우스 클릭으로 레이아웃을 구성할 수 있는 레이아웃 편집기를 제공한다.
• 팔레트 : 레이아웃을 구성할 수 있는 다양한 뷰와 뷰 그룹
• 컴포넌트 트리 : 레이아웃에서 구성 요소의 계층 구조 표시
• 툴바 : 레이아웃 속성 설정
• 디자인 편집기 : 디자인 뷰나 청사진 뷰 작업 영역
• 속성 : 선택한 뷰의 속성을 지정
• 보기 모드 : 레이아웃 모드 선택. Code, Split, Design 중 선택

• 팔레트에서 뷰를 선택하고 마우스로 끌어서 작업창에 추가할 수 있다.

• 그 후 속성 창에서 뷰의 속성을 추가하거나 변경할 수 있다.

• ConstraintLayout은 이 때 id, layout_width, layout_height 이외에 제약 조건을 지정해 줘야 한다.
• 부모 영역에서 어디에 어느 정도의 여백으로 출력할지, 또는 다른 뷰를 기준으로 상대 위치를 지정해 줘야 한다.

• 다른 뷰를 특정 뷰의 옆에 배치할 때, 어느 쪽에 제약을 지정할 지 선택할 수 있다.

🏁결론