[안드로이드/Layout] Layout의 개념/종류

💡 Layout

  º  안드로이드 앱개발 화면 구성시 view를 배치하는데 이때 배치되는 좌표를 설정하지 않음

      → 단말기에 따라 같은 좌표라도 배치된 결과가 다르게 보이기 때문 (사용에 불편할 수도 있음)

  º  좌표가 아닌 배치되는 모양으로 결정하고, 이 배치되는 모양이 layout

      → 안드로이드 os가 단말기에 적합한 좌표를 계산하고 뷰들을 배치

 

✔  LinearLayout

• 가로/세로 방향성을 가지고 view 배치
• 한 칸에 하나의 view만 배치 가능
• 레이아웃 안에 레이아웃을 배치하는 등 다양하게 활용 가능

    기본 속성

• orientation :  배치 뱡향 결정 (horizontal/vertical), default가 horizontal
• layout_weight : 배치되는 view 들의 비율을 결정
  
  • wrap_content : 자신을 유지할 수 있는 최소한의 크기로 배치 → 남는 공간을 각 뷰들이 얼마큼 나눠가질지를 결정 (결국엔 화면에 꽉 참, 설정 안 하면 안 참)
  • match_parent : 뷰들이 화면 크기에 딱 맞춰 배치 → 각 뷰가 화면을 얼마나 차지할지를 결정 
    ex) 각 뷰들을 1로 설정하면 1/n로 나눠 배치

 

 

✔  FrameLayout

• 내부에 배치된 view들이 계속 같은 자리에 배치 (margin, layout_gravity 속성으로 위치 결정)
• 배치보다는 새로운 UI 요소를 만들거나 탭 기능 구현에 적합

    기본속성

• margin : 설정하는 값만큼 설정한 위치에 margin 생김 
• layout_gravity : 뷰의 parent를 기준으로 정렬 (정렬 방식은 다양) 

 

 

✔  TableLayout

• 테이블 형태의 레이아웃
• TableLayout 에 TableRow를 배치 , TableRow 에 배치하는 뷰의 수만큼 칸이 늘어남(col 늘어남)
• 같은 열에 있는 뷰들의 크기는 같이 늘어남

    기본 속성

• stretchColums : TableRow 안의 뷰들이 가로로 늘어날 비율을 설정 (꽉참), 뷰의 인덱스로 설정(0부터, * : 모두선택)
  * 뷰를 match_parent로 설정해도 늘어나지 X
• shrinkColums : TableRow 안의 뷰들이 화면을 벗어날 경우 화면에 보일 수 있도록 줄어드는 비율 설정, 뷰의 인덱스로 설정(0부터, * : 모두선택)
• layout_column : 뷰가 배치될 칸 위치를 인덱스로 설정 (인덱스 0부터 시작, Default는 항상 가장 왼쪽에 맞춰져 배치)
• layout_span : 뷰가 배치될 칸의 개수를 설정

 

 

✔  RelativeLayout

• 자신의(view)의 parent 또는 다른 view 와의 관계를 설정해 배치
• 레이아웃 자체에는 특별한 속성이 없지만 배치되는 뷰들의 속성을 이용해 배치 결정

    기본 속성(배치되는 뷰들의 속성)

