Android

[Android] View(뷰), Widget(위젯), Layout(레이아웃)

JunsuKim 2022. 8. 7.

728x90

모든 애플리케이션의 기초가 되는 것은 View, Widget, Layout이다.

이들에 대해 알아보자.

View(뷰)

View란 무엇인가? 단순 해석해보면 "보다"이다.

말그대로 View는 우리가 볼 수 있는 화면을 구성하는 모든 구성 요소이다.

네이버 웹툰을 예시로 들어보겠다.

네이버 웹툰은 각각의 웹툰들과, 광고, 버튼 등으로 이루어져 있다. 이들은 모두 View다.

이처럼 사용자가 눈으로 확인할 수 있는 아이콘, 이미지, 텍스트, 버튼 등등 모두 View라고 할 수 있다.

그렇다면 눈에 보이는 것만 뷰일까? 아니다. 눈에 보이지 않는 뷰도 있다.

보이는 뷰는 Widget이라 하며, 보이지 않는 뷰는 Layout이라 한다.

뷰는 뷰 자체로도 존재할 수 있지만, 뷰 안에 또 다른 n개의 뷰가 들어갈 수 있다.

이를 View Group(뷰 그룹)이라 한다. View Group 또한 한 개의 뷰가 되어 다른 뷰 안에 들어가 새로운 View Group을 만들 수 있다.

Widget(위젯)

위에서 눈에 보이는 뷰가 있고, 보이지 않는 뷰가 있다고 했다.

이처럼 가시성(visibility)에 따라 뷰를 구분할 수 있다.

위젯의 종류는 다양하다.

안드로이드 스튜디오에 들어가보면 위젯의 종류가 다양한 것을 확인할 수 있다.

이들 중 가장 자주 쓰이는 몇 가지의 역할을 알아보자.

TextView: 텍스트를 보여준다.
ImageViwe: 이미지를 보여준다.
Button: 말 그대로 버튼을 나타낸다.
ImageButton: 이미지가 있는 버튼이다. 위에서 예시로 들은 네이버 웹툰을 보자면 각각 웹툰들이 이미지 버튼에 해당한다.

위는 극히 일부의 위젯이다. 더 다양한 위젯이 많으니, 필요할 때 각 역할에 적합한 위젯을 사용하면 된다.

Layout(레이아웃)

눈에 보이지 않는 뷰는 레이아웃이다.

레이아웃은 화면의 구조를 잡아주는 일종의 틀이라고 생각하면 된다.

레이아웃의 종류들을 알아보자.

1. ConstraintLayout

ConstraintLayout은 복잡한 레이아웃을 단순한 계층 구조를 이용하여 표현할 수 있는 레이아웃이다.

현재 안드로이드 스튜디오에서 새 프로젝트를 만들 때, 디폴트로 지정해주는 레이아웃이기도 하다.

ConstraintLayout은 레이아웃 구성 시 뷰, 위젯의 위치, 크기를 유연하게 조절할 수 있게 해준다.

어떠한 방식으로 레이아웃 배치의 유연함을 제공할까?

Constraint를 해석해보면 제약이다. 따라서 제약 레이아웃이라고도 불린다.

위 그림의 연결선(제약)으로 레이아웃에 배치되는 뷰들에 여러 제약을 적용하여 각 뷰의 위치와 크기를 결정한다.

이러한 제약들은 부모 레이아웃에 연결할 수도 있고, 다른 뷰들에 연결될 수도 있다.

이처럼 제약을 주는 것을 코드로 짜려면 layout_constraint로 시작하는 구체적인 제약 조건이 명시되는 속성을 쓰면 된다.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="85dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="153dp"
        android:text="Android"
        android:textSize="50sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Study"
        android:textSize="50sp"
        tools:layout_editor_absoluteX="105dp"
        tools:layout_editor_absoluteY="296dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. LinearLayout

LinearLayout은 수직(Vertical) 또는 수평(Horizontal)의 단일 방향으로 모든 하위 요소를 정렬하는 레이아웃이다.

ConstraintLayout처럼 유연하진 않지만, 제약사항을 고려하지 않아도 되고, 뷰와 위젯들을 간편하고 질서있게 배치할 수 있다는 장점을 가지고 있어, 직관적이고 깔끔한 화면 구조를 만들 수 있다.

예를 들면 다음과 같다.

리니어 레이아웃도 뷰이기 때문에, 레이아웃 안에 레이아웃을 넣을 수 있다.

따라서 다음과 같은 리니어 레이아웃 형태도 만들 수 있다.

3. RelativeLayout

RelativeLayout은 규칙 기반 레이아웃이라고도 한다.

상대 위치에 하위 뷰를 표시하는 뷰 그룹으로, 각 뷰의 위츠는 동위 요소(다른 뷰의 왼쪽 또는 아래)에 상대적이거나 상위 영역(맨 아래, 왼쪽 또는 중앙으로 정렬됨)에 상대적인 위치로 지정될 수 있다.

이처럼 RelativeLayout은 단순히 "이 TextView 밑에 이 Button이 있어!" 또는 "TextView1 왼쪽에 TextView2가 있어!"와 같은 정보만으로 완성될 수 있다.

하지만 내가 안드로이드를 시작한지 얼마 되진 않았다지만, 아직까지 사용했던 적은 없다.

대체로 잘 사용되지 않는 레이아웃인듯 싶다.

4. Frame Layout

FrameLayout은 단일 항목을 표시하기 위해 화면의 영역을 차단하도록 설계되어있다.

Frame은 해석해보면 액자이다.

액자에 여러 개의 사진을 겹쳐넣었다 생각해보자. 그렇다면 맨 위에 있는 사진만을 볼 수 있을 것이다.

FrameLayout 또한 여러 뷰와 위젯을 넣을 수 있지만, 이 중 사용자가 볼 수 있는 뷰는 가장 위에 있는 뷰와 위젯이다.

안드로이드에서는 여러 뷰를 동시에 표시해야하는 명확한 의도가 없다면, FrameLayout은 오직 하나의 자식(Child) 뷰와 위젯만을 표시하게 하도록 권고한다.

어찌보면 딱 하나의 뷰와 위젯만을 표시하므로 필요없어 보이기도 한다.

그렇다면 FrameLayout은 언제 사용하는 것이 좋을까?

FrameLayout은 화면 전환을 할 때 유용하게 사용된다.