안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)[회색]

이번 강좌에서는 액티비티(Activity), 뷰(View), 레이아웃(Layout)에 대한 이해와 실제 XML 레이아웃 파일을 변경하는 것까지 실습해보도록 하겠습니다.

안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
액티비티, 뷰 그리고 레이아웃

액티비티(Activity)

액티비티는 안드로이드 어플리케이션을 구성하는 가장 기본적인 빌딩블록입니다. 보통의 경우 한 화면을 차지하면서 뷰(View)로 구성된 유저 인터페이스를 화면에 표시하고 사용자의 입력을 처리하는 역할을 합니다.보통의 어플리케이션은 여러 다른 화면을 가지고 있고, 각각의 화면은 다른 액티비티로 구현되어있습니다. 그러므로 화면의 전환이 이루어지게되면 새로운 액티비티가 실행되어 처리하게 됩니다. 어떤 경우는 액티비티 간에 데이터를 서로 주고 받을 수도 있습니다. 새로운 화면이 생성되며 기존의 화면은 스택에 놓여집니다. 각각의 액티비티는 스택을 통해 관리되며 현재 액티비티를 종료하면 그 이전 화면의 액티비티로 돌아가게 됩니다.

뷰(View)

뷰는 화면상에서 유저 인터페이스를 구성하는 기본 빌딩블록입니다. 예를 들어 버튼, 그림, 텍스트, 에디트, 라디오 버튼, 체크박스 등의 기본적인 화면 구성 요소들이 뷰에 포함됩니다. 또한 웹, 맵, 비디오등을 표시하는 고급 구성 요소들도 모두 뷰에 포함됩니다. 뷰의 리스너(Listener) 설정을 통해 이벤트가 발생했을 경우를 처리할 수 있습니다. 예를 들어 버튼이 클릭되었을때 등록된 OnClickListener가 호출되어 처리됩니다.

레이아웃(Layout)

각각의 뷰들을 화면상에 배치하고 구성해주는 것을 레이아웃이라고 합니다. 레이아웃은 보통의 경우 XML을 이용하여 구성합니다. 이전 강좌에서도 리소스(res) 아래의 layout에 myactivity.xml파일을 생성해 준 적이 있지요. 

 레이아웃 XML

view source

print?

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

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

03.    android:orientation="vertical"

04.    android:layout_width="fill_parent"

05.    android:layout_height="fill_parent"

06.    >

07.<TextView  

08.    android:layout_width="fill_parent" 

09.    android:layout_height="wrap_content" 

10.    android:text="안녕하세요 모바일 플레이스 안드로이드 강좌 수강생 여러분"

11.    />

12.</LinearLayout>

(예제 4-1)

(그림 4-1)

먼저 기본으로 생성되는 형태의 레이아웃 XML인 (예제 4-1)을 분석해보겠습니다.

XML파일은 <?xml version="1.0" encoding="utf-8"?> 으로 시작합니다. 그리고 첫번째 태그에는 xmlns:android="http://schemas.android.com/apk/res/android" 라는 XML Namespace가 들어가야 합니다.  레이아웃 XML의 각각의 태그 (LinearLayout, TextView)는 하나의 뷰를 나타내며 연결되는 자바 클래스를 가지고 있습니다. 뷰는 크게 두가지 형태가 존재하는데 버튼, 그림과 같이 실제 기능을 가지고 화면에 표시되는 뷰와 다른 뷰를 포함하고 배치하는 역할을 하는 레이아웃이 있습니다. 레이아웃은 하는 역할은 약간 다르지만 View 클래스를 상속하는 일종의 뷰라고 할 수입니다. 레이아웃 XML의 최상위에는 하나의 뷰만 존재할 수 있습니다. 보통 레이아웃이 들어가서 트리 형태로 다른 뷰들을 배치하고 구성하지만 일반 뷰 하나만 들어있는 레이아웃 XML도 작성할 수 있습니다.

흔히 많이 쓰이는 뷰와 레이아웃은 다음과 같습니다.

뷰       : TextView, Button, ImageView, ListView, EditText, ...
레이아웃 : LinearLayout, RelativeLayout, FrameLayout, AbsoluteLayout, ...

(예제 4-1)은 LinearLayout이 하나의 TextView를 자식으로 가지고 있는 형태입니다. 레이아웃 태그 사이에는 자식 뷰들이 여러 개 들어갈 수 있으며 레이아웃이 레이아웃을 자식으로 가지고 있는 형태도 가능합니다.

View Attribute

XML에서 각각의 뷰가 가지는 속성을 Attribute로 지정해할 수 있습니다. 모든 View가 공통적으로 가지고 있는 Attribute에 대해서 먼저 설명하도록 하겠습니다.

