[안드로이드] 레이아웃

제약 레이아웃(ConstraintLayout)

프로젝트를 처음 만들었을 때 자동으로 만들어지는 레이아웃이다.

최상위 태그는 화면 전체를 담고있는 레이아웃이다.

제약조건(연결선)을 이용해 그 안에 추가된 뷰들의 위치를 결정한다.

 

리니어 레이아웃(LinearLayout)

상자를 쌓듯이 뷰를 하나씩 쌓을 수 있는 레이아웃이다.

아래로 쌓을지 오른쪽으로 쌓을지 결정해야 한다. 방향 속성인 orientation 속성을 이용해 가로방향은 Horizontal, 세로방향은 Vertical로 지정한다. (android:orientation = "vertical")

레이아웃 안에 레이아웃을 넣어 각각의 orientation 속성을 설정하여 복잡한 화면을 만들 수 있다.

 

정렬 : layout_gravity 와 gravity 속성을 사용한다.

layout_gravity 속성이 left이면 뷰를 왼쪽 정렬

gravity 속성은 뷰 내부의 값들(ex. 글자)를 정렬한다.

 

공간분할 : layout_weight 속성.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
  android:layout_width="0dp"
  android:layout_height="wrap_content"
android:layout_weight="1"
android:text="확인" /> 
<Button
      android:layout_width="0dp"
      android:layout_height="wrap_content"
android:layout_weight="1"
android:text="취소" /> 
</LinearLayout>

layout_weight의 비율인 1:1로 공간을 분할한다. 분할할 때 layout_width를 0dp로 놓는 것이 좋다.

 

마진, 패딩 : layout_margin, padding

 

상대 레이아웃(RelativeLayout)

뷰를 담고있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치하는 레이아웃이다.

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

layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight

부모 레이아웃의 가운데에 배치 : layout_centerInParent 

다른 뷰와의 상대적 위치를 지정할 때 :  layout_toLeftOf, layout_toRightOf, layout_alignTop, layout_alignBottom

 

위, 아래 버튼을 두고 가운데 버튼이 꽉 차게 만든 화면 : 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

<Button
  android:id="@+id/button1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentTop="true" />

<Button
  android:id="@+id/button2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentBottom="true" />

<Button
  android:id="@+id/button3"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/button1"
  android:layout_above="@+id/button2"
  android:text="Button" />

</RelativeLayout>

 

프레임 레이아웃(FrameLayout)

한 번에 하나의 뷰만 보여주는 레이아웃이다.

프레임 레이아웃에 여러개의 뷰를 추가했다면 가장 나중에 추가한 뷰만 화면에 보인다.

뷰를 여러개 담아놓고 중첩할 때 주로 사용한다.

아래에 깔린 다른 뷰를 화면에 보여주고 싶다면 위쪽으로 뷰를 올려줄 수도 있고, 보고자 하는 뷰 외의 다른 뷰들을 보이지 않게 할 수 있다.

 

가시성 속성 : andriud:visibility = "visible" (invisible : 감추기, gone : 없애기)

 

버튼 눌렀을 때 중첩된 뷰 바꾸기

package com.example.framelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView3;
    ImageView imageView4;

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

        imageView3 = (ImageView) findViewById(R.id.imageView3);
        imageView4 = (ImageView) findViewById(R.id.imageView4);

    }

    public void onButton1Clicked(View v){
        index +=1;
        if(index>1){
            index=0;
        }
        if(index==0){
            imageView3.setVisibility(View.VISIBLE);
            imageView4.setVisibility(View.INVISIBLE);
        }
        else if(index==1){
            imageView4.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.INVISIBLE);
        }
    }
}

MainActivity.java

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onButton1Clicked"
        android:text="이미지 바꾸기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/dream01" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/dream02" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 activity_main.xml

 

테이블 레이아웃(TableLayout)

격자모양으로 뷰를 배치할 때 사용한다.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2" />
</TableRow>

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4" />
</TableRow>
</TableLayout>

 

 

android:  -> 안드로이드 SDK에 들어있는 속성을 사용하겠다는 접두어

app: -> 우리가 만든 프로젝트에서 지정한 속성을 사용하겠다는 접두어(외부 라이브러리 사용할 때)