【Android】01_레이아웃과 뷰 배치

이 포스트는 레이아웃과 뷰를 레이아웃 XML에 정의할 때의 방법에 대한 정리입니다. 

 

 

1. 화면 요소 정의 

화면 요소의 정의는 액티비티와 프래그먼트에 연결되는 res/layout/*.xml에서 하면 됩니다. 

안드로이드 스튜디오에서 레이아웃 XML을 열어 보면 좌측 하단에 레이아웃 XML을 "Design"또는"Text"로 표시할 수 있는 토글 버튼이 있습니다. 

 

※ "Text"모드 선택 시  

 XML로 레이아웃과 뷰 요소가 정의되어있는 것을 확인할 수 있습니다. 
익숙해지면 XML코드를 작성하는 게 편하고 빠릅니다만, 처음 공부할 때는 "Design"모드로 앱을 만드는 편이 나은 것 같습니다. 
 

※ "Design"모드 선택 시 

 Desing모드로 작업을 하면 화면의 우측의 "Palette"에서 요소를 끌어와서 "PreView" 화면에 배치하는 것으로 화면 구성을 할 수 있습니다. 
 
 "PreView"에 요소를 위치시킨 다음, "PreView"에 배치한 요소를 클릭하면 
좌측 상단에 "Attributes"창이 표시됩니다. 
 "Attributes"에서 요소의 속성 값을 수정하여 요소의 디자인을 편집할 수 있습니다. 
 
 좌측 하단에 위치한 "Component Tree"에서는 화면의 요소가 어떻게 배치되었는지 확인할 수 있습니다. 

 

2. 주요 속성 값 설정 

 1) text (요소에 표시되는 텍스트 값)

 2) textColor (텍스트의 색깔): ※ Text모드로 코딩 시 #ffffff을 입력하면 좌측에 색상을 선택할 수 있는 버튼이 활성화됨

 3) textSize (텍스트의 크기) : 숫자 + 단위 형식으로 값을 설정한다. Ex) 20pt, 10dp...

 

 4) layout_width (가로길이 값) & layout_height (세로 길이 값) :

    - match_parent (부모 요소의 값과 일치하게 값 설정)

위 화면은 최상위의 LinearLayout을 선택하여 layout_width의 값을 match_parent로 설정했을 때의 화면입니다. 

최상위 레이아웃에서 match_parent로 값을 설정하면 화면의 전체 크기가 넓이 값이 되는 것을 알 수 있습니다.

 

- wrap_content (텍스트의 크기만큼 세로 길이를 감싸기)

위 화면을 최상위의 LinearLayout을 선택하여 layout_width의 값을 wrap_content로 설정했을 때의 화면입니다. 

레이아웃의 범위가 딱 요소를 감쌀 만큼 설정된 것을 알 수 있습니다.

 

5) gravity : 요소 안의 텍스트 값의 정렬・위치 설정

 

6) layout_gravity : 요소의 정렬・위치 설정