안드로이드 기본 레이아웃 LinearLayout, RelativeLayout, FrameLayout

---

지난 포스팅에서 알아본 위젯을 화면에 넣기 위해서는 레이아웃이 필요하다.

이번 포스팅에서는 기본 위젯에 이어 안드로이드 기본 레이아웃에 대해 알아보자.

안드로이드 개발에 있어 필수적인 내용이므로 마스터하자.

---

1. LinearLayout

리니어 레이아웃은 가장 기본적인 레이아웃으로 뷰들을 일렬로 배치한다.

배치 방향은 수직 또는 수평으로 배치할 수 있다.

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

</LinearLayout>

선형 레이아웃 클래스가 제공하는 속성과 메서드는 다음과 같다.

• orientation
  'horizontal'은 수평으로, 'vertical'은 수직으로 배치한다.
• gravity
  x축과 y축 상에 위젯을 어떻게 배치할 것인지 지정한다.
• baselineAligned
  false로 설정되면 뷰들의 기준선을 정렬하지 않는다.

리니어 레이아웃으로 뷰를 배치해보자.

 

orientation

수직과 수평으로 하나씩 다음과 같이 배치해보자.

먼저 수직 배치를 하려면 LinearLayout 에서 orientation을 vertical로 지정하면 된다.

위와 같이 각각의 버튼에 해당하는 뷰가 화면에 위에서부터 아래로 차례대로 배치된다.

 

수평배치를 하려면 LinearLayout에서 orientation을 horizontal로 변경하면 된다.

위와 같이 각각의 버튼이 수평으로 차례대로 배치된다.

 

gravity

gravity를 이용하여 화면상의 뷰의 위치를 변경해보자.

gravity 속성은 top, bottom, left, right, center, center_vertical 등의 상수를 통해 배치를 변경할 수 있다.

<?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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:text="Button01"/>

</LinearLayout>

gravity 속성을 center로 설정하면 다음과 같이 화면 중앙에 뷰가 정렬된다.

weight

선형 레이아웃에서는 속해있는 뷰들에 가중치를 설정할 수 있다.

가중치는 layout_weight로 표현되며 뷰의 중요도를 나타낸다.

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="0"
        android:text="Button01"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:text="Button02"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:text="Button03"/>

레이아웃 안의 버튼 속성에 weight를 적용해보았다.

위와 같이 가중치를 적용하면 다음과 같은 결과를 얻을 수 있다.

 

가중치를 0, 1, 1로 설정하였는데, 가중치가 0인 버튼1은 원래 크기 그대로 할당받았다.

나머지 가중치 1을 부여받은 버튼2와 버튼3은 남은 공간을 1:1비율로 나누어 갖는다.

---

2. RelativeLayout

상대 레이아웃은 뷰의 위치를 다른 뷰들에 상대적으로 지정하는 방법이다.

기준이 되는 뷰를 먼저 구성하고 이에 따라 나머지 뷰들을 상대적으로 구성하는 방식이다.

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:text="Button01"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:text="Button02"
        android:layout_below="@+id/button"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:text="Button03"
        android:layout_below="@id/button2"
        android:layout_toRightOf="@id/button2"/>

선형 레이아웃 클래스가 제공하는 속성과 메서드는 다음과 같다.

• layout_above
  만약 true이면 현재 뷰의 하단을 기준 뷰의 위에 겹쳐놓는다.
• layout_below
  현재 뷰의 상단을 기준 뷰의 하단에 위치시킨다.
• layout_centerHorizontal
  수평으로 현재 뷰의 중심을 부모와 일치시킨다.
• layout_centerParent
  부모의 중심점에 현재 뷰를 위치시킨다.
• layout_centerVertical
  수직으로 현재 뷰의 중심을 부모와 일치시킨다.
• layout_toLeftOf
  현재 뷰의 우측단을 기준 뷰의 좌측단에 위치시킨다.
• layout_toRightOf
  현재 뷰의 좌측단을 기준 뷰의 우측단에 위치시킨다.

위에 정리한 코드를 활용하여 릴레이티브 레이아웃으로 뷰를 배치해보자.

배치된 화면은 다음과 같다.

이런식으로 기준 뷰를 두고 그에 따라 상대적인 배치를 조정할 수 있다.

상대 레이아웃도 실전에서 상당히 많이 사용되므로 익숙해지자.

---

3. FrameLayout

프레임 레이아웃은 레이아웃 객체중에서도 가장 간단한 형태이다.

기준점은 화면 좌측 상단으로 정해진다.

포함하는 뷰가 여러 개이면 이전에 추가한 뷰 위에 새로 추가된 뷰가 중첩되는 형식이다.

주로 여러 뷰들을 겹쳐서 배치하고 visibility 속성을 변경하여 필요한 뷰만 보이도록 할 때 자주 사용한다.

 

프레임 레이아웃을 사용하여 텍스트뷰 3개를 중첩하여 배치하고 버튼을 누를 때 원하는 뷰가 나오도록 구현해보자.

다음과 같이 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:text="Button01"
            android:backgroundTint="#8c2a3b"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:text="Button02"
            android:layout_below="@+id/button"
            android:backgroundTint="#3b2a8d"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:text="Button03"
            android:layout_below="@id/button2"
            android:layout_toRightOf="@id/button2"
            android:backgroundTint="#2a8f3c"/>
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="First"
            android:textSize="40sp"
            android:gravity="center"
            android:background="#448c2a3b"/>

        <TextView
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Second"
            android:textSize="40sp"
            android:gravity="center"
            android:background="#443b2a8d"/>

        <TextView
            android:id="@+id/view3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Third"
            android:textSize="40sp"
            android:gravity="center"
            android:background="#442a8f3c"/>

    </FrameLayout>

</LinearLayout>

public class MainActivity extends AppCompatActivity {
    TextView tv1, tv2, tv3;
    Button btn1, btn2, btn3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv1 = findViewById(R.id.view1);
        tv2 = findViewById(R.id.view2);
        tv3 = findViewById(R.id.view3);
        btn1 = findViewById(R.id.button);
        btn2 = findViewById(R.id.button2);
        btn3 = findViewById(R.id.button3);

        changeView();
    }

    public void changeView() {
        tv1.setVisibility(View.INVISIBLE);
        tv2.setVisibility(View.INVISIBLE);
        tv3.setVisibility(View.INVISIBLE);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tv1.setVisibility(View.VISIBLE);
                tv2.setVisibility(View.INVISIBLE);
                tv3.setVisibility(View.INVISIBLE);
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tv1.setVisibility(View.INVISIBLE);
                tv2.setVisibility(View.VISIBLE);
                tv3.setVisibility(View.INVISIBLE);
            }
        });

        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tv1.setVisibility(View.INVISIBLE);
                tv2.setVisibility(View.INVISIBLE);
                tv3.setVisibility(View.VISIBLE);
            }
        });
    }
}

오늘 포스팅까지 스터디했던 기본 위젯과 기본 레이아웃을 재활용하여 작성한 코드다.

자바코드의 setVisibility 속성이 VISIBLE이면 해당 뷰가 보이고 INVISIBLE이면 보이지 않는다.

이 속성을 활용하여 위와 같이 코드를 작성한 결과물은 다음과 같다.

 

버튼1을 누르면 First 화면이 나오고,

버튼2를 누르면 Second 화면, 버튼3을 누르면 Third 화면이 나타난다.

visibility를 적절히 활용하여 실제 앱을 작성하는데에도 유용하게 사용할 수 있다.

 

오늘은 여기까지!