2014/02/27

#3. 안드로이드 개발: 뷰(View), 액티비티(Activity)

 *) 안드로이드 개발 연재글은 다음의 순서로 이루어 집니다.
#1. 안드로이드 SDK 시작하기: SDK 설치, Eclipse 연동, Hello World 출력하기
#2. 안드로이드 SDK 시작하기: 프로젝트 생성
#3. 안드로이드 개발: 뷰(View), 액티비티(Activity)
#4. 안드로이드 개발: 프로젝트 구조 알아보기


 안드로이드 예제 소스를 프로젝트에서 따올 수는 없어서, 이것 저것 검색하던 도중 안드로이드에서 제공하는 개발자 가이드를 안드로이드 개발사이트인 칸드로이드에서 번역해놓은 것이 있어서 그 자료에서 소스를 따오도록 하겠습니다. 소스.pdf는 링크에서 받으시면 됩니다.


안드로이드 개발: 뷰(View)

 뷰는 버튼, 그림, 텍스트 등의 유저 인터페이스(UI) 컴포넌트를 통틀어 부르는 이름입니다. 뷰(View)라는 이름 그대로 사용자에게 보여주는 역할을 합니다. 레이아웃을 하위 클래스로 둡니다. 

 package Explorer에서 자신의 프로젝트> res>activity_main.xml을 들어가서 Palette를 보면, Form widgets을 찾을 수 있습니다. 

 뷰와 관련해서는 다음의 블로그에서 굉장히 자세하게 설명되어있기 때문에 이쪽 게시물을 참조하시면 좋을 듯 합니다. 도모네 프로그램 세계


안드로이드 개발: 액티비티(Activity)

 개발자 가이드에서는 액티비티를 '액티비티는 사용자가 착수할 수 있는 하나의 포커스된 시도에 대한 비쥬얼 사용자 인터페이스를 나타낸다.' 라고 소개하고 있습니다. 이렇게 말하면 액티비티는 굉장히 추상적인 개념으로 들립니다.

 액티비티에 대해서는 인터페이스 자체를 구성하는 기본 단위라고 생각하시면 됩니다. 액티비티는 어플리케이션을 실행했을때 한 동작을 실행하는 동안 보여지는 화면 구성입니다. 안드로이드 메니페스트를 참조해서 관리되며, 하나의 액티비티에는 레이아웃 및 뷰가 들어있습니다.


안드로이드 개발: 레이아웃(Layout)

 뷰의 하위 클래스인 레이아웃은 화면상에 뷰를 배치하여 xml파일로 구성합니다. 


  1. <?xml version="1.0" encoding = "utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6. <TextView   
  7.     android:layout_width="wrap_content"  
  8.     android:layout_height="wrap_content"  
  9.     android:text="Hello, I am a TextView" />  
  10. <Button   
  11.     android:layout_width="wrap_content"  
  12.     android:layout_height="wrap_content"  
  13.     android:text="Hello, I am a Button" />  
  14. </LinearLayout>  
  하나의 텍스트뷰와 버튼을 가지는 버티컬 레이아웃 예제 입니다. res>layout>activity_main.xml파일을 수정하면 다음과 같은 Test 실행 결과를 볼 수 있습니다. (보는 방법은 Hello world와 같습니다.)

 XML 파일은 HTML 파일과 비슷하게 레이아웃을 텍스트로 구성하여 사람이 읽을 수 있도록 제공합니다. 또한, 아래 Graphical Layout tab을 통해 직접 드래그앤드롭으로 UI를 생성하거나 조작하면 코드가 이에 맞추어 변하는 기능도 제공합니다. 

 XML 파일의 엘리먼트 이름은 각각 Java 클래스에 묶여 <TextView>는 텍스트뷰를, <LinearLayout>은 LinearLayout 뷰를 생성합니다. 

 XML 파일은 <?xml version="1.0" encoding = "utf-8"?> 로 시작합니다. 그리고 첫 번째 태그에 xmlns:android="http://schemas.android.com/apk/res/android" 네임태그가 들어가야 정상적으로 동작합니다.

 layout_width와 layout_height은 뷰의 각각 너비와 높이를 지정하는 역할을 합니다. 이때 들어갈 수 있는 값으로 fill_parent, wrap_content가 있는데, 전자는 컨테이너 전체의 크기를 받고, 후자는 필요한 크기만을 받습니다. px,dp,mm 등의 절대치도 넣을 수 있습니다.

 또한, id를 배정할 수 있는데, 이는 프로그램이 뷰를 찾아올 수 있도록 하는 역할을 합니다. 자세한 것은 예제를 통해 보시면 좋을 듯 합니다.



예제 - 간단한 화면 전환 어플리케이션


 위에서 설명한 내용을 바탕으로 화면 전환 어플리케이션을 제작해 보도록 하겠습니다. 

 우선, 먼저 할 것은 res>values>strings.xml 파일에 다음의 주석을 추가하는 일입니다. 이렇게 strings.xml에 저장해 놓은 값은 외부에서도 꺼내쓸 수 있습니다. 반복되는 문장이나, 일일이 하드코딩으로 치지 않아도 된다는 점이 강점입니다. 



 이렇게 설정을 해 놓고 저장한 후, sb.xml파일(StartButton)을 만들어 보도록 하겠습니다. xml파일이므로, res>layout 에서 생성하시면 되고, layout의 파일명은 소문자이여야 합니다. 

 이렇게 코딩을 하시고 저장을 하시면, Start와 Info 버튼이 생성된 것을 보실 수 있습니다. 텍스트뷰에 아까 strings.xml에 저장해 놓은 test를 이용하였고, 각각의 Button에 @+id/ 태그를 이용하여 아이디를 생성하였습니다. 이는 후에 자바파일에서 사용하게 될 것입니다. 




sb.xml과 같은 위치에 bb.xml(BackButton)을 생성하도록 하겠습니다. 기본 구조는 sb.xml과 같으므로, 쉽게 따라하실 수 있으리라 생각합니다.



 이제 UI부분을 마쳤으니 src>com.example.test에 ForBlogger.java 파일을 생성해보도록 하겠습니다.(새로 생성하려면 이것 저것 설정해야 하니 기존에 있는 파일을 복사, 붙여넣기 하는 것이 편리합니다.)

 이것 저것 수정하여 아래와 같이 코딩을 진행합니다. 진행중에, 대부분의 경고 혹은 에러가 뜨는 부분은 Ctrl+Shift+O를 누르면 자동으로 import를 하여 수정됩니다.

 이 과정에는 Toast를 이용하여 잠시동안 Text가 뜨도록 설정하였고, Intent를 이용하여 액티비티 전환을 진행하게 됩니다. 앞으로 안드로이드에서 자주 인텐트를 이용하여 액티비티간에 데이터를 전달하거나 원하는 기능을 수행하게 할 겁니다.






 마지막으로, 처음 시작할 액티비티를 지정하기 위하여 Manifest 파일을 건드려야 합니다.  android:name ="" 부분이 처음 시작할 액티비티를 결정하는 것이며, 우리는 ForBlogger을 첫 액티비티로 지정하고 싶으므로 아래와 같이 설정한 후, 사용할 액티비티인 ForBlogger2또한 추가해 줍니다.

여기까지 진행한 후, Ctrl+F11을 눌러 가상머신에서 돌아가도록 해보면, 앱이 완성되었음을 확인하실 수 있습니다.

댓글 없음:

댓글 쓰기