android.view.View 클래스의 특징

seong-hwan Kim

Published in

shDev

8 min readJan 25, 2022

View 클래스의 특징과 View의 위치와 크기를 나타내는 속성에 대해 알아보자

https://developer.android.com/reference/android/view/View

android.view.View

UI 컴포넌트의 기본 구성 요소를 표현하는 클래스. 화면에서 사각형 영역을 차지하며, 뷰를 어떻게 보여줄지와 이벤트 처리에 대한 책임을 갖는다.

Custom View

커스텀 뷰가 필요하다면, 다음 메소드를 사용하여 뷰의 커스터마이징이 가능하다.

Position

뷰는 화면에서 사각형으로 표현된다. 사각형 영역은 뷰의 left와 top 좌표에 해당하는 위치와, width와 height에 해당하는 면적으로 표현되며 단위는 픽셀이다.

뷰는 getLeft와 getTop 메서드를 제공하는데 이 메서드로 뷰의 x 좌표(left)와 y좌표(top)를 얻을 수 있다. 좌표는 부모 뷰에 대해 상대적인 위치로 표현된다. 만약 뷰의 getLeft 메서드가 20을 반환한다면, 해당 뷰가 부모 뷰의 왼쪽 모서리로부터 20픽셀 만큼 떨어진 곳에 위치함을 의미한다.

Size, padding and margins

뷰의 크기는 width와 height로 표현되며, 두 가지 종류의 width와 height 쌍을 가진다.

measuredWidth, Height: 뷰가 자신의 부모 뷰 안에서 얼마나 큰 크기를 차지하고 싶은지 나타내는 속성. 이 속성들은 setMeasuredDemension이 호출된 이후 부터 getMeasuredWidth와 getMeasuredHeight 메소드를 통해 얻을 수 있다.
width, height(known as drawing width, height): layout 과정 이후 뷰가 그려질 때 화면상에서 차지하는 실제 크기. getWidth, Height 메소드로 얻을 수 있다.

실제로 뷰의 면적와 위치를 계산하기 위해서는 뷰의 패딩과 마진이 고려돼야 한다.

Layout

뷰의 레이아웃은 측정과 배치 두 가지 과정으로 처리된다. 측정 과정은 뷰의 measure 메소드에서 구현되어 있고 뷰 트리를 하향식으로 순회하며 수행된다. 배치 과정은 뷰의 layout 메소드에서 구현되어 있고 마찬가지로 하향식으로 수행된다. 이 과정에서 모든 뷰그룹은 측정 과정에서 얻은 정보를 사용하여 자신의 자식들의 위치를 결정해야 한다.

뷰의 measure 메소드가 종료되면, 해당 뷰와 자식 뷰들의 getMeasuredWidth와 getMeasuredHeight에서 반환하는 값이 설정돼야 한다. 뷰의 measuredWidth와 measuredHeight는 부모 뷰에 설정된 제약을 준수해야 한다. 부모 뷰는 자식 뷰의 measure 메소드를 한 번 이상 호출할 수 있다. 예를 들어, 부모 뷰에서는 자식 뷰가 어느 정도의 크기를 원하는지 알아내기 위해 크기에 대한 제약을 명시하지 않고 자식 뷰의 measure 메소드를 호출할 수 있다. 이후 자식 뷰에서 원하는 크기가 너무 크거나 작다면 실제 제약을 명시하여 자식 뷰의 measure 메소드를 호출한다.

측정 단계에서는 두 개의 클래스를 사용하여 뷰의 크기를 전달한다.

`MeasureSpec`

부모 뷰가 자식 뷰에게 요구사항을 전달하는 데 사용되며, 다음 세 모드 중 하나를 사용한다.

UNSPECIFIED: 부모 뷰에서 자식 뷰가 원하는 크기를 얻기 위해 사용됨. 예를 들어, LinearLayout의 경우 UNSPECIFIED 모드의 높이와 240 픽셀의 너비로 자식 뷰의 measure를 호출할 수 있는데, 이는 자식 뷰가 240 픽셀이라는 너비에서 얼마만큼의 높이를 가지길 원하는지 측정하기 위해 사용된다.
EXACTLY: 부모 뷰가 자식 뷰에게 정확한 크기를 강제하기 위해 사용된다.
AT_MOST: 부모 뷰가 자식 뷰에게 가질 수 있는 최대 크기를 알리기 위해 사용된다.

`LayoutParams`

