레이아웃의 종류

 

서론

---

안드로이드에서 Activity를 구성하는것은 버튼, 텍스트뷰와 같은 View들이다.

그런데 이러한 View들은 혼자서는 화면에 배치할 수 없고,

ViewGroup에 포함된 상태로 위치가 결정되어야 화면에 배치할 수 있다.

 

또한 여기서 ViewGroup도 View에 포함되기 때문에 ViewGroup안에 ViewGroup이 포함될 수 있다.

View와 VIewGroup에 대해서는 아래의 글에서 설명해 놓았으니 참고하시길 바란다.

https://angangmoddi.tistory.com/256

View와 ViewGroup

이번 글에서는 ViewGroup인 레이아웃(Layout)의 종류에 대해서 알아보도록 하자.

 

레이아웃(Layout)의 종류

---

1. 컨스트레인트 레이아웃(ConstraintLayout)

가장 먼저 알아볼 ConstraintLayout은 안드로이드 스튜디오에서 액티비티

생성 시 xml파일에서 기본(Default)으로 설정되어있는 레이아웃이다.

ConstraintLayout은 화면에 배치되는 View(위젯)사이에 제약조건(Constraint)을 설정하여

각 View들을 화면에 배치하는 레이아웃이다.

 

말만 들어선 어떤것인지 잘 모르겠는데, 실제로 다루어보도록 하자.

 

가장 먼저 위에서 만든 xml파일 화면에 버튼을 하나 배치해주도록 한다.

그리고 버튼을 클릭하면 버튼 상하좌우에 동그라미가 보이는데, 이것을 핸들러(Handler)라고 한다.

이 핸들러를 드래그하여 다른 View나 자신을 포함한 레이아웃(ConstraintLayout)의

가장자리에 가져다 놓으면 해당 View와 연결된다.

View와 연결하면 위와 같이 지그재그 모양의 선이 생기게되는데,

이 선을 컨스트레인트(Constraint)라고 하고 이 선과 연결되는 부분을 앵커 포인트(Anchor Point)라고 한다.

View의 Attributes에 위와 같은 Constraint 편집기가 표시되는데, +를 누르면 해당 View와

가장 가까이있는 View에 Constraint를 생성하고, 연결된 Constraint를 클릭하면 이를 제거하한다.

그리고 연결된 Constraint옆에 있는 값을 수정하여 해당 View와의 거리를 수정할 수 있다.

그 바로 아래에있는 Bar는 Bias라고 하는데,

View의 Constraint가 좌우로 연결되어 있을 때 비율을 조절하기 위해 사용한다.

2. 리니어 레이아웃(LinearLayout)

LinearLayout은 포함하고있는 View들을 가로 또는 세로의 한 줄로 배치하기 위해서 사용한다.

이는 LinearLayout의 속성인 orientation을 통해 가로(horizontal)또는 세로(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:orientation="vertical"
    tools:context=".ExamActivity">

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

LinearLayout에 배치된 View들은 layout_weight이라는 속성을 통해서 각각의 크기를 비율로 가질 수 있다.

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

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

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

위와 같이 코드를 작성하면 버튼들이 1:1:1의 비율로 화면에 배치된다.

또한 layout_weight속성을 설정하는 View는 height(horizontal의 경우 width)를 0dp로 설정해준다.

3. 프레임 레이아웃(FrameLayout)

위의 두 ConstraintLayout과 LinearLayout과는 달리 FrameLayout은 포함하는 View들의

위치를 결정하는것이 아니라 View들을 겹쳐서 보여주거나 단일 View를 표시할 때 사용한다.

레이아웃 중 처리 속도가 가장 빠르기 때문에 단순한 형태로 사용할 경우 성능이 가장 좋다.

위와 같이 두 View들을 겹쳐서 사용할 수 있다.

4. 테이블 레이아웃(TableLayout)

TableLayout은 포함하는 View들을 행과 열을 가진 표의 형태로 배치하는 레이아웃이다.

TableLayout을 사용할 경우 행(Row)를 생성하여 그곳에 각각의 VIew(열/Colunm)을 하나씩 배치한다.

행을 추가하기 위해선 TableRow를 선언해주고, 열의 경우 특별한 작업 없이 View를 추가해주면 된다.

<?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"
    tools:context=".ExamActivity">

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:srcCompat="@tools:sample/avatars" />

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

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </TableRow>

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

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

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

    </TableRow>

</TableLayout>

이때 TableRow들의 열(Column)의 갯수는 가장 많은 열을 포함한 행과 맞춰진다.

또한 행의 높이는 해당 행에서 가장 긴 높이를 가진 View와 맞춰지며,

열의 너비도 이와 동일하게 가장 긴 너비를 가진 View와 맞춰진다.

 

TableLayout을 사용해 계산기 화면을 만들어보도록 하자.

<?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:background="@color/black"
    android:shrinkColumns="*"
    tools:context=".ExamActivity">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"
        android:gravity="center_vertical|right"
        android:textSize="30sp"
        android:background="@color/white"
        android:text="0" />

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="7" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="8" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="9" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="2"
            android:textSize="30sp"
            android:text="DEL" />
    </TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="4" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="6" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="+" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="-" />
    </TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="*" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="/" />
    </TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:id="@+id/button21"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="0" />

        <Button
            android:id="@+id/button22"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="." />

        <Button
            android:id="@+id/button23"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:layout_margin="2dp"
            android:textSize="30sp"
            android:text="=" />
    </TableRow>

</TableLayout>