mojo's Blog

Layout 종류 및 LinearLayout 본문

Android

Layout 종류 및 LinearLayout

_mojo_ 2021. 8. 28. 15:53

Layout 의 기본 개념에 대해 알아보도록 한다.

 

Layout 은 ViewGroup 클래스로부터 상속받으며 내부에 무엇을 담는 용도로 쓰인다.

즉 레이아웃 안에 존재하는 Widget 을 배치하게 해준다.

가장 많이 쓰이는 Layout 은 LinearLayout 이다.

대표적인 속성으로 다음과 같다. 레이아웃에만 적용되는 것은 아니지만 레이아웃에서 자주 사용되는 속성이다.

 

  • orientation : 레이아웃 안에 배치할 widget 의 수직 or 수평 방향 설정
  • gravity : 레이아웃 안에 배치할 widget 의 정렬 방향을 좌측, 우측, 중앙 등으로 설정
  • padding : 레이아웃 안에 배치할 위젯의 여백을 설정 ( padding, layout_margin 함께 알아두기 )
  • layout_weight : 레이아웃이 전체 화면에서 차지하는 공간의 가중값 설정, 주로 여러 개의 레이아웃이 중복될때 사용
  • baselineAligned : 레이아웃 안에 배치할 위젯을 보기 좋게 정렬

 

Layout 의 종류에 대해 알아보도록 한다.

 

주로 사용되는 레이아웃은 LinearLayout, RelativeLayout, FrameLayout, TableLayout, GridLayout 등 이다.

 

  • LinearLayout : 레이아웃의 왼쭉 위부터 아래족 또는 오른쪽으로 차례로 배치
  • RelativeLayout : 위젯 자신이 속한 레이아웃의 상하좌우 위치를 지정하여 배치 or 다른 위젯으로부터 상대적인 위치 지정
  • TableLayout : 위젯을 행, 열의 개수를 지정한 테이블 형태로 배열
  • GridLayout : TableLayout 과 비슷하지만 행 or 열을 확장시켜 다양하게 배치
  • FrameLayout : 위젯을 왼쪽 위에 일률적으로 겹쳐서 배치하여 중복되어 보이는 효과를 낸다. 여러 개의 위젯을 배치한 후에 상황에 따라서 필요한 위젯을 보이는 방식으로 주로 활용

 

LinearLayout

 

가장 많이 사용되는 LinearLayout 의 사용법과 속성에 알아보도록 한다.

 

Orientation 속성

 

LinearLayout의 가장 기본적 속성은 orientation 으로 vertical, horizontal 이 있다.

vertical => LinearLayout 안에 포함될 위젯의 배치를 왼쪽 위부터 수직 방향으로 쌓음

 

 

horizontal => LinearLayout 안에 포함될 위젯의 배치를 수평 방향으로 쌓음

 

 

gravity, layout_gravity 속성

 

gravity 속성은 레이아웃 안의 위젯을 어디에 배치할 것인지를 결정하고 값으로 left, right, center, top, bottom 등이 있다.

2개를 조합하여 right|bottom 처럼 사용할 수 있다. (오른쪽 하단 정렬)

 

 

gravity 속성이 자신에 포함된 자식을 어디에 위치시킬지 결정한다면 layout_gravity 는 자신의 위치를 부모의 어디쯤 위치시킬지를 결정한다.

gravity 는 레이아웃에 지정하고 layout_gravity 는 위젯이 지정한다.

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_gravity="right"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:layout_gravity="center"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"/>

</LinearLayout>

 

 

연습 ) 리니어 레이아웃으로 다음 화면을 구성하는 XML 작성해보기

 

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

   <Button
       android:layout_width="110dp"
       android:layout_height="100dp"
       android:background="#00FF00"
       android:text="버튼1"
       android:layout_gravity="center"
       android:gravity="top|right"/>

    <Button
        android:layout_width="110dp"
        android:layout_height="100dp"
        android:background="#00FF00"
        android:text="버튼2"
        android:layout_gravity="left"
        android:gravity="left"/>

    <Button
        android:layout_width="110dp"
        android:layout_height="100dp"
        android:background="#00FF00"
        android:text="버튼1"
        android:layout_gravity="right"
        android:gravity="bottom|right"/>

</LinearLayout>

 

중복 LinearLayout 의 형태에 대해 알아보도록 한다.

 

안드로이드 화면을 구성하다 보면 widget을 한 화면에 수평, 수직으로 다양하게 배치해야 하는 경우에 존재할 수 있다.

이러한 구성은 LinearLayout 안에 LinearLayout을 생성하는 방식을 사용해야 한다.

예를 들어서 바깥의 큰 LinearLayout을 3개의 작은 LinearLayout 으로 분류한 후에 각 LinearLayout 안에 필요한 widget 을 배치하는 방식이다.이는 안드로이드 화면 배치 방식 중 가장 많이 사용되는 형식이다.이러한 배치를 하기 위해 LinearLayout 의 몇 가지 XML 속성에 대해 알아보도록 한다.

 

layout_weight 속성

 

LinearLayout 을 여러 개 사용할 경우에 각 Layout 의 크기를 지정해야 한다.

레이아웃을 화면 전체에 채워야 하기 때문에 dp, px 등의 단위로 지정하기 보다는 비율(%) 으로 지정한다.

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#00FF00"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼4"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#0000FF"
        android:orientation="vertical">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼5"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼6"/>
    </LinearLayout>

</LinearLayout>

 

 

연습 ) 다음 화면을 구성하는 XML 작성하기

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF0000"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FFFF00"
                android:layout_weight="1"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#000000"
                android:layout_weight="1"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:layout_weight="1"/>

</LinearLayout>

'Android' 카테고리의 다른 글

기타 레이아웃  (0) 2021.08.28
Java 코드로 화면 만들기  (0) 2021.08.28
안드로이드 프로그래밍 제 4장 연습문제 (7, 8, 9번)  (0) 2021.08.26
기본 위젯 활용하기  (0) 2021.08.26
기본 위젯 다뤄보기  (0) 2021.08.26
'Android' Related Articles more
Comments