안드로이드의 레이아웃(ViewGroup)과 뷰(View) (2)

1. ViewGroup과 View

공식 Docs : https://developer.android.com/guide/topics/ui/declaring-layout?hl=ko

 

안드로이드 애플리케이션의 화면(User Interface)를 표현하는 구성요소는 ViewGroup과 View가 있다. ViewGroup은 여러 View를 한 덩어리로 묶어주는 틀의 역할을 하며 View는 각 컴포넌트들을 의미한다. (ViewGroup은 View를 상속받았기 때문에 ViewGroup또한 View의 일종이다.)

사용자 화면에 노출해야하는 액티비티는 반드시 레이아웃이나 뷰를 선언해야 하는데 선언 방법은 2가지가 있다.

• 정적 선언 : res/layout에 xml을 사용하여 선언.
• 동적 선언 : java 소스코드를 사용하여 런타임 중 객체화를 통해 선언. ( ex. new LinearLayout() )

오늘은 xml을 예시로 설명하겠다. (동적 선언은 추후에 본다.)

xml은 반드시 1개의 루트 요소를 가져야 하는데 ViewGroup와 View 모두 루트로 선언이 가능하다. 루트 컴포넌트는 여러 개면 안된다.

따라서 xml에 비치할 View가 여럿이라면 루트는 레이아웃이어야 한다. 

루트뷰에는 다음과 같은 네임스페이스가 있어야 한다.

1. 'android' 의 네임스페이스의 위치

2. 'app'의 네임스페이스의 위치

3. 'tools'의 네임스페이스의 위치

그 밑을 보면 android:~~~~ / tools:~~~~ 등의 애트리뷰트들이 보이는데

이러한 애트리뷰트의 명칭이 어디서 지정되었는지 그 출처를 표기한 것이 위 1, 2, 3번이라 할 수 있다. 

(잘못된 루트의 예시)

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout>      

        ......

 </LinearLayout>

 <LinearLayout>

         ......

 </LinearLayout>

(올바른 루트의 예시)

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout>

    <LinearLayout>

             ......

    </LinearLayout>

    <LinearLayout>

             ......

    </LinearLayout>

</LinearLayout>

2. 공통 특성 

View와 ViewGroup 마다 제각기 개성이 있으나 종류와 상관 없이 공통으로 가지는 몇 가지 특성이 있다.

다음 특징은 모든 View와 ViewGroup에 적용가능한 공통 사항들이다.

1) id 

android:id="@+id/아이디"

id는 각 View에 부여하는 고유 식별값이다. 이는 동적인 처리가 필요한 경우(onCreate() 내부에서 대상을 객체화해야 하는 경우) 사용한다. 

아무 기능이 없고 단지 병풍(?) 역할을 한다면 id 부여는 생략해도 된다.

2) layout parameters (필수)

android:layout_width="wrap_content 혹은 match_parent"  android:layout_height="wrap_content 혹은 match_parent"

모든 View는 너비(width)와 높이(height)를 설정해야 한다.

속성의 값으로는 3가지 옵션이 있다.

• match_parent : 부모가 지정한 크기를 그대로 물려받는다. 
• warp_content : 자신 View의 내용에 딱 맞는 크기로 지정된다. 
• 정수dp : 직접 크기를 지정한다. (예. 100dp)

참고) dp란?

3) 기준 위치

모든 뷰는 내용의 모양이 동그라미든 이미지든 어떠한 모양이든 상관없이 투명한 직사각형 안에 들어있다. 이 직사각형의 위치를 지정할 때는 직사각형의 왼쪽 상단 꼭지점이다.

4) 내부 여백(Padding)과 외부 여백(Margin)

모든 뷰는 여백을 지닐 수 있다.

• padding : view와 content(내부 내용) 사이의 간격
• margin : view와 외부와의 간격

다음 그림은 하늘색 View에 padding과 margin을 적용했을 때 모습이다.