layout_width, layout_height
뷰의 넓이와 높이를 지정합니다. 값으로 fill_parent, wrap_content 혹은 절대적인 수치를 가질 수 있습니다. fill_parent는 컨테이너 즉 부모가 가지는 길이를 모두 채울때 사용하고, wrap_content는 해당 뷰가 그려질 수 있게 필요한 길이만 차지한다는 것을 나타냅니다. 절대적인 값도 넣을 수 있는데 픽셀의 경우 "100px", "100dp", "100sp" 처럼 수치와 단위를 써서 지정해줍니다. 사용할 수 있는 단위는 px, in, mm, pt, dp, sp등이 있는데 주로 dp, sp, px이 주로 쓰입니다. px는 픽셀을 나타내고, dp는 Density-independent Pixel이라고 화면의 밀도의 변화에 독립적으로 1dp는 160dpi의 화면에서의 1px에 대응됩니다. sp는 Scale-independent Pixel 이라고 하여 사용자의 폰트 선호도에 따라 크기가 달라지며 주로 폰트 사이즈 설정에 사용됩니다.

background
 배경색 혹은 그림을 지정해줍니다. 색은 #RGB, #ARGB, #RRGGBB, #AARRGGBB 의 포맷으로 지정해 줄 수 있는데 저는 통일성있게 #AARRGGBB포맷만을 주로 사용합니다. 제일 앞에 AA는 투명도를 의미하고 나머지 부분은 RGB값을 의미합니다. 투명도인 AA는 00이 완전 투명, FF가 불투명이 됩니다. 예를 들어 android:background="#FFFF0000"로 지정해주면 빨간색으로 배경을 칠하게 됩니다. 배경그림을 지정해줄 수도 있는데 android:background="@drawable/background_image" 와 같은 형태로 사용가능합니다. 배경 그림은 리소스에 들어있는 jpg, png등의 그림을 배경으로 지정할 때 사용합니다.

visibility
뷰가 화면에 보이게 할지 안보이게 할지를 설정합니다. visible, invisible, gone의 값을 가질 수 있습니다. visible 화면에 보임, invisible 화면에 보이지 않으나 공간은 차지함, gone 화면에 보이지도 않고 공간도 차지 하지 않음.

id
코드에서 해당 뷰를 찾아올 수 있도록 id를 지정합니다. id에 사용에 대해서는 자바코드와 연결하는 부분에서 자세하게 다루도록 하겠습니다.

myactivity.xml을 수정해보면서 각 속성값이 어떻게 실제 화면에 영향을 주는지 확인해보도록 하겠습니다.

view source

print?

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

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

03.    android:orientation="vertical"

04.    android:layout_width="fill_parent"

05.    android:layout_height="fill_parent"

06.    android:background="#FF888888"

07.    >

08.<TextView  

09.    android:layout_width="fill_parent" 

10.    android:layout_height="wrap_content" 

11.    android:text="파랑"

12.    android:background="#FF0000FF"

13.    />

14.</LinearLayout>

(예제 4-2)

(그림 4-2)

자 그럼 속성값들을 변경해보도록 하겠습니다. 먼저 배경색을 지정하여 실제 뷰가 차지하는 영역을 살펴보도록 하겠습니다. (예제4-2)에서 LinearLayout은 width, height를 각각 fill_parent로 화면 전체를 채우고 있으며, TextView는 width는 fill_parent로 부모의 길이만큼 모두 차지하지만 height를 wrap_content로 하여 자신이 차지하는 부분만을 높이로 가지는 것을 볼수 있습니다.

view source

print?

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

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

03.    android:orientation="vertical"

04.    android:layout_width="fill_parent"

05.    android:layout_height="fill_parent"

06.    >

07.<TextView  

08.    android:layout_width="fill_parent" 

09.    android:layout_height="wrap_content" 

10.    android:text="빨강"

11.    android:background="#FFFF0000"

12.    />

13.<TextView  

14.    android:layout_width="wrap_content" 

15.    android:layout_height="50dp" 

16.    android:text="녹색"    

17.    android:background="#FF00FF00"

18.    />

19.<TextView  

20.    android:layout_width="fill_parent" 

21.    android:layout_height="wrap_content" 

22.    android:text="파랑"    

23.    android:background="#FF0000FF"

24.    />

25.</LinearLayout>

(예제 4-3)

(그림 4-3)

자 이번에는 (예제 4-3)에 TextView를 두개 더 추가하여 배경색을 빨강, 녹색, 파랑으로 칠하고 가운데 있는 TextView의 width를 wrap_content로 height를 50dp로 지정해 보았습니다.

(그림 4-4)

(그림 4-5)

(그림 4-4)와 (그림 4-5)는 각각 두번째 TextView에 android:visibility="invisible", android:visibility="gone"으로 설정하여 화면에 보일때와 안보일 때 그리고 영역을 차지 하지 않을 때의 차이를 살펴보실 수 있습니다.

이번 강좌는 여기서 마치겠습니다.

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