안드로이드 Constraint Layout, Linear Layout 어떤걸 써야할까?

안녕하세요 초보개발자 아보카도🥑입니다.

 

안드로이드를 처음 접하게 되면 레이아웃을 빼놓을 수 없는데요, 오늘은 그 중에서도 많이 쓰이는 Constraint Layout과 Linear Layout을 알아보겠습니다. 

 

어떤 사람은 Linear Layout을 쓰기도 하고 어떤 사람은 섞어서 쓰기도 하고.. 저도 처음엔 많이 헷갈렸는데요. 이번에 정리를 통해 다시 한번 더 보려고 합니다.  

 

Linear Layout 

 

https://codelabs.developers.google.com/codelabs/kotlin-android-training-linear-layout/index.html?index=..%2F..android-kotlin-fundamentals#3

 

Linear Layout은 두가지 방향으로 되어 있고 "어느" 방향으로 뷰 층을 쌓을 것인지가 중요합니다.

 

기본 설정은 Horizontal(가로)로 되어 있으며 Vertical(세로)로 변경하는 설정을 해줘야 합니다. (horizontal로 해도 코드 추가해주세요 !)

 

한줄만 추가!

 

Linear Layout은 복잡하지 않은 레이아웃을 구성할 때 사용합니다. 

 

사진처럼 간단한 페이지를 구성할 때는 Linear Layout을 사용하는 게 좋습니다.

 

하지만 복잡한 페이지는 Linear Layout을 여러 번 사용하고, 중첩된 레이아웃으로 인해 레이아웃 처리 시간이 늘어나게 됩니다.

결국엔 어플리케이션을 무겁게 만들어요

 

어플리케이션의 효율을 높이고 성능도 높이기 위해 적절한 레이아웃을 사용해야 합니다.

 

효율적인 레이아웃을 위한 자세한 설명은 ▼

developer.android.com/topic/performance/rendering/optimizing-view-hierarchies

 

 

 

Constraint Layout과 부족하지만 좋은친구 Relative Layout

 

Linear Layout 공식문서를 가면 Constraint Layout을 권장하고 있는데요, 도대체 왜 뭐가 더 좋은걸까요 ???

 

먼저 Constraint Layout을 알기 전에 Relative Layout이라는 친구를 기억해주세요.  

 

Relative Layout은 Linear Layout보다 중첩되지 않아서 쓰기 좋았습니다. Constraint Layout이 등장하기 전까진..

 

 

LinearLayout을 사용한 레이아웃 계층 구조

https://developer.android.com/training/improving-layouts/optimizing-layout

위 사진은 Linear Layout을 사용한 레이아웃의 계층구조입니다. 중첩된 레이아웃인걸 알 수 있습니다.

 

같은 레이아웃을 Relative Layout으로 한다면 어떻게 될까요?

 

 

같은 구조 다른 느낌

위 사진과 같이 중첩되지 않고 평평한 구조로 바뀐 걸 알 수 있습니다. 더 나은 어플리케이션을 위한 구조로 됐어요!

Linear Layout보다 낫다는 건 알았는데.. 부족한게 뭘까요 ???

 

Constraint Layout은 계층구조를 평평하게 해줘 성능과 효율을 높여주는데요, 대표적으로 비교하는 게 Relative Layout입니다. 

둘은 닮았지만 Constraint Layout이   1. 더 유연하고     2. Layout Editor와 함께 쓰기 쉬워요. 

 

1. 더 유연하다는 것은, 세분화된 많은 제약(constraint)을 통해 유연한 레이아웃을 만들어줍니다. 

https://developer.android.com/training/constraint-layout

- Centering positioning and bias

- Dimensions constraints

- Chains 

 

대표적으로 이런 뷰 사이의 제약들이 다른 레이아웃으로 감싸 줄 필요 없이 뷰 연결을 완성해줍니다. 

 

 

2. Layout Editor 사용

 

https://developer.android.com/studio/write/layout-editor

xml 파일을 코드로 작성하다보면 레이아웃 속성들이 길어지고 깔끔하지 않을 때가 많은데요. 이럴 때 디자인 탭의 Layout Editor를 사용하면 간단하게 속성을 추가할 수 있습니다.

 

현재 Layout Editor의 비주얼 도구에서 직접 Constraint Layout의 모든 기능을 사용할 수 있으며 코드수정 없이 에디터를 사용해 Constraint Layout으로 레이아웃을 만들 수 있습니다.  

 

 

가장 중요한 것은 구글이 Constraint Layout을 밀어주고 있습니다 🤭 !

빠르게 바뀌는 안드로이드의 가이드에 따라가는 게 좋지 않을까 하는 생각이 듭니다 

 

 

>> 각 레이아웃에 대한 자세한 적용 방법을 구글에서 제공하고 있어요 👍👍👍 

˙Use ConstraintLayout to design your Android views

codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..index#0  

˙Linear layout using the Layout editor

codelabs.developers.google.com/codelabs/kotlin-android-training-linear-layout/index.html?index=..%2F..android-kotlin-fundamentals#0

---

˙참고자료

Android ConstraintLayout developer.android.com/training/constraint-layout

Android LinearLayout developer.android.com/guide/topics/ui/layout/linear