안드로이드 xml에서 layout_weight로 비율의 size 확인하는 방법

Question

#안드로이드 #안드로이드스튜디오 #앱개발 #패스트캠퍼스 #android #LinearLayout #orientation #weight #gravity

목차 Show

1. Linear Layout ?
2. gravity 속성과 layout_gravity 속성 차이
3. layout_weight 속성
4. ViewGroup 안에 ViewGroup 포함하기

이전 포스팅에 이어서 공부하는 것이니 계속해서 설정이 같습니다.

잘 모르시면 아래와 같이 코드를 작성해주시면 우측과 같이 나옵니다.

오늘은 컴포넌트들의 정렬방식에 대해 공부하겠습니다.

아래와 같이 코드를 작성하면 가로세로 100dp짜리 TextView가 3개 만들어집니다.

윗부분LinearLayout이 설정에 아래와 같이 쓴 부분을 적지 않더라도

android:orientation="horizontal"

같은방식으로 보이게 되는데, 이것은 기본적으로 안드로이드 스튜디오의 정렬방식이 horizontal이기 때문입니다.

그럼 horizontal을 vertical로 바꾸면 아래와 같이 변하는 것을 예상하실 수 있겠죠.

이번에는 weight 속성에 대해 알아보겠습니다.

weight는 view에 가중치를 주는 속성으로 각각의 컴포넌트들의 크기를 조절해줍니다.

제가 하이라이트 준 부분을 보세요. 가중치를 주는 것은 width와 height중 어느 쪽이든, 혹은 둘다 줄 수 있는데 주는 방법은 원하는 방향을 선택하여 dp값을 '0'으로 바꿔주고, 아래와 같이 써주면 가중치를 1주게 되는 것입니다.

android:layout_weight="1" //1대신 원하는 가중치를 넣으면됨

현재 우리는 나머지 두 TextView가 가로세로 100dp이므로 나머지 부분을 모두 차지하는 모양으로 바뀌는 것을 확인할 수 있습니다.

만약 우리가 모든 TextView에 같은 가중치 1을 주게되면 아래와 같이 가로 폭 디스플레이를 3개의 TextView가 나눠서 똑같이 채우게 되는 것입니다.

두번째 TextView만 가중치를 2로 주면 나머지 두개의 TextView의 두배의 크기로 커지는 것을 확인할 수 있습니다. 여기서 모두 가중치를 2를 주게되면 모든 컴포넌트에 가중치1을 준것과 같은 결과가 나옵니다.

이제는 gravity에 대해 살펴보겠습니다.

gravity속성은 원하는 컴포넌트의 상위 개체에 넣습니다. 우리는 TextView 를 원하는 곳에 배치하고 싶으므로 그 상위개체인 LinearLayout에 gravity속성을 줍니다.

android:gravity="원하는 속성값"

start end bottom

center center_horizontal center_vertical

이와 같이 적용됩니다. 한번 실험해보세요~

안드로이드(Android) 앱을 개발하기 위해서는 반드시 화면이 필요합니다. 그리고 화면에 보이는 구성 요소들은 모두 뷰(View)라고 부릅니다. 우리가 흔히 보는 Button, TextBox, Image 등은 모두 뷰(View)이며 이러한 구성요소들이 모여 하나의 화면을 이루게 됩니다. 그렇다면 뷰(View)는 화면 어디 간에 배치가 되어야 하는데 뷰(View) 자체로는 자신이 어디에 배치되어야 하는지에 대한 정보를 가지고 있지 않습니다. 따라서 뷰(View)를 화면에 배치할 수 있는 무언가가 필요하며 그 역할을 하는것이 뷰 그룹(View Group) 또는 뷰 컨테이너(View Container)입니다. View Group은 연관된 여러 개의 View를 포함할 수 있으며 1개의 View는 반드시 하나의 View Group에 포함되어야 합니다.

안드로이드에서는 ViewGroup을 상속받는 여러 가지 Layout 클래스를 제공하고 있습니다. 각각의 Layout마다 자식 뷰(View)를 배치하는 방법과 사용법이 다릅니다. 이번 포스팅 주제인 LinearLayout을 시작으로 안드로이드에서 제공하는 다양한 Layout들에 대해서 알아보겠습니다.

1. Linear Layout ?

