1) 대표적인 레이아웃 살펴보기

들어가기 전에

​

지금까지 안드로이드 스튜디오가 제공하는 기본 레이아웃인 제약 레이아웃에 대해 알아보았습니다.

그런데 제약 레이아웃 말고는 사용할 수 있는 레이아웃이 없는 걸까요?

여러분이 사용할 수 있는 몇 가지 대표적인 레이아웃이 있습니다.

각각의 레이아웃이 어떤 특징을 가지고 있는지 간단하게 살펴봅시다.

학습 목표

​

1) 대표적인 레이아웃으로는 어떤 것들이 있는지 살펴봅시다.

2) 대표적인 레이아웃이 어떻게 사용될 수 있을지 설명해봅시다.

핵심 단어

​

· 리니어 레이아웃 (LinearLayout)

· 상대 레이아웃 (Relative Layout)

· 프레임 레이아웃 (Frame Layout)

학습하기

[출처] 부스트코스 안드로이드 프로그래밍

안드로이드 스튜디오에는 이렇게 다양한 레이아웃들이 존재하는데요.

​

그중 활용도가 높은 레이아웃들을 골라보면,

리니어 레이아웃(LinearLayout), 상대 레이아웃(RelativeLayout), 프레임 레이아웃(FrameLayout) 이 있습니다!

리니어 레이아웃 사용 방식

리니어 레이아웃(LinearLayout)을 사용하기 위해서는 orientation(방향) 속성에 따라

뷰들을 아래쪽으로 추가할 것인지(Vertical), 오른쪽으로 추가할 것인지(Horizontal) 를 결정해야 합니다.​

​

orientation(방향)은 리니어 레이아웃의 필수 속성이라는 뜻이죠!

​

또한, 레이아웃 안에는 또 다른 레이아웃을 넣을 수 있기 때문에

Horizontal 속성을 가진 리니어 레이아웃 안에 Vertical 속성의 리니어 레이아웃을 추가하여

복잡한 형태의 화면도 쉽게 만들 수 있답니다!

상대 레이아웃 사용 방식

상대 레이아웃은 제약 레이아웃과 상당히 비슷합니다.

​

상대 레이아웃은 제약 레이아웃이 나오기 전에 많이 사용되었던 레이아웃인데요.

따라서 기능적인 면에 있어 상대 레이아웃은 제약 레이아웃에 비해 제한적이라고 볼 수 있습니다.

​

상대 레이아웃도 제약 레이아웃처럼 ​다른 뷰와의 관계를 이용하여 사용할 수 있는데요.

​

(1) 부모 레이아웃과의 관계

(2) 다른 뷰와의 관계

​

부모 레이아웃이나 다른 뷰와의 상대적인 위치로 화면을 구성하는 것이 상대 레이아웃의 특징​​이랍니다!

프레임 레이아웃 사용 방식

프레임 레이아웃은 한 번에 하나의 뷰만 보여주는 것이 큰 특징입니다.

여러 개의 뷰를 추가한 경우, 나머지 뷰들은 아래에 감춰 두었다가 필요할 때 다시 위로 올려 보여줍니다.

​

이렇게 화면 전환의 효과가 생기게 되는거죠.

​

나중에 보게 될 부분 화면(Fragment)을 만들 때 굉장히 유용한 레이아웃이랍니다!

테이블 레이아웃 사용 방식

테이블 레이아웃은 말 그래도 격자 형태로 뷰들을 보여주는 레이아웃입니다.

달력이나 갤러리 등의 화면을 구성할 때 유용하겠죠?

[출처] 부스트코스 안드로이드 프로그래밍

눈에 보이는 뷰의 테두리 선을 기준으로 바깥쪽을 마진(Margin), 안쪽을 패딩(Padding)이라고 합니다.

따라서 뷰의 영역에는 뷰 외에도 뷰의 마진(Margin)까지 포함된답니다!

뷰에는 background 속성이 있어서 다양한 배경색을 설정할 수 있는데요.

​

배경색은 기호 ​# 뒤에 ARGB(Alpha Red Green Blue)를 기준으로 16진수 두 자리씩을 할당하여 표현합니다.

처음 알파값은 투명도를 뜻하고 ff이면 완전히 불투명한 것​​, 00이면 완전히 투명한 것을 말합니다.

​

예를 들어, 배경색을 다음과 같이 설정한다면

투명도 0%의 완전히 빨간 배경의 뷰가 보이게 됩니다.

​

뿐만아니라, background 속성으로 배경 이미지도 설정할 수 있답니다!

생각해보기

​

1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요?

​

gravity 속성이나 weight 속성 등을 잘 활용한다면 비효율적이더라도 원하는 화면의 대부분은 만들 수 있을 것입니다. 그러나 기기들은 다양한 해상도를 가지고 있다는 것을 고려하여 화면을 구성해야 할 것입니다.

​

그리고 리니어 레이아웃으로 뷰를 중첩시키는 것은 불가능합니다.

다음 포스팅에서는 리니어 레이아웃(LinearLayout)에 대해 자세히 알아보도록 할게요!