인터페이스 기초02 - 레이아웃(Layout)

ViewGroup의 일종으로 다른 뷰들을 내부에 배치하는 컨테이너 역할을 한다. 위젯 또는 다른 ViewGroup을 내부에 배치해 다양한 화면을 구성한다. 일반적으로 화면 상에 직접 보이지는 않지만 색을 입히기 등으로 확인 할 수 있다.

주요 Layout은 LinearLayout, RelativeLayout, FrameLayout, TableLayout 등이 있다.

- LinearLayout: 가장 간단한 레이아웃으로 가로, 세로의 순서로 항목을 배치한다.

- RelativeLayout: 뷰와 뷰를 담고 있는 레이아웃과 다른 뷰와 상대적인 관계로 배치한다.

- FrameLayout: 레이아웃의 좌측 상단에 모든 뷰들을 겹쳐서 배치한다.

- TableLayout: 표 형식으로 뷰를 내부에 배치한다.

#실습

- HORIZONTAL 버튼을 클릭하면 버튼을 수평으로 배치하고, VERTICAL 버튼을 부르면 버튼은 수직으로 배치하는 앱 만들어보기

                             -VERTICAL 버튼 클릭 시-                                                               -HORIZONTAL 버튼 클릭 시-                             

<activity_linear.xml>

- LinearLayout의 기본 틀을 만들기 위해 기존에 있던 activity_main.xml은 남겨두고 layout - new - Layout Resource File - Root element에 LinearLayout으로 변경한 뒤 작성한다. 

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

    <Button
        android:id="@+id/vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:onClick="onClick"
        android:text="VERTICAL" />

    <Button
        android:id="@+id/horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:onClick="onClick"
        android:text="HORIZONTAL" />
</LinearLayout>

 

1. layout_weight

android:layout_weight="0"

레이아웃의 공간을 어느 정도 비중으로 차지하느냐를 결정한다.

0일 경우는 본래 크기이고, 1이상이면 다른 뷰와의 비율에 따라 레이아웃에 배치한다.

---

<MainAcivity.java>

package ddwucom.moblie.week04.assignment04_p19;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout layout;
    Button vertical;
    Button horizontal;

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

        layout = (LinearLayout)findViewById(R.id.linear);
        vertical = (Button)findViewById(R.id.vertical);
        horizontal = (Button)findViewById(R.id.horizontal);
    }

    public void onClick(View view){

        switch (view.getId()){
            case R.id.vertical:
                layout.setOrientation(LinearLayout.VERTICAL);
                break;

            case R.id.horizontal:
                layout.setOrientation(LinearLayout.HORIZONTAL);
                break;
        }
    }
}

 

1. setContentView()

setContentView(R.layout.activity_linear);

설계도를 가져와 보여주는 역할이다. 여기서 설계도 역할은 xml 파일이 한다.

R.layout.activity_linear은 Res/layout/activity_linear.xml 을 의미하는 것과 같다.

 

2. setOrientation()

switch (view.getId()){
    case R.id.vertical:
        layout.setOrientation(LinearLayout.VERTICAL);
        break;

    case R.id.horizontal:
        layout.setOrientation(LinearLayout.HORIZONTAL);
        break;
}

Layout의 속성을 변경할 때 사용한다. 즉 VERTICAL 버튼을 클릭하는 경우 LinearLayout을 수직으로 변경하고, HORIZONTAL 버튼을 클릭하면 수평으로 변경한다.