Android/Kotlin

[Android, Kotlin] 레이아웃 (1) LinearLayout

겨울시인 2022. 4. 28. 15:36

LinearLayout 에 대해서 알아보자.

Layout : 앱 화면을 기본 바탕으로 생각했을때 그 안에서 본인이 그리고자 하는 기본 틀
Linear : 사전적 의미로 "직선의, 선으로 된, 직선 모양의" 되시겠다.

  • LinearLayout :
    • ViewGroup의 하위 클래스로 선형의 배치 방식을 정의함.
    • ViewGroup을 상속받아 하나의 View 처럼 쓰일 수 있다.
    • Android Studio xml 에서 쓰이는 레이아웃 중 하나로 가장 기본이되는 레이아웃
    • 위에서 아래(top -> down) 또는 왼쪽에서 오른쪽(left -> right)으로 원하는 child element(View) 들을 배치하여 층층히 쌓아 정렬
  • 사용법 : LinearLayout 태그 안에 원하는 child element(View) 를 순차적으로 배치

 
 

속성 1. layout_width / layout_height

  1. match_parent : 부모와 동일한 크기를 가진다. (기본 layout 의 부모라면 화면 전체 크기를 말함)
  2. wrap_content : 자신이 가진 content를 감싸는 정도의 크기를 가진다. (content가 없으면 0 )
  3. 임의값 (hard coding) : 직접 입력

 
 

속성 2. orientation (속성값을 주지 않을경우, default = horizontal)

  1. 수평방향 (horizontal)
android:orientation="horizontal"

  1. 수직방향 (vertical)
android:orientation="vertical"

 
 

속성 3. layout_gravity, gravity

View 배치 시, gravity 값에 의해 정렬

  • 옵션 : center / start / bottom / center_horizontal / center_vertical / clip_horizontal / clip_vertical
    / end / fill / fill_horizontal / fill_vertical / left / right / top
  1. layout_gravity : 부모 컨테이너의 영역 기준으로 현재 View 위치 정렬
  • ex) 버튼을 1개 가진 LinearLayout 에 적용 (옵션 : center - 수평, 수직으로 가운데 정렬)
  • 결과 : 전체화면(부모) 기준으로 한 가운데에 위치
    ...
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@color/purple_200"
    android:layout_gravity="center"
    ...

  1. gravity : 현재 자신(View)의 영역 기준으로 Child View 또는 Content 위치 정렬
  • ex) 버튼을 1개 가진 LinearLayout 에 적용 (옵션 : bottom, center_horizontal)
    결과 : 자기 자신의 View(LinearLayout) 기준으로 아래&가운데에 위치
    ...
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@color/purple_200"
    android:layout_gravity="center"
    android:gravity="bottom|center_horizontal"
       ...

 
 

속성 4. background

  1. 색넣기 : RGB 값을 직접 입력 또는 Android Studio 에서 기본 제공하는 Color Set 사용
android:background="#F0F4C3"

  1. 이미지 넣기 : res -> drawable 의 이미지 불러오기
android:background="@drawable/ic_launcher_background"

 
 

속성 5. layout_weight

  • layout_weight : 정해진 비율에 따라 포함된 View 를 배치하고 자 할때 사용
  • 전체 각 View 가 차지하는 비율 = 전체 영역 중, (자신의 weight / weight 합계) 만큼을 차지하게 된다.
  • ex) 3개의 버튼 중, 2개는 weight->1, 나머지 1개는 weight->2
    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="gravity"
        android:layout_weight="1"/>
    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="gravity"
        android:layout_weight="1" />
    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="gravity"
        android:layout_weight="2"/>

 
 

속성 6. margin, padding

LinearLayout 만의 특성이 아닌, 모든 레이아웃에서 공통으로 사용

  1. layout_width / layout_height : View 의 기본적인 크기를 정의할 때 사용
  2. 마진(Margin) : View - View 사이의 공간, 즉 테두리를 넘어 여백을 주고 싶을 때 사용
  3. 패딩(Padding) : View 내부에서 테두리와 내용간의 여유 공간을 주고 싶을 때 사용
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Margin/Padding"
        android:layout_margin="30dp"
        android:padding="20dp"
        android:background="#ffffff"
        />

 
 

마지막으로..

  • Android 에서 레이아웃은 크게 3가지.
    그 중 첫번째 LinearLayout의 중요 기능들에 대해 알아보았다.
    1. LinearLayout
    2. RelativeLayout (포스팅 예정..)
    3. ConstraintLayout (포스팅 예정..)
  • 실제 App 개발에서는 단순히 하나의 레이아웃으로 구성된 경우는 거의 없고, 혼합/중첩해서 사용한다 하니
    추후 프로젝트를 통해 보다 세부적인 요소들에 대해서도 공부하도록 하자.
저작자표시 (새창열림)