기능

Relative Positioning

 

뷰의 배치 기준은 다음과 같다.

  • Text의 경우 baseline을 사용할 수 있다.

  • left와 start의 차이는 무엇일까?
    • RTL, LTR

ConstraintLayout은 뷰들의 상대적인 위치로 뷰들을 배치한다.

 

  • 안드로이드의 화면은 ConstraintLayout같은 뷰 그룹이 다른 뷰나 뷰 그룹을 가지고 있는 형태로 만들어진다.
    • 가장 바깥쪽의 뷰그룹이 parent 로 지칭되고, 나머지 요소는 id값으로 구분된다.

뷰의 크기 

  • wrap_content
  • match_constraint (0dp)
  • 크기 지정

배치 방법

  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

Margin

  • Margin은 아는 그대로다.

Gone Margin

안드로이드 ConstraintLayout 개념과 사용법 정복하기 - 개발자 직강 (realm.io)

  • A뷰에 constraint를 같는 B 뷰가 있다. 만약 A뷰의 visiblity가 gone이 되면, B는 어떻게 될까?

Guideline

{"originWidth":1530,"originHeight":798,"style":"alignLeft","width":467,"height":244,"caption":"ConstraintLayout으로 반응형 UI 빌드  

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.55"/>

Bias

app:layout_constraintHorizontal_bias="0.3"
  • 뷰를 치우치게 만들 수 있다.

Ratio

  • 비율을 지정하려면 크기 중 하나를 match_constraint로 지정해야한다

Chains

  • 뷰 간에 상호참조를 할 때 Chain이 생긴다.
  • 가장 왼쪽 혹은 가장 위에 있는 뷰가 ‘헤드’ 뷰이다.

  • 체인 스타일을 지정할 수 있다.

체인을 사용하면, 적절한 배치와 정렬을 할 수 있다.

또한 헤드 뷰를 통해 일관된 속성(마진 등)을 적용할 수 있다.

Depth를 줄이면 좋은 이유

뷰를 그리는 과정

안드로이드에서 뷰가 렌더링되는 과정을 알아보자.

렌더링 프로세스는 3단계로 구성된다.

  1. Measure
    • 뷰 트리를 순회하며 각 ViewGroup과 View의 크기를 결정한다.
    • 뷰그룹의 크기가 측정되면, 자식뷰들도 측정된다.
  2. Layout
    • measure 단계에서 측정된 크기를 사용해서 각 뷰그룹에 있는 자식들의 위치를 결정한다.
    • 이 때도 순회가 일어난다.
  3. Draw
    • 뷰 트리에 있는 각 객체를 Canvas객체로 만들어 GPU에게 그리기 명령을 보낸다.
    • 이전단계에서 구한 크기와 위치가 포함된다.
    • 이 때에도 순회가 일어난다.

각 단계마다 뷰 트리의 순회가 필요하다. 그러므로 뷰가 더 많아지거나, 충첩이 될수록 더 많은 시간과 computation power가 필요하다.

By keeping a flat hierarchy in your Android app layouts, you can create a fast and responsive user interface for your app.

  • DFS 시간복잡도 → O(V+E)?

일반적으로 프레임워크는 단일 패스로 상당히 빠르게 레이아웃 또는 측정 단계를 실행합니다. 그러나 좀 더 복잡한 레이아웃의 경우 프레임워크는 궁극적으로 요소를 배치하기 전에 해결하기 위해 다중 패스가 필요한 계층 구조 부분에서 여러 번 반복해야 할 수 있습니다. 레이아웃 및 측정 반복을 두 번 이상 실행해야 하는 것을 이중 과세라고 합니다.

In Compose

In the View system, was the recommended way to create large and complex layouts, as a flat view hierarchy was better for performance than nested views are. However, this is not a concern in Compose, which is able to efficiently handle deep layout hierarchies.ConstraintLayout

  • View 시스템(xml)에서는 트리구조로 뷰를 관리했지만, Compose에서는 레이아웃이 Flat하게 관리되기 때문에 성능상의 이점이 사라졌다.

성능 및 뷰 계층 구조  |  Android 개발자  |  Android Developers

Understanding the performance benefits of ConstraintLayout

안드로이드에서 사용하는 단위 6가지를 비교해보자.

dp, sp, pt, px, mm, in이 있다.

기본 지식

픽셀(pixel)은 무엇일까?

디스플레이 화면의 최소단위이다. 

https://news.samsungdisplay.com/305

 

 

11.0인치

2388 x 1668 display

264ppi

 

 

 

11.0인치 : 화면의 물리적인 크기를 나타낸다. (대각선 길이)

2388 x 1668 : 화면의 픽셀 수(가로x세로)

264ppi : pixel per inch; 1인치 안에 들어있는 픽셀 수, dpi(dot per inch)라고 쓰기도 한다.

https://news.samsungdisplay.com/305

안드로이드의 크기 단위

dp 

Density-independent Pixel

dp = px * (160dpi / 기기 dpi)

위와 같은 식을 통해 구할 수 있다.

이렇게 해상도가 다른 2개의 휴대폰이 있을 때,
pixel로 크기를 정의하면 휴대폰마다 보이는 크기가 달라지게 된다.

dp는 화면의 해상도에 상관없이 이미지를 같은 비율로 표시할 수 있다.

안드로이드에서는 160dpi 를 기준으로 사용하며, 이때 1dp는 대략 1px과 같다.

화면의 밀도가 160dpi보다 늘어난다면 사용되는 pixel수는 화면의 dpi에 따라 확장된다.

화면에 상관없이 같은 비율로 보이는 단위

sp

텍스트의 크기에 사용되는 단위로 dp 단위와 같다.

다만, 시스템 글꼴 설정에따라 크기가 달라질 수 있는 단위이다.

pt

화면 밀도와 상관없이 모든 기기에서 1pt = 1/72 inch 이다.

72pt = 1 inch

px

화면에 실제 픽셀에 대응되는 단위

in, mm

실제 물리적인 inch, mm 길이

 

 

 

+ Recent posts