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

LinearLayout은 뷰를 가로나 세로로 나열하고, RelativeLayout은 상대적인 위치로 뷰를 배치한다. FrameLayout은 뷰를 겹쳐서 출력하며, GridLayout은 테이블 구조로 뷰를 배치한다. ConstraintLayout은 더 많은 속성을 제공하며, 안드로이드 스튜디오의 레이아웃 편집기를 통해 쉽게 구성할 수 있다.
DriedPollack's avatar
Jul 12, 2024
[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 값으로 지정하는 식으로 뷰를 원하는 위치에 지정할 수 있다.
  • LinearLayoutorientation 속성에 설정한 방향과 같은 방향으로는 layout_gravity 속성이 적용되지 않는다.
    • 따라서 뷰를 LinearLayout 영역의 가운데로 정렬하고 싶다면, 뷰에 layout_gravity="center" 로 설정하는 게 아니라, 레이아웃에 gravity=”center”로 설정해야 한다.
 

🌼상대 위치로 배치 - RelativeLayout

💡RelativeLayout 배치 규칙

  • RelativeLayout은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스다.
    • android:layout_above : 기준 뷰의 위쪽에 배치
    • android:layout_below : 기준 뷰의 아래쪽에 배치
    • android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치
    • android:layout_toRightOf : 기준 뷰의 오른쪽에 배치
  • RelativeLayoutLinearLayout처럼 자동으로 가로세로 방향으로 배치되지 않으므로 콘텐츠에 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 : 부모의 가로 세로 중앙에 맞춤
💡
LinearLayout으로 배치한 화면을 RelativeLayout으로 구현할 수도 있고 그 반대도 가능하다. 화면을 구성할 때 사용하는 레이아웃은 개발자가 선택하면 된다.
 

🌼겹쳐서 배치 - FrameLayout

💡FrameLayout

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

🌼표 형태로 배치 - GridLayout

💡GridLayout 배치 규칙

  • GridLayout은 행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스다.
    • orientation : 방향 설정
    • rowCount : 세로로 나열할 뷰 개수
    • columnCount : 가로로 나열할 뷰 개수
  • rowCountcolumnCount 에 설정한 개수만큼 뷰를 추가하면 자동으로 줄바꿈해서 그 다음 줄에 뷰를 출력한다.
  • 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 : 세로로 행 병합
💡
TableLayout도 마찬가지로 뷰를 테이블 구조로 나타낼 수 있지만, TableLayout은 한 줄을 <TableRow>로 표현해 줘야 하기 때문에 불편할 수 있다. 또한 앱이 실행되다가 셀의 개수가 변하면 행을 일일히 계산해서 TableRow를 지정해야 한다. 하지만 GridLayout에서는 방향과 개수만 설정하면 알아서 행이 결정된다. 둘 중 어느 것을 선택할지는 개발자가 선택하면된다.
 

🌼계층 구조로 배치 - ConstraintLayout

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

  • ConstraintLayout은 androidx에서 제공하는 라이브러리다. 그에 따라 build.gradle.ktsdependenciesimplementation을 선언해야 한다.
    • implementation(libs.androidx.constraintlayout)
  • ConstraintLayout 은 뷰를 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공한다.
    • 하지만 이 많은 속성을 XML 파일에 직접 작성하기는 어렵다.
  • 그에 따라 안드로이드 스튜디오에서는 마우스 클릭으로 레이아웃을 구성할 수 있는 레이아웃 편집기를 제공한다.
    • 팔레트 : 레이아웃을 구성할 수 있는 다양한 뷰와 뷰 그룹
    • 컴포넌트 트리 : 레이아웃에서 구성 요소의 계층 구조 표시
    • 툴바 : 레이아웃 속성 설정
    • 디자인 편집기 : 디자인 뷰나 청사진 뷰 작업 영역
    • 속성 : 선택한 뷰의 속성을 지정
    • 보기 모드 : 레이아웃 모드 선택. Code, Split, Design 중 선택
  • 팔레트에서 뷰를 선택하고 마우스로 끌어서 작업창에 추가할 수 있다.
  • 그 후 속성 창에서 뷰의 속성을 추가하거나 변경할 수 있다.
  • ConstraintLayout은 이 때 id, layout_width, layout_height 이외에 제약 조건을 지정해 줘야 한다.
    • 부모 영역에서 어디에 어느 정도의 여백으로 출력할지, 또는 다른 뷰를 기준으로 상대 위치를 지정해 줘야 한다.
  • 다른 뷰를 특정 뷰의 옆에 배치할 때, 어느 쪽에 제약을 지정할 지 선택할 수 있다.
💡
ConstraintLayout이 아닌 다른 레이아웃도 레이아웃 편집기로 구성할 수 있지만, 다른 레이아웃은 우리가 직접 작성해야 하는 부분을 도구가 많이 지원하지 않기 때문에 추천하지 않는다.
 

🏁결론

LinearLayout은 뷰를 가로나 세로로 나열하고, RelativeLayout은 상대적인 위치로 뷰를 배치한다. FrameLayout은 뷰를 겹쳐서 출력하며, GridLayout은 테이블 구조로 뷰를 배치한다. ConstraintLayout은 더 많은 속성을 제공하며, 안드로이드 스튜디오의 레이아웃 편집기를 통해 쉽게 구성할 수 있다.
Share article

More articles

See more posts

👨🏻‍💻DriedPollack's Blog