-->
728x90

[Android]

Layout / View Group의 종류 1. Linear Layout 

 

* 목표 : View와 ViewGroup의 정의, LinearLayout의 사용법에 대해 알아보자.

 

안드로이드 화면에서 유저와 터치 등을 통해 상호작용하는 것들을 View라고 한다.

예를 들면 글자를 보여주는 TextView, 이미지를 보여주는 ImageView, 누르는 Button 등..

각 View 들은 View Class를 상속받아 사용해야 하며 View는 단독으로 사용할 수 없다.

반드시 View Group / View Container를 통해 화면에 나타난다. View Class를 상속받는 ViewGroup 역시 다양한데 

수직, 수평으로 위젯을 배치하는 LinearLayout, 제약을 통한 ConstraintLayout, 상하좌우 관계를 통해 배치되는 RelativeLayout, 중첩으로 배치되는 FrameLayout 등.. 종류만 해도 수십 가지다.

제목은 Layout의 종류라고 했지만 View Group의 종류라고 말해야 정확한 셈이다.

오늘은 그중에 가장 많이 사용되는 LinearLayout에 대해 알아보겠다.

 

출처 : 네이버 영어사전

 

Linear의 사전적 정의이다. LinearLayout 또한 속한 View들을 직선으로 배치한다는 점이 동일하다.

수평 혹은 수직으로 배치한다는 점에서 유저가 보기에 매우 직관적이며, 사각형의 안드로이드 화면에 가장 적합한 형태라고 볼 수 있다. 관련된 속성은 orientation의 vertical, horizontal이다. 다음의 코드 예제를 보며 확인해보자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/design_default_color_error"
        android:text="텍스트뷰1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:text="텍스트뷰2"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_bright"
        android:text="텍스트뷰3"
        />


</LinearLayout>

좌 : android:orientaion="horizontal" , 우 :android:orientaion="vertical"

최상위 View Group은 LinearLayout으로 설정했고 orientation속성을 따로 했다. 따라서 그림과 같이 배치된다. 

width와 height 값에 wrap_content를 준 것은 View의 content 크기만큼을 너비와 높이로 잡겠다는 뜻이다. match_parent로 하면 부모 ViewGroup의 크기로 잡힌다.

근데 여기서 내가 만약 각 View의 크기를 동일한 비율로 주고 싶다면? 그러면 가중치(Weight)를 이용하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/design_default_color_error"
        android:text="텍스트뷰1"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:text="텍스트뷰2"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_bright"
        android:text="텍스트뷰3"
        />


</LinearLayout>

각 TextView의 너비를 0dp로 설정하고 android:layout_weight를 1로 설정했다.

에뮬레이터를 태블릿 크기로 설정해놔서 ㅜ 돋보기를 주고싶누..

그럼 그림과 같이 같은 1:1:1의 비율로 View가 배치된다.

만약 화면의 반만 1:1:1로 배치하고 나머지 반을 여백으로 남기고 싶다면...? 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="6">


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/design_default_color_error"
        android:textSize="25sp"
        android:text="텍스트뷰1"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:textSize="25sp"
        android:text="텍스트뷰2"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_bright"
        android:textSize="25sp"
        android:text="텍스트뷰3"
        />


</LinearLayout>

그 사이 글자크기를 키웠다능..

바로 weightSum 속성을 부모 ViewGroup에 주면 된다. 현재 가중치의 합이 6이고 각 TextView에 1씩 배분했으니 나머지 가중치 3의 여백을 갖게 되는 것이다. (이해가 안된다면 실습뿐이다)

 

 

사실 LinearLayout은 이 것만 알면 된다.. 나머지는 이를 통한 응용일 뿐이다. 응용 샘플 하나 보는 것으로 오늘 포스팅을 마무리하겠다.

 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">

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

        <LinearLayout
            android:id="@+id/customer_linear1"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginTop="15dp"
            android:layout_weight="1">

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="1"
                android:textSize="30sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="2"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="3"
                android:textSize="24sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/customer_linear2"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginTop="15dp"
            android:layout_weight="1">

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="4"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="5"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="6"
                android:textSize="24sp"
                android:visibility="invisible" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/customer_linear3"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginTop="15dp"
            android:layout_weight="1">

            <Button
                android:id="@+id/bn_search_customer"
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="7"
                android:textSize="24sp" />

            <Button
                android:id="@+id/bn_manage_customer"
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:padding="30dp"
                android:text="8"
                android:textSize="24sp" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:orientation="vertical">

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

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="1"
                        android:textSize="30sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="2"
                        android:textSize="24sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="3"
                        android:textSize="24sp" />
                </LinearLayout>

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

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="4"
                        android:textSize="24sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="5"
                        android:textSize="24sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="5"
                        android:textSize="24sp" />

                </LinearLayout>

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

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="7"
                        android:textSize="24sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="8"
                        android:textSize="24sp" />

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="15dp"
                        android:layout_weight="1"
                        android:padding="30dp"
                        android:text="8"
                        android:textSize="24sp" />

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>
</ScrollView>

 

<참고자료>

developer.android.com/reference/android/view/ViewGroup

 

반응형

'Mobile > 🐸Andorid' 카테고리의 다른 글

[Android] firebase 연동 (최신버전)  (2) 2022.03.22
[Android] Package, Project, Module 이름 바꾸기  (4) 2021.01.07
[Android] Layout / View Group의 종류 2. Frame Layout  (1) 2020.12.11
[Android] Activity와 Fragment  (2) 2020.12.09
[Android] 배경(XML)에 투명도(Opacity) 적용  (4) 2020.11.24

+ Recent posts

티스토리툴바