뷰가 얼마만큼의 너비와 높이를 가지고 싶은지 알리기 위해 사용. 다음 세 가지 값 중 하나를 지정할 수 있다.

exact number
MATCH_PARENT: 뷰가 자신의 부모 뷰의 크기만큼 확장되길 원함(부모 뷰의 패딩 고려)
WRAP_CONTENT: 뷰가 자신의 자식 뷰들을 포함할 수 있는 만큼만 확장되길 원함(자신의 패딩 고려)

Properties

뷰는 ALPHA 프로퍼티와 TRANSLATION_X, TRANSLATION_Y 같은 transform과 관련된 프로퍼티를 제공한다. 이 프로퍼티들은 렌더링과 관련된 프로퍼티와 함께 뷰의 persistent state를 설정하는데 사용된다. 또한 이 프로퍼티들은 Animator 기반 애니메이션에도 사용될 수 있다.

Animation

안드로이드 3.0 이후로 뷰의 애니메이션을 적용할 때 android.animation 패키지의 API가 권장딘다. 안드로이드 3.0 이전의 Animation 기반의 애니메이션 api가 단순히 뷰가 화면에 보여지는 방식만 변경하는것과 대조적으로 Animator 기반의 애니메이션 api는 실제로 뷰의 프로퍼티를 변경한다.

뷰의 속성을 변경하지 않고 보여지는 방식만 변경하고 싶다면 Animation 기반의 애니메이션을 사용할 수 있다.

left, x, translationX

뷰에는 좌표를 나타내는 여러 가지 속성이 있다.

left: 부모 뷰가 차지하는 영역의 왼쪽 경계를 기준으로 뷰가 차지하는 사각형 영역이 얼마만큼 떨어져 있는지 나타낸다.
x: 뷰의 x축 좌표값을 나타낸다. left + translationX 와 동일하다.
translationX: 자신의 left 속성에 대해 x 축으로 얼마나 떨어져 있는지 나타낸다.

x 와 translationX의 차이를 간단하게 표현하자면 x의 경우 부모 뷰의 좌측 상단을 0, 0 이라고 했을 때 가로축으로 얼마 만큼 떨어져 있는지 나타내는 속성이며, translationX는 자신의 left 좌표로부터 가로축으로 얼마 만큼 떨어져 있는지 나타내는 속성이다.

뷰의 위치를 이동시킬 때 뷰의 x 속성을 변경하면 부모 뷰의 영역을 기준으로 x만큼 떨어진 곳에 위치하게 된다. 하지만 translationX 속성을 사용한다면 뷰의 left 속성을 기준으로 이동시킬 수 있다. 즉, x를 사용한 이동은 부모 뷰의 영역에 대해 절대 좌표를 사용한 이동이며, translationX를 사용한 이동은 left 속성에 대해 상대적인 이동이라고 볼 수 있다.

뷰는 x와 translationX 속성을 변경하는 세터 메소드를 제공하고 있다. 하지만 여기서 setX를 사용한 x 속성의 변경이 실제로는 translationX 속성의 변경되는 것이다. 즉, 뷰는 x 속성을 저장하는 필드를 가지고 있지 않고 left와 translationX의 조합으로 표현한다.

// View.javapublic float getX() {
    return mLeft + getTranslationX();
}public void setX(float x) {
    setTranslationX(x - mLeft);
}

간단한 예시를 통해 두 속성의 차이를 알아보자.

<FrameLayout
    android:id="@+id/inner_layout"
    android:layout_width="400px"
    android:layout_height="400px"
    android:background="#dddddd"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">    <View
        android:id="@+id/inner_view"
        android:layout_width="200px"
        android:layout_height="200px"
        android:layout_gravity="center"
        android:background="#aaaaaa"/></FrameLayout>

레이아웃 중앙에 위치한 진한 회색 영역의 뷰에 대한 정보를 레이아웃 하단에서 보여주고 있다. 여기서 x 값을 0으로 변경하면 다음과 같이 위치가 변경된다.

x가 0으로 변경되었기 때문에 사각형 뷰의 x축 좌표가 부모 레이아웃의 왼쪽 경계와 일치하는 것을 볼 수 있다. 하지만 실제로는 뷰의 left, top, right, bottom 속성은 변경되지 않고 translationX가 -100으로 변경되었기 때문에 x가 0을 나타내는 것을 알 수 있다.

반대로 translationX를 100으로 변경하면 레이아웃은 다음과 같이 변경된다.