XML에서의 TextView, ImageView, LinearLayout

먼저 각각의 View가 어떤 XML 속성값을 가질 수 있는지는 Android SDK 문서 (sdk디렉토리의 docs 위치)에서 각각의 View 클래스안에 XML Attributes라는 부분에 문서로 정리되어 있습니다. 자세한 것은 직접 문서를 참조하시고 저는 많이 사용되는 일부 값들에 대해서 정리를 해보겠습니다.

TextView
문자열을 표시해주는 역할을 하는 View 입니다.

android:text               :  문자열을 입력
android:textColor     :  문자열의 색을 지정
android:textSize       :  폰트 크기의 설정
android:textStyle      :  bold, italic등의 스타일 설정
android:gravity         :  View안에서 문자열이 어떻게 정렬될 것인지를 지정
                                      top, bottom, left, right, center, center_vertical, center_horizontal등이 | 연산자와 함께 쓰일 수 있다.
android:singleLine :  문자열을 여러 줄로 나누지 않고 한 줄로 표시

01.<TextView 

02.android:layout_width="fill_parent"

03.android:layout_height="fill_parent"

04.android:text = "안녕하세요 안드로이드 공부하시는 여러분"

05.android:textColor = "#FF0000FF"

06.android:textSize = "30sp"

07.android:textStyle = "italic"

08.android:gravity = "right|center_vertical"

09.android:singleLine = "true"    

10./>

예제 XML을 실행시킨 결과

(그림 5-1)                                                                                          (그림 5-2) singleLine="true"

(그림 5-1)은 singleLine을 설정하지 않았을 때, (그림 5-2)는 singleLine을 설정했을 때의 화면입니다.

ImageView
이미지를 표시해주는 역할을 하는 View 입니다.

android:src                :  Image 설정. 프로젝트 디렉토리의 res/drawable에 있는 이미지를 "@drawable/image"로 넣어줌
android:scaleType   :  이미지의 표시를 위한 크기변환(scaling) 및 채워넣기 옵션
                                        fitCenter : 비율을 유지한채 View의 크기에 맞춰서 표시
                                        fitXY         : 비율을 유지 하지 않고 View의 크기에 맞춰서 표시
                                        center     : 원래 이미지의 크기 변환을 하지 않음
                                        그 외 fitStart, fitEnd, centerCrop, centerInside 등은 문서에서 참조하시기 바랍니다.

새로운 이미지를 추가하기 위해서는 프로젝트 디렉토리의 res/drawable에 jpg, png 등의 파일을 복사해넣으면 이클립스에서 인식해서 표시합니다. 만약 이클립스에서 제대로 표시되지 않는 경우 Package화면에서 프로젝트를 선택한 후에 F5(Refresh)를 눌러주시면 됩니다.

1.<ImageView 

2.android:layout_width="fill_parent"

3.android:layout_height="fill_parent"

4.android:src="@drawable/icon"

5.android:scaleType="center"

6./>

기본으로 들어있는 icon그림인 icon.png파일을 화면에 표시하는 예제입니다. (그림 5-3)은 scaleType을 center로 (그림 5-4)는 scaleType을 fitCenter로 설정해서 실행시켜본 결과입니다.


(그림 5-3)  scaleType="center"                                                    (그림 5-4) scaleType="fitCenter"

LinearLayout
Layout은 다른 자식 View들을 포함하고 배치해주는 역할을 합니다. 그 중 LinearLayout이 가장 많이 쓰이는데요. 자식 뷰들을 순서대로 한방향으로 나열해주는 역할을 합니다.

android:orientation : vertical일 경우 위에서 아래로 View들을 차례로 배치하고, horizontal일 경우 왼쪽에서 오른쪽으로 View들을 차례로 배치합니다.

01.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

02.android:orientation="vertical"

03.android:layout_width="fill_parent"

04.android:layout_height="fill_parent"

05.>   

06.<TextView 

07.android:layout_width="fill_parent"

08.android:layout_height="0dp"

09.android:layout_weight="1"

10.android:background="#FF880000"

11./>

12.<TextView 

13.android:layout_width="fill_parent"

14.android:layout_height="0dp"

15.android:layout_weight="1"

16.android:background="#FF008800"

17./>

18.<TextView 

19.android:layout_width="fill_parent"

20.android:layout_height="0dp"

21.android:layout_weight="1"

22.android:background="#FF000088"

23./>

24.</LinearLayout>

예제에서 LinearLayout은 세개의 TextView를 자식으로 가지고 각 TextView는 android:layout_height="0dp"로 설정하고 android:layout_weight라고 하는 것을 사용했는데 이것은 각각의 View의 높이를 상대적으로 결정한다는 뜻입니다. 여기서 각 View가 1:1:1의 비율의 높이를 가지도록 설정됩니다.

(그림 5-5) 는 예제를 그대로 실행한 것이고, (그림 5-6)은 orientation을 horizontal로 바꾸고, android:layout_width="0dp", android:layout_height="fill_parent"로 설정하고 layout_weight를 각각 1, 2, 1으로 설정한 결과입니다.


(그림 5-5)                                                                                          (그림 5-6)