1. 레이아웃

안드로이드는 눈에 보이는 것이 있다.

viewgroup 와 view라고 부르는 것이 있다.

view는 버튼과 텍스트상자 등, 요소를 의미하고

viewgroup는 view를 담는 그릇, 즉 레이아웃을 의미한다.

레이아웃은 크게 네 가지가 있다. Linear, relative, grid, constrait.

 

1. Linear 레이아웃.

레이아웃 중 가장 기본적인 것으로, 요소를 그냥 위에서 아래로 쭉 배치한다.

(크기에 관계없이 아래로 쭉 배치된다)

물론 배치를 옆으로 시키는 것도 가능하다.

orientation 설정을 이용해,

 android:orientation="horizontal"

이 값을 추가하면 옆으로 이동된다.

물론 값은 수직이 기본이다.

 android:orientation="vertical"

 

이제 요소의 크기를 변경해보자.

1. 길이, 높이 변경

android:layout_width, android:layout_height

보자마자 알겠지만, 길이와 높이를 변경한다. 일반적으로 값을 넣게 될 경우

다음과 같이 단위가 등장하는데, 보통 크기와 높이에는 dp단위를 사용한다.

혹은, 부모 레이아웃이나 내부 요소에 맞추는 방식도 있는데, 부모 레이아웃에 맞출때는 "match-parent", 자식 요소에 맞출때는 "wrap-content" 값을 사용한다.

 

2. layout-weight

요소가 수직이나 수평정렬(orientation)일 때 레이아웃 전체를 채우는 방식이다. 예시를 보자.

 

<?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/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="10"/>

    <Button
        android:id="@+id/button9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="10"/>

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


</LinearLayout>

<?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/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="20"/>

    <Button
        android:id="@+id/button9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="10"/>

    <Button
        android:id="@+id/button10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="5"/>


</LinearLayout>

 

다음과 같이 요소의 크기가 정해진 것이 있으면, 그 크기를 선으로 설정하고 그 나머지 공간을 비율을 맞추어 채우는 방식이다. 이 때, 정해진 값이 없다면 전체 레이아웃을 다음과 같이 비율로 채워 넣는다.

 

 

요소를 정리하는 방식은 두 가지 중 하나를 쓴다.

1. gravity

요소 내부의 위치를 지정할 때 사용한다.

    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center_vertical"
        android:layout_weight="20"/>

다음과 같이 gravity를 주면 버튼 내부 요소인 텍스트의 위치가 변화한다.

 

 

2. layout-gravity

레이아웃 요소의 위치를 변화한다.

 

    <Button
        android:layout_gravity="center"
        android:id="@+id/button8"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button" />

 

 

2. Relative Layout

여러 컴포넌트와 관계를 가지며 길이를 만드는 레이아웃이다.

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

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

윗 버튼을 보면 윗 버튼은 아래 버튼에게 above를 통해, 아래 버튼은 alignParentBottom 속성을 통해 각 관계를 가진다.

 

단, relative layout은 주의사항이 있다.

관계를 주지 않을 경우, 다음과 같이 요소가 다른 요소에 의해 묻힐 수 있다. 따라서, 이렇게 margin을 주어 크기가 따로따로 지정된 경우는 보통 따로 레이아웃으로 묶은 후, 레이아웃과의 관계를 맺도록 한다.

<?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: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_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="top menu1" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn1"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:text="top menu2" />

</RelativeLayout>

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

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


</RelativeLayout>

 

3. constraint layout

제약 레이아웃으로, 각 요소들간에 상호 연결을 한다. 이 때 relative layout과 다른 점이, 

1) relative layout과 다르게 여러 view를 묶어 view group을 만들 필요가 없다.

2) 전통적 레이아웃과 다르게 레이아웃의 depth가 없다.

design 탭에서 보면, relative layout과 다르게 직선이 아니라, 용수철 형태로 요소들끼리 관계하고 있음을 확인할 수 있다.

관계를 하는 명령어는 다음과 같다.

app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline1"
app:layout_constraintStart_toEndOf="@id/name"
app:layout_constraintEnd_toStartOf="@+id/follower"

앞에는 관계를 시작할 요소, 뒤에는 연결되는 요소를 의미한다.

즉,

아래의 그림 이미지가 위의 가이드라인과 관계를 한다 가정했을 때,

관계를 시작하는 이미지의 위(top)이 가이드라인과 연결된다(horizental 가이드 라인은 항상 top이다.). 따라서, constraintTop_toTopOf가 된다.

 

또, constraint 같은 경우는 체인으로 묶여서 하나의 요소처럼 움직이기도 한다. 이렇게 체인으로 묶었을 때의 가장 큰 장점은, 우리가 jsp나 css할 때 사용할 때 justify_content_between 같은 배치를 쉽게 사용할 수 있다는 점이다. 이를 가능하게 하는게, vertical(horizental)_chainStyle이다.

 

1)spread

        app:layout_constraintHorizontal_chainStyle="spread"

 

2)packed

        app:layout_constraintHorizontal_chainStyle="packed"

 

 

3)spread_inside

        app:layout_constraintHorizontal_chainStyle="spread_inside"

다음과 같이 버튼의 배열을 쉽게 제어 가능하다.