• layout_alignParentTop : 자신(view)의 상단을 parent 의 상단과 일치
• layout_alignParentBottom : 자신(view)의 상단을 parent 의 하단과 일치
• layout_alignParentLeft : 자신(view)의 상단을 parent 의 왼쪽과 일치
• layout_alignParentRight : 자신(view)의 상단을 parent 의 오른쪽과 일치
• layout_alignWithParentMissing : 다른 뷰를 정렬 기준으로 설정했는데 기준으로 설정한 뷰가 사라졌을 경우 parent를 기준으로 정렬하도록 함
• layout_centerHorizontal : 뷰를 세로 방향의 중앙에 정렬
• layout_centerVertical : 뷰를 가로 방향의 중앙에 정렬
• layout_centerInParent : 뷰를 parent의 가로 세로 정중앙에 위치
• layout_alignTop : 자신(view)의 상단 부분을 지정된 view의 상단과 일치 (상단선에 똑같이 맞춤)
• layout_alignBottom : 자신(view)의 하단 부분을 지정된 view의 하단과 일치 (하단선에 똑같이 맞춤)
• layout_alignLeft : 자신(view)의 왼쪽 부분을 지정된 view의 왼쪽과 일치 (좌축선에 똑같이 맞춤)
• layout_alignRight : 자신(view)의 오른쪽 부분을 지정된 view의 오른쪽과 일치 (우측선에 똑같이 맞춤)
• layout_alignBaseline : 자신(view)의 Baseline 부분과 지정된 view의 Baseline 을 일치  *Baseline : 뷰의 중앙선
• layout_above : 자신(view) 전체를 지정된 view 상단선에 맞춰 배치 (바로 위에 올라간다는게 아니라 자신의 전체를 상단선에 맞춰 전체적으로 위에 위치하도록 배치)
• layout_below : 자신(view) 전체를 지정된 view 하단에 맞춰 배치
• layout_toRightOf : 자신(view) 전체를 지정된 view 우측선에 맞춰 배치
• layout_toLeftOf : 자신(view) 전체를 지정된 view 좌측선에 맞춰 배치 (자신의 전체를 좌측선에 맞춰 왼쪽으로 위치하도록 배치)

💡 문제점

     자신(view)이 관계 맺은 view가 margin 등을 통해 위치가 변하게 되더라도 자기 자신 view는 따라가지 못함 

     → ConstraintLayout 사용을 권장 (다만 예전 버전의 앱의 경우 RelativeLayout 을 다수 사용하기 때문에 유지보수

           차원 에서 알아둬야 함)

 

 

 

✔  ConstraintLayout

• RelativeLayout 처럼 자신의(view) 부모나 다른 View와의 관계를 설정해 배치 (RelativeLayout 의 문제점을 보완)
• 지정된 기준으로부터 얼마큼 떨어진 위치에 있을지 좌표로 설정 하는 실선 제약 조건 과 비율로 설정하는 스프링 제약 조건이 있다
• view 배치를 좌표로 할 경우 모바일 기기의 크기에 따라 UI가 달라질 수 있기 때문에 비율로 설정해서 항상 view 간의 배치 UI를 유지 
• 스프링 제약 조건 사용시 좌표는 0으로 맞추고 % 비율로 layout 상하좌우 와의 거리를 조정

스프링 제약 조건

 

 

• 다음과 같이 view 간의 관계를 설정해줄 수 있고 제약을 걸어놓은 범위 밖으로는 나가지 않음   ( 가운데 버튼은 위 버튼 아랫면보다 위, 아래 버튼 왼쪽면 보다 오른쪽으로 이동x)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

✔  GridLayout

• TableLayout 에서 view가 여러 row를 차지할 수는 없는 단점을 보완하기 위해 제공
• 사실상 RecyclerView에 밀려서 많이 사용되지는 않음 

기본속성

• layout_column : 뷰가 배치될 칸 위치를 인덱스로 설정 (인덱스 0부터 시작)
• layout_row : 뷰가 배치될 줄 위치를 인덱스로 설정 (인덱스 0부터 시작)
• layout_columnSpan : 뷰가 차지할 칸의 수 (layout_columnWeight 가 설정되어 있지 않으면 차지 안 하겠다로 인식해 늘어나지 않음)
• layout_rowSpan : 뷰가 차지할 줄의 수 (위와 같은 이유로 layout_rowWeight 설정 필수)
• layout_columnWeight : 남는 공간을 차지할 가로 비율 ex) 모든 view가 1이면 공평하게 차지
• layout_rowWeight : 남는 공간을 차지할 세로 비율

 

 

✔  Space

• 화면 구성시 여백이 필요할 때 사용

 

 

✔  IncludeOtherlayout

• Layout 안에 다른 layout을 포함 
• Containers - include 기능을 사용해 layout을 포함
• View Binding시 모든 layout을 binding 할 필요 없음 (setcontentView() 에 설정하지 않으므로 view 객체 접근도 불가능) → 메인 Layout의 binding 객체를 생성하면 그 안에 다른 layout들도 포함되어 있기 때문에 모두 접근이 가능