Android / 레이아웃의 종류

레이아웃을 살펴보기 전에 뷰와 뷰그룹의 개념이 잡히지않았다면 아래링크 참조

 

https://swdevelopment.tistory.com/283

Android / 뷰(View)

 

*대표적인 레이아웃 

 

다음은 안드로이드에서 제공하는 대표적인 레이아웃 5가지이다.

레이아웃명	내용
ConstraintLayout(제약 레이아웃)	- 제약조건 기반모델 - 제약조건을 사용하여 화면을 구성하는 방법 - 안드로이드 스튜디오에서 자동으로 설정하는 디폴트 레이아웃
LinearLayout(리니어 레이아웃)	- 박스모델 - 한 쪽 방향으로 차례대로 뷰를 추가하며 화면을 구성하는 방법 - 뷰가 차지할 수 있는 사각형 영역을 할당
RelativeLayout(상대 레이아웃)	- 규칙 기반모델 - 부모 컨테이너나 다른 뷰와의 상대적 위치로 화면을 구성하는 방법 - 제약 레이아웃을 사용하게 되면서 상대 레이아웃은 권장하지 않음
FrameLayout(프레임 레이아웃)	- 싱글 모델 - 가장 상위에 있는 하나의 뷰 또는 뷰그룹만 보여주는 방법 - 여러 개의 뷰가 들어가면 중첩하여 쌓게됨. 가장 단순하지만 여러 개의 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식으로 자주 사용함
TableLayout(테이블 레이아웃)	- 격자 모델 - 격자 모양의 배열을 사용하여 화면을 구성하는 방법 - HTML에서 많이 사용하는 정렬 방식과 유사하지만 많이 사용하지는 않음

!잠깐

레이아웃에는 뎁스가 많으면 많을수록 액티비티가 느려지므로 뎁스를 최소한으로 설계하길 권한다.

 

 

*ConstraintLayout

제약 레이아웃은 제약조건을 기반으로한 모델로서 제약조건을 활용하여 화면을 구성하는 레이아웃이다. 

제약 조건이란 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 뷰의 연결점과 타겟을 연결한다.

안드로이드 스튜디오에서는 제약 레이아웃을 레이아웃의 디폴트로 설정되어 있으며, 아이폰 앱을 개발할 때 맥북에서 Xcode라는 개발도구를 사용하는데 제약 레이아웃은 Xcode에서 화면을 배치할때 사용하는 방식과 비슷한 점을 가지고 있다. 또한 제약 레이아웃은 상대레이아웃하고 유사하면서도 장점을 좀더 가지고 있다. 단, 제약 레이아웃은 제약조건이 충분히 구성되지 않으면 오류가 발생하거나 화면 레이아웃이 원하는 대로 작동하지 않을 수 있다는 단점을 가지고 있어 일각에서는 아직 상대 레이아웃을 사용하는 경우가 있다.

 

제약 레이아웃에서는 연결점과 타겟이 중요하며, 다음은 타겟이 될 수 있는 요소들이다.

• 같은 부모 레이아웃 안에 들어 있는 다른 뷰의 연결점
• 부모 레이아웃의 연결점
• 가이드라인

뷰와 타겟의 연결점이 되는 요소는 다음과 같다.

• 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left), 오른쪽(Right)
• 가로축의 가운데(CenterX), 세로축의 가운데(CenterY)
• 베이스라인(텍스트를 보여주는 뷰인 경우에만 적용)

 

-제약 레이아웃 예제-

<?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:orientation="vertical"
    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:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.588" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.276" />
</androidx.constraintlayout.widget.ConstraintLayout>

제약 레이아웃에서 유의할점은 뷰는 상, 하, 좌, 우 모두 제약조건이 있어야한다. 그렇지않으면 코드에서 에러가 발생하니 유의할 것.

 

 

*LinearLayout

리니어 레이아웃은 박스모델을 사용하며, 뷰가 차지하는 영역을 박스라고 보고 한쪽 방향으로 쌓는 레이아웃이다.

가로 방향은 Horizontal, 세로 방향은 Vertical로 지정하는데 단순히 쌓기만 하면 되므로 아주 쉬운 레이아웃으로 평가받고 있다.

 

