[안드로이드] 대표적인 레이아웃

대표적인 레이아웃

리니어 레이아웃(LinearLayout)

• 뷰를 아래쪽으로만 추가(vertical) 하는 방법
• 뷰를 오른쪽으로만 추가(horizontal) 하는 방법
• 레이아웃도 마찬가지로 view 개념이기 때문에 리니어 레이아웃 내부에 또다른 리니어 레이아웃을 추가하여 각각 서로 다른 orientation 속성을 추가. 복잡한 View 구성을 가능하게 한다.

layout_gravity 속성

• View 자체를 정렬하는 속성

• 리니어 레이아웃에서 각각의 뷰들은 자신들만의 공간을 갖게 되는 형태를 띈다.

  • orientation이 vertical일때, 각 뷰는 horizontal 방향으로 자신 만의 공간을 갖게 됨.

    • 따라서 layout_gravity 값을 center_horizontal로 뷰를 중앙 정렬할 수 있음.

      

  • orientation이 horizontal일 때, 각 뷰는 vertical 방향으로 자신 만의 공간을 갖게 된다.

    • 따라서 layout_gravity 값을 center_vertical로 뷰를 중앙 정렬할 수 있음

      

  • 이 외에도 다른 값들로 뷰를 중앙 정렬하는 방법이 존재한다.

gravity 속성

• View 안에 들어있는 Text, 내용물을 정렬해주는 속성

layout_margin 속성

• View 상하좌우 바깥쪽에 다른 뷰 또는 부모 뷰와 여유 공간을 만드는 속성
  • layout_margin은 상하좌우 모두 같은 값(dp)을 주어 여유공간을 만듬.
  • layout_marginBottom : View 바깥 아래쪽에만 여유공간을 준다.
  • layout_marginStart, Left, Top, End, Right 등 속성

padding 속성

• View 내부 내용물과 View 경계 사이의 여유공간을 주는 속성
• padding 값은 View 경계와 내용물 사이의 공간을 상하좌우 모두 주는 속성
• margin과 마찬가지로 각각에 대해 padding을 설정해줄 수 있음
  • paddingStart, Left, Top, End, Right 등 속성

layout_weight 속성

• 남아있는 공간을 분할하는 역할

• 두개의 View가 있을 때, 만약 가로 방향(horizontal)으로 남아있는 공간을 할당하려면?

  • 가로 방향이기 때문에 layout_width 값은 0dp로 주고, layout_weight값을 각각 1로 준다.
    

  • 그럼 공간을 각각 반반씩 나누어 가지게 된다.

  • 다른 방법으로, 각각 2/3, 1/3 공간을 갖게 하려면?

    • 똑같이 width 값은 모두 0dp에, weight값을 각각 2, 1로 주게 되면 한 View의 weight 값/동일 공간 View들의 weight 합 비율로 공간이 할당된다.

      

    • 2/3, 1/3 공간 할당

      

    • button2 weight = 3 / 동일 공간 View들의 weight 합 4 => 3/4 공간 할당

    • button3 weight = 1 / 동일 공간 View들의 weight 합 4 => 1/4 공간 할당

상대 레이아웃(RelativeLayout)

• 상대 레이아웃은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치하는 레이아웃이다.
• ConstraintLayout과 상당히 유사
• 제약 레이아웃이 최근에 나온 레이아웃이고 기능이 훨씬 많음. 따라서 상대 레이아웃은 많이 쓰지 않는 추세
• 뷰 또는 위젯과 부모 레이아웃 간의 관계를 사용할 수 있음 -> layout_align 속성
• 하나의 뷰가 있으면 다른 뷰하고의 관계를 사용할 수 있음 -> layout_toXXXXOf / layout_alignXXXX 속성

layout_align 속성

• 부모 레이아웃 간의 상대적 위치를 지정할 때 사용하는 속성

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      
      <Button
          android:id="@+id/button"
          android:layout_width="169dp"
          android:layout_height="127dp"
          android:layout_alignParentTop="true"
          android:layout_alignParentRight="true"
          android:text="Button1" />
  
  </RelativeLayout>

• Button의 layout_alignParentTop과 layout_alignParentRight 속성 모두 true값으로 지정한다면 그때의 부모 레이아웃의 위쪽과 오른쪽에 붙게 된다.

• 상대 레이아웃은 위에 아무 View 배치 없이 Button을 그냥 화면 아래쪽에 두고 싶다면 간단히 layout_alignParentBottom 속성을 true로 만들어주면 된다.
  • LinearLayout은 이런 배치가 힘들다.
    

layout_toXXXXOf / layout_alignXXXX 속성

• 다른 View간의 상대적 위치를 지정할 때 사용하는 속성
• 레이아웃의 상대적 위치를 설정하는 속성엔 Parent가 붙지만, View와의 상대적 위치를 지정하는 속성엔 붙지 않는다는 차이가 있다.
• layout_toLeftOf, layout_toRightOf, layout_alignTop, layout_alignBottom 등

프레임 레이아웃(FrameLayout)

• 한 번에 하나의 뷰만 보여주는데, 여러 개를 추가했을 경우 다른 뷰들이 중첩되어 깔려있는 형태로 보여진다.
• 다른 뷰들을 감춰놓았다가 필요할 때마다 보여주고 제일 앞에 있는 뷰를 감추는 방식
• 결국은 이런 동작들이 화면을 전환하는 것처럼 보여지게 된다.

테이블 레이아웃(TableLayout)

• 격자(Grid) 형태로 뷰를 보여주는 레이아웃

View의 영역

• 뷰의 테두리(Border)를 기준으로 바깥쪽이 Margin, 안쪽이 Padding
• 뷰의 영역은 margin까지를 포함함

View의 배경색

• background 속성으로 배경색을 설정
• 배경 이미지 설정도 가능
• ARGB를 기준으로 16진수 두자리씩 할당하며 #뒤에 코드를 붙인다
  • A는 알파값으로 투명도를 나타낸다.