안드로이드 강좌 5 - XML에서의 TextView, ImageView, LinearLayout[회색]

이번 강좌에서는 레이아웃 XML파일에서의 TextView, ImageView, LinearLayout의 설정에 관하여 설명을 하도록 하겠습니다.  Android에는 수십개의 View와 Layout이 있지만 그 중에서 가장 기본이 되는 3개를 먼저 배우도록 하겠습니다. 모든 View가 공통적으로 가지는 속성값에 대해서는 이전에 설명했기 때문에 이번에는 각각의 View만이 가지는 값들에 대해서 설명하도록 하겠습니다.

안드로이드 강좌 5 - 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 :  문자열을 여러 줄로 나누지 않고 한 줄로 표시

view source

print?

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)를 눌러주시면 됩니다.

view source

print?

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들을 차례로 배치합니다.

view source

print?

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)

이번 강좌는 여기 까지입니다. 궁금한점이 있으시면 언제든지 댓글이나 Q&A 게시판에 질문을 남겨주세요.

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.  출처 : http://www.androidpub.com/2198 작성자 : 회색(박성서)