안드로이드_레이아웃

View

화면에 나타나는 모든 요소로, 버튼, 텍스트 등이 View에 속한다.

눈에 보여야하기에 필수 속성으로는 Width(너비)와 Height(높이)가 있다.

 

View Group

여러 View들을 포함하고 있는 것을 말한다.

View Group은 View의 자식 컴포넌트로, View의 속성을 상속 받는다.

View와 View Group의 관계는 다음과 같이 나타낼 수 있다.

 

View-ViewGroup 상속관계

Widget

View 중에서 화면에 표시할 수 있는 것을 말한다.

눈에 보이는 것인 TextView, Button 등이 Widget에 속한다.

 

Layout

View 중에서 다른 View를 담을 수 있는 것을 말한다. Widget과 다르게 눈에 보이지 않고,

Layout은 View이기 때문에 Layout 안에 Layout을 담을 수 있다는 특징이 있다.

 

Widget, Layout, ViewGroup, View 관계

 

 

 

---

 

 

 

View의 크기

 - Box: View가 차지하는 크기

 - Margin: Border 바깥쪽의 여백

 - Border: View의 테두리

 - Padding: Border 안쪽의 여백

 

 

 

 

Layout의 종류

 

 - ConstraintLayout

제약조건으로 View들의 위치를 결정하는 레이아웃으로, 연결점과 연결선이 제약조건이 된다.

Parent 뿐만 아니라 형제 View들과의 관계 정의를 통한 레이아웃 구성도 가능하다.

 

 - LinearLayout

View들을 수직으로 쌓거나, 수평으로 나란히 배치할 수 있다.

LinearLayout의 Common Attributes > orientation을 vertical로 설정하면 View들을

수직으로 쌓을 수 있고, horizonta로 설정하면 수평으로 나란히 배치할 수 있다.

 

 

LinearLayout-vertical

위 사진은 vertical LinearLayout을 적용하고, 보라색 버튼의 layout_width는 wrap_content,

나머지 두 버튼은 match_paren를 적용했을 때의 모습으로, 버튼들이 수직으로 쌓인 것을 확인할 수 있다.

주의할 것은, 보라색 버튼 오른쪽의 빈 공간에는 다른 View가 위치할 수 없다는 점이다.

이미 보라색 버튼이 수직으로 나뉘어진 공간을 차지하고 있기 때문이다.

 

 

LinearLayout-horizontal

위 사진은 horizontal LinearLayout을 적용하고, 모든 버튼의 layout_width를 wrap_content로 적용했을 때의 모습으로, 버튼들이 수평으로 나란히 배치된 것을 확인할 수 있다.

각 버튼은 parent의 위부터 아래까지, 버튼 너비만큼의 공간을 차지한다. 따라서 배치된 버튼 아래 또는 위에 새로운 버튼을 만드는 등의 동작은 할 수 없다.

 

 

LinearLayout-horizontal

위는 horizontal LinearLayout에서 보라색 버튼의 layout_width를 match_paren로 적용한 경우인데, 보라색 버튼의 너비가 화면을 채우고 있어 다른 버튼이 보이지 않게 된다. 이와 같은 상황을 주의해야 한다.

 

View의 위치를 변경하고 싶거나, View의 text의 위치나 크기를 변경하고 싶은 경우, 해당 View의 Attribute를 통해 해결할 수 있다. layout_width나 layout_heigh를 0dp로 두고, weight(가중치)를 설정하면 비율에 맞춰 너비와 높이를 설정할 수 있다.

 

 - RelativeLayout

레이아웃 안의 View들이 서로 간의 상대적인 위치 관계에 따라 최종 표시될 영역을 결정한다.

배치하고 싶은 View와 기준이 되는 View 사이의 below, above 설정을 통해 적용할 수 있다.

 

 - FrameLayout

여러 개의 View가 중첩되어 있을 때, 하나의 View만 보이게 한다.

 

FrameLayout

위 사진은 FrameLayout을 적용하고, 노란 별 이미지(imageView3)과 회색 별 이미지(imageView4)를 F자식 View로 넣었을 때, 회색 별 이미지만 보이는 것을 확인할 수 있다.

 

 - TableLayout

엑셀 시트처럼 가로세로 격자가 몇 개 만들어져야 하는지 설정해서 그 안에 View를 넣는 방식으로 동작하는데, 자유롭지 못하기 때문에 많이 사용되지 않는다.