Linear Layout은 View를 수평 또는 수직 방향으로 배치할 수 있는 레이아웃입니다. orientation 속성을 통해 배치방향을 결정할 수 있습니다.

android : orientation = "vertical" : 하위 뷰들을 수직방향으로 배치

android : orientation = "horizontal" : 하위 뷰들을 수평방향으로 배치

orientation 속성

2. gravity 속성과 layout_gravity 속성 차이

LinearLayout의 gravity 속성은 모든 하위 뷰에 대한 중력 방향(배치방향)을 결정합니다. 반면에 layout_gravity 속성은 해당 Group View에 속하는 하위 View들이 가지는 속성으로 ViewGroup의 gravity 속성에 의해서 결정된 원래 자기 자신의 위치에서의 중력 방향을 결정하는 속성입니다. 아래 샘플 예제를 통해서 두 속성의 차이점을 알아보도록 하겠습니다.

<LinearLayout
    android:layout_width="413dp"
    android:layout_height="118dp"
    android:background="@color/colorPrimary"
    android:gravity="bottom"
    android:orientation="horizontal">

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="View 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="View3" />
</LinearLayout>

▼ 먼저 수평 Linear Layout에 Button 3개를 배치한 형태입니다. 여기서는 LinearLayout의 gravity 속성값을 "bottom"으로 지정하였습니다. 아래 결과 화면을 보겠습니다.

android : gravity = "bottom"

▼ 위 설명에서 Linear_Layout의 gravity 속성은 해당 Layout의 모든 하위 뷰들에 대한 중력 방향을 결정한다고 하였습니다. 결과 화면상의 blue 영역이 Linear_Layout의 영역입니다. 해당 Layout의 모든 하위 뷰 (View1, View2, View3)가 bottom 영역에 배치되는 것을 확인할 수 있습니다. 그렇다면 위 샘플예제에서 View1과 View2의 layout_gravity 속성을 각각 "top"과 "center"로 지정해보겠습니다.

<LinearLayout
    android:layout_width="413dp"
    android:layout_height="118dp"
    android:background="@color/colorPrimary"
    android:gravity="bottom"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_weight="1"
        android:text="View 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="View 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="View3" />
</LinearLayout>

layout_gravity 속성 지정

▼ View1은 자신의 상위 View Group의 gravity 속성값인 "bottom"에 의해 View Group 하단에 위치하고 있어야 합니다. 하지만 layout_gravity 속성값을 "top"으로 지정함으로써 View Group의 상단에 위치하도록 설정할 수 있습니다. 정리하면 layout_gravity와 같이 LayoutParams 속성들은 상위 View Group에 자신만의 원하는 기능을 요청할 수 있습니다.

3. layout_weight 속성

자식 뷰에 가중치를 지정해서 그 비율만큼의 자식 뷰의 크기를 지정하는 속성입니다.

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="6">

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Button" />

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

▼ 상위 View Group 하나와 그 밑에 하위 View 3개로 이루어진 화면입니다. 하위 View의 layout_weight를 각각 1,2,3을 부여하였습니다. 이렇게 되면 각 하위 View들은 1:2:3 비율을 가지면서 뷰 크기 비율을 가지게 됩니다.

4. ViewGroup 안에 ViewGroup 포함하기

ViewGroup 안에 ViewGroup이 포함 되는것이 가능합니다. ViewGroup을 마치 View 취급을 하는것이죠. 다른 말로 LinearLayout 안에 LinearLayout을 포함할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

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

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

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button5" />
        </LinearLayout>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

▼ 최상단에 Vertival Linear Layout이 위치하고 하단에 Button 2개와 Horizontal Linear Layout이 배치되었습니다. Horizontal Linear Layout은 다시 button 3개를 포함하고 있는 구조입니다. 위 화면의 레이아웃 구성을 tree 형태로 보면 편합니다.

레이아웃 구조

단말기 화면 결과

▼ 두 번째 Linear Layout이 첫 번째 Linear Layout의 하위 View 취급을 받으면서 포함되어 있는 형태입니다. 이런식으로 ViewGroup도 View 취급을 받으면서 다른 ViewGroup의 하위 View로 포함되는 것이 가능합니다.

안드로이드 xml에서 layout_weight로 비율의 size 확인하는 방법 방법