[부스트코스] 안드로이드 프로그래밍 02 - 뷰와 레이아웃
안녕하세요 듀다입니다. 이번 포스팅에는 뷰와 레이아웃에 대해서 다루도록 하겠습니다.
뷰는 화면의 모든 구성요소를 일컫는 개념입니다. 안드로이드 앱을 실행시키면 보이는 글자, 그림, 아이콘 등 화면에 보이는 모든 것이 뷰에 포함됩니다.
그리고 뷰 그룹이라는 개념이 있습니다. [부스트코스] 강의에서는 이해하기 쉽게 뷰를 담는 그릇이라고 표현하고 있습니다. 말 그대로 뷰를 담고 있는 것이 뷰 그룹입니다.
뷰 그룹은 뷰를 상속합니다. 따라서 뷰 그룹도 뷰입니다. 뷰 그룹이 뷰 이므로 뷰 그룹 안에는 뷰 그룹이 들어갈 수 있습니다. 그 안에도 또 다른 뷰가 들어갈 수 있기 때문에 뷰 안에는 뷰가 들어갈 수 있다고 할 수 있습니다.
뷰 그룹 중에는 눈에 보이지 않는 것도 있기 때문에 뷰 중에서 눈에 보이는 뷰만 위젯이라고 따로 구분하여 표현합니다.
레이아웃 이름 | 위젯의 위치 |
제약 레이아웃 | 제약 조건에 따라 결정됨 |
리니어 레이아웃 | 표시 가능한 영역 고정(영역 내에서는 자유롭게) |
상대 레이아웃 | 다른 뷰나 부모 레이아웃과 상대적 |
프레임 레이아웃 | 고정 |
레이아웃은 화면에 추가한 것(주로 위젯)들을 담고 있는 것입니다. 담는 것 뿐만 아니라 위치도 정해줄 수 있습니다.
네 가지 레이아웃은 위젯의 위치를 위와 같이 결정합니다.
그렇다면 뷰나 레이아웃은 안드로이드 스튜디오에서 어떻게 표현될까요?
안드로이드 스튜디오에서 레이아웃 구성 정보를 저장하고 있는 파일은 activity_main.xml입니다.
activity_main.xml파일의 디자인 탭에서는 화면에 보이는 모습 그대로 표현됩니다.
뷰를 클릭하면 선택된 뷰의 속성이 오른쪽의 Attribute 창에 표시됩니다. attribute 창의 내용을 수정하여 위젯의 속성값을 확인하고 변경할 수 있습니다.
레이아웃을 클릭하면 화면에서 해당 레이아웃이 차지하는 영역이 표시됩니다.
텍스트 탭에서는 뷰의 정보가 소스코드로 표현됩니다.
소스코드를 간략화하면 위 그림과 같이 표현할 수 있습니다.
디자인 탭의 attribute창에서 표현되었던 속성이 이 텍스트 탭에는 java 코드로 표현되어 있습니다. 물론 이 내용을 수정하여도 해당 위젯의 속성을 변경할 수 있고, 디자인 탭에도 반영됩니다.
xml코드는 시작 태그와 끝 태그로 속성을 감싸고, 뷰의 필수 속성을 반드시 포함시켜야 합니다.
예를 들어 사용자가 추가한 뷰가 리니어 레이아웃이라면 리니어 레이아웃이라는 이름과 필수 속성인 android:orientation이 반드시 포함되어야 하겠죠.
생각해 보기
- 디자이너 도구의 팔레트에서 버튼이나 텍스트뷰를 끌어다 화면에 추가하면 왼쪽의 컴포넌트 트리(Component Tree) 창이나 오른쪽의 속성(Attributes) 창에 어떤 변화가 생기나요?
- 버튼이나 텍스트뷰를 화면에 추가하면 상위 레이아웃의 아래에 추가한 요소가 추가됩니다. 오른쪽의 attribute창에는 새로 추가한 요소의 속성이 표시됩니다. - 디자이너 도구에서 가운데 화면 중 흰 화면 부분을 선택했을 때 속성 창에 보이는 정보는 무엇을 의미하는 걸까요?
- 가운데 화면 중 흰 화면 부분을 선택했을 때 속성 창에는 최상위 레이아웃에 대한 정보가 표시됩니다. - 버튼에는 얼마나 많은 속성이 들어 있을까요?
- 무수히 많은 속성이 들어 있습니다. 단 필수 속성을 반드시 포함하고 있어야 합니다. - 버튼이 텍스트뷰를 상속받아 만들어진 것이라면 버튼을 텍스트뷰라고 말할 수 있는 걸까요?
- 버튼이 텍스트뷰를 상속받아 만들어졌다면 버튼은 텍스트뷰의 속성을 그대로 가지고 있는 하나의 텍스트뷰입니다. 뷰를 상속받은 뷰 그룹이 뷰가 될 수 있는 것처럼 버튼이 텍스트뷰라고 할 수 있습니다.