안드로이드 Constraint Layout, Linear Layout 어떤걸 써야할까?
안녕하세요 초보개발자 아보카도🥑입니다.
안드로이드를 처음 접하게 되면 레이아웃을 빼놓을 수 없는데요, 오늘은 그 중에서도 많이 쓰이는 Constraint Layout과 Linear Layout을 알아보겠습니다.
어떤 사람은 Linear Layout을 쓰기도 하고 어떤 사람은 섞어서 쓰기도 하고.. 저도 처음엔 많이 헷갈렸는데요. 이번에 정리를 통해 다시 한번 더 보려고 합니다.
Linear Layout
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을 사용한 레이아웃 계층 구조
위 사진은 Linear Layout을 사용한 레이아웃의 계층구조입니다. 중첩된 레이아웃인걸 알 수 있습니다.
같은 레이아웃을 Relative Layout으로 한다면 어떻게 될까요?
위 사진과 같이 중첩되지 않고 평평한 구조로 바뀐 걸 알 수 있습니다. 더 나은 어플리케이션을 위한 구조로 됐어요!
Linear Layout보다 낫다는 건 알았는데.. 부족한게 뭘까요 ???
Constraint Layout은 계층구조를 평평하게 해줘 성능과 효율을 높여주는데요, 대표적으로 비교하는 게 Relative Layout입니다.
둘은 닮았지만 Constraint Layout이 1. 더 유연하고 2. Layout Editor와 함께 쓰기 쉬워요.
1. 더 유연하다는 것은, 세분화된 많은 제약(constraint)을 통해 유연한 레이아웃을 만들어줍니다.
- Centering positioning and bias
- Chains
대표적으로 이런 뷰 사이의 제약들이 다른 레이아웃으로 감싸 줄 필요 없이 뷰 연결을 완성해줍니다.
2. 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
˙참고자료
Android ConstraintLayout developer.android.com/training/constraint-layout
Android LinearLayout developer.android.com/guide/topics/ui/layout/linear