-리니어 레이아웃 예제-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text="버튼1" />

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

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="10"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="10"
            android:text="Button" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="10"
            android:text="Button" />
        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="10"
            android:text="Button" />

    </LinearLayout>

    <Button
        android:id="@+id/button6"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text="Button" />


</LinearLayout>

 

 

*RelativeLayout

상대 레이아웃은 규칙을 기반으로 한 모델로서, 부모 컨테이너나 다른 뷰와의 상대적 위치로 화면을 구성하는 방법이 사용되는 레이아웃이다. 상대 레이아웃은 제약 레이아웃이 안드로이드 스튜디오에서 사용되기 전까지 디폴트 레이아웃으로 사용되었으며, 지금은 제약레이아웃을 지향하는 추세이다. 이유는 제약 레이아웃은 상대 레이아웃의 특성을 그대로 가지고 있으면서 더 많은 기능을 제공하기 때문이다. 그래도 아직까지는 실제 앱을 개발할 때 상대 레이아웃이 제야 레이아웃보다 단순하고 이해하기 쉬운 레이아웃이라 많이 사용한다.

 

-렐러티브 레이아웃 예제-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn1"
            android:layout_alignParentTop="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Top Menu" />

        <Button
            android:id="@+id/btn4"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Top Menu2" />

    </RelativeLayout>


    <Button
        android:id="@+id/btn3"
        android:layout_below="@id/top"
        android:layout_above="@id/btn2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Button" />

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

</RelativeLayout>

 

 

*FrameLayout

프레임 레이아웃은 가장 위에 있는 하나의 뷰만 화면에 보여주는 레이아웃이다. 만약 그 안에 여러 개의 뷰나 뷰그룹을 추가했다면 나머지는 그 아래로 중첩되어 쌓여간다. 프레임 레이아웃은 한번에 하나의 뷰만 보여주면서 나머지는 보이지 않게 그 아래에 중첩시켜 숨겨두었다가 그중에 특정뷰를 보이거나 보이지 않도록 하며 손쉽게 뷰를 전환할 수 있으며 사용 방법이 간단하여 자주 사용된다.

 

 

*TableLayout

테이블 레이아웃은 그 안에 들어가는 뷰들을 격자 형태로 만들어 주는 레이아웃으로, HTML에서 사용하는 방식과 유사하여 실용적이지만 제약 레이아웃과 리니어 레이아웃만으로도 충분히 화면 배치가 가능하여 자주 사용하지는 않는다. 때로는 직관적으로 격자 형태를 만들고 싶을 때 테이블 레이아웃을 사용하는 경우도 있다.

 

-테이블 레이아웃 예제-

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    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"
    android:gravity="center">

    <TableRow android:gravity="center">

        <EditText
            android:id="@+id/pt_result"
            android:layout_span="4"
            android:hint="숫자를 입력하시오." />

    </TableRow>

    <TableRow android:gravity="center">

        <Button
            android:id="@+id/num1"
            android:text="1" />

        <Button
            android:id="@+id/num2"
            android:text="2" />

        <Button
            android:id="@+id/num3"
            android:text="3" />

        <Button
            android:id="@+id/btn_add"
            android:text="+" />
    </TableRow>

    <TableRow android:gravity="center">

        <Button
            android:id="@+id/num4"
            android:text="4" />

        <Button
            android:id="@+id/num5"
            android:text="5" />

        <Button
            android:id="@+id/num6"
            android:text="6" />

        <Button
            android:id="@+id/btn_minus"
            android:text="-" />
    </TableRow>

    <TableRow android:gravity="center">

        <Button
            android:id="@+id/num7"
            android:text="7" />

        <Button
            android:id="@+id/num8"
            android:text="8" />

        <Button
            android:id="@+id/num9"
            android:text="9" />

        <Button
            android:id="@+id/btn_multi"
            android:text="*" />
    </TableRow>

    <TableRow android:gravity="center">

        <Button
            android:id="@+id/num0"
            android:layout_span="1"
            android:text="0" />

        <Button
            android:id="@+id/btn_clear"
            android:text="c"
            android:textColor="@android:color/holo_red_dark" />

        <Button
            android:id="@+id/btn_divide"
            android:text="/" />

        <Button
            android:id="@+id/btn_cal"
            android:layout_span="1"
            android:text="="
            android:textColor="@android:color/holo_green_dark" />

    </TableRow>
</TableLayout>