1 학습목표
❍ 안드로이드 응용 프로그램 개발의 기본적인 과정을 배운다.
❍ 안드로이드 프로젝트의 구성을 파악한다.
2 확인해 볼까?
안드로이드 앱을 직접 만들기 위해 구글 홈페이지에서 ADT를 다운로드 받아서 이 클립스·AVD 등의 개발환경을 설치하였다. 이러한 안드로이드 개발 환경들을 어떻게 활용해야 내가 원하는 안드로이드 앱을 만들 수 있을까?
3 안드로이드 응용 프로그램 작성
1) 학습하기 ❍ 학습할 내용
안드로이드 개발 환경을 구축을 완료 하였으니 기본적인 안드로이드 응용 프로 그램을 작성해보자. 일반적으로 안드로이드 응용 프로그램 개발은 [그림 2-1]의 순서로 이루어진다.
[그림 2-1] 안드로이드 응용 프로그램 개발 단계
2) 활동하기 ❍ 활동 개요
안드로이드 응용 프로그램 개발 순서에 따라 안드로이드 응용 프로그램을 작성 해 보자. 처음으로 만들어볼 안드로이드 응용 프로그램은 [그림 2-2]와 같다. 버튼 을 클릭하면 “”Hello World” 메시지가 출력되도록 작성한다.
[그림 2-2] Hello World 프로젝트
❍ 활동 과정
(1) 이클립스를 실행한다.
(2) [Select a workspace] 창이 나오면 미리 설정한 프로젝트 폴더 (C:\myAndroid\projects)가 맞는지 확인하고 <OK> 버튼을 클릭한다.
(3) 이클립스 메뉴 [File]-[New]-[Android Application Project]를 선택하면 [New Android Application] 창이 나온다. [그림 2-3]의 (가)와 같이 입력하고 <Next>를 클릭 한다. [그림 2-3]의 (나) 화면이 나온다. 프로젝트의 경로 등을 설정하는 곳이다. 그대로 두고 <Next>를 클릭한다.
. Application Name: HelloWorld . Project Name: HelloWorld
. Package Name: com.example.helloworld -> com.example. 다음의 helloworld는 자동으로 Application Name 또는 Project Name 중 마지막으로 업데이트 된 내용 이 자동으로 입력된다.
. Minimum Required SDK: API 16: Android 4.1 (Jelly Bean) . Target SDK: API 16: Android 4.1 (Jelly Bean)
. Compile With: API 16: Android 4.1 (Jelly Bean) . Theme: Holo Light with Dark Action Bar
(가) 화면 1 (나) 화면 2
[그림 2-3] 프로젝트 정보 입력
(4) [Configure Launcher Icon]창이 나온다. 앱이 실행될 때의 아이콘을 설정하는 곳 이다. 그대로 두고 <Next>를 클릭한다.
[그림 2-4] 아이콘 설정
(5) [Create Activity]창이 나온다. 디폴트로 BlackActivity가 선택되어 오른쪽에 액티비 티 화면이 보인다. 그대로 두고 <Next>를 클릭한다.
[그림 2-5] 액티비티 생성
(6) [New Blank Activity] 창에서 다음과 같이 변경하고 <Finish>를 클릭한다.
. Application Name: HelloWorld . Layout Name: main
[그림 2-6] 액티비티 설정
(7) 만약 [Install Dependencies] 창이 나온다면 <Install/Upgrade>를 클릭해서 필요한 라이브러리를 추가로 설치해준다. 설치동의 창에서 <Accept All>을 선택하고 <Install>
을 클릭하여 설치하고 <Finish>를 클릭한다.
(8) 잠시 기다리면 이클립스의 [Package Explorer]에 'HelloWorld' 프로젝트가 추가되 면서 액티비티와 열려 있는 main.xml을 볼 수 있을 것이다. 초기화면은 main.xml의 Graphical Layout 상태를 보여준다.
[그림 2-7] 안드로이드 프로젝트 생성 결과
(9) Package Explorer에서 프로젝트 이름에 마우스 커서를 대고 오른쪽 버튼을 클릭 한 후 [Run As]-[Android Application]을 선택한다. 그러면 AVD가 가동되고 프로젝트 가 실행된다.
[그림 2-8] 안드로이드 프로젝트 실행
(10) 잠시 기다리면 실행 결과 화면이 나타난다. 실행결과를 보면 main.xml의 Graphical Layout에서 봤던 화면이 등장하는 것을 확인할 수 있다.
[그림 2-9] 프로젝트 실행 결과
(11) 이제 코드의 몇몇 부분을 수정하여 우리가 원하는 프로그램을 작성해 보자. 이클 립스의 main.xml에서 Graphical Layout 옆의 main.xml을 클릭한다. 초기화면에 대한 XML코드가 작성되어 있는 부분이 보일 것이다.
[그림 2-10] main.xml의 XML 코드 화면
(12) RelativeLayout을 LinearLayout으로 변경하고 기존에 있던 <TextView ~~ /> 부 분을 삭제한다.
[그림 2-11] Layout 변경 및 TextView 제거
(13) <LinearLayout>과 </LinearLayout> 사이에 버튼을 추가한다. <Button>이라고 입
력하면 자동으로 </Button>이 붙을 것이다. 이것은 버튼의 시작과 끝을 나타낸다.
<Button 다음에 엔터키를 적당히 눌러 [그림 2-12]와 같이 만들자.
[그림 2-12] 버튼 추가
(14) 8행에 "android:"을 입력하면 여러 개를 선택할 수 있는 목록이 나온다. 목록이 나온다지 않는다면 “Ctrl + SpaceBar”를 동시에 누르면 된다. 목록에서
"@android:layout_width"를 선택하면 android:layout_with=""이 자동 완성된다.
[그림 2-13] 자동완성기능
(15) “ ”사이에 커서를 가져다 놓고 다시 “Ctrl + SpaceBar”를 동시에 누르면 선택할 수 있는 항목 3가지가 나오는데, 그중 “match_parent”를 선택하고 엔터를 누른다.
[예제 2-1]main.xml 1
2 3 4 5 6 7 8 9 10 11 12
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HelloWorldActivity" >
<Button
android:id="@+id/btnHelloWorld"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World" >
</Button>
</LinearLayout>
1~2행 리니어레이아웃의 XML 네임스페이스를 URL로 지정한다. 1행의 xmlns 이후에 나오는 것이 XML 파일에서 사용할 네임스페이스가 되며, 디폴트는 android이다.
3~4행 android:layout_width는 layout_width가 안드로이드 네임스페이스에 포함되어 있음을 나타낸다. 위젯의 폭(layout_width)과 높이(layout_height)를 뜻하며 자세한 내용은 추후에 자세히 다룬다.
5행 여러 개의 액티비티를 다룰 때 사용하는 속성이다.
6행 버튼의 시작을 나타낸다.
[그림 2-14] 자동완성기능
(16) 같은 방법으로 아래와 같은 코드를 입력한 후 저장한다. 코드의 열과 행을 맞추 고 싶을때는 “Ctrl + Shift + f”를 누르면 자동으로 정렬된다.
7행 버튼의 id를 나타내며, btnHelloWorld로 정하였다. 이는 프로그래머가 직접정해주며, id를 지정할 때는 ‘@+id/아이디’ 형식으로 만든다. @는 리소스에서 참조하라는 의미이며, @+는 리소스에 추가하라는 의미이다.
8~9행 버튼의 폭(layout_width)과 높이(layout_height)를 설정한다.
10행 text 속성은 위젯에 쓰여질 글자를 나타낸다. “Hello World”로 버튼의 글자를 작성하였 다.
11행 버튼의 끝을 나타낸다. ></Button> 은 /> 과 동일하다.
12행 리니어레이아웃의 끝을 나타낸다.
(17) 코드를 모두 작성한 후 main.xml 화면에서 [Graphical Layout] 탭을 선택해보자.
그래픽 화면에서 버튼이 추가된 것을 확인할 수 있다.
[그림 2-15] main.xml의 그래픽 화면
(18) Package Explorer의 [HelloWorld]에서 마우스 오른쪽 버튼을 클릭한 후 [Run As]-[Android Application]을 선택하여 프로젝트를 실행한다.
[그림 2-16] 버튼 추가 후 프로젝트 실행
(19) 버튼을 클릭해도 아무 동작도 하지 않는다. 버튼에 대한 이벤트 처리를 하지 않 았기 때문이다.
(20) 버튼에 대한 이벤트 처리를 작성해 보자. Package Explorer의 [src]- [com.example.helloworld]-[HelloWorldActivity.java]를 더블클릭하여 연다.
[그림 2-17] 버튼 추가 후 프로젝트 실행
(21) 버튼에 접근해야 하므로 버튼에 대한 전역변수(액티비티의 멤버변수) 하나를 만 든다. Activity를 상속받은 HelloWorldActivity 클래스 이름과 @Override 사이의 위치 에 다음을 입력한다.
Button btnHelloWorld;
그러면 Button 글자에 빨간 줄이 그어지며 오류가 표시되는데, 오류의 원인는 Button과 관련된 클래스나 인터페이스가 import되지 않았기 때문이다.
[그림 2-18] Button 변수 추가 및 에러
(22) “Ctrl + Shift + O”를 누르면 필요한 import가 자동으로 이루어진다.
[그림 2-19] “Ctrl + Shift + O”를 눌러 필요한 import 자동 작성
(23) Java 코드에 선언한 Button 변수와 XML 파일에서 만든 버튼 객체를 연결시켜야 한다. findViewById() 메소드를 사용하여 setContentView(R.layout.main) 아래에 다음 코드를 추가한다. 단어의 시작 몇 글자만 작성하고 “Ctrl + SpaceBar”의 자동완성 기 능을 사용하면 편리하게 코딩할 수 있다.
btnHelloWorld = (Button) findViewById(R.id.btnHelloWorld);
(24) 이제 XML의 버튼 객체와 연결한 버튼 변수를 사용하여 버튼을 클릭하면 동작하 는 이벤트 메소드를 정의한다. “btnHelloWorld.”을 작성하면 선택할 수 있는 멤버함수 들이 나오는데 그중 SetOnClickListener()를 선택한다. “~.seto”까지 입력한 후 가장 위 의 것을 선택하면 된다.
[그림 2-20] 버튼 이벤트 처리 1
[예제 2-2]HelloWorldActivity.java 1
2 3 4 5
package com.example.helloworld;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
(25) SetOnClickListener()의 괄호 안에 “new View.” 까지 작성하면 선택할 수 있는 멤버함수들이 나오는데 그중 가장 위의 것인 OnClickListener()를 선택한다.
[그림 2-21] 버튼 이벤트 처리 2
(26) [그림 2-22]와 같이 onClick() 메소드가 자동으로 추가된다. 마지막 괄호 “)”다음 에 세미콜론 “;”을 붙여주면 오류 표시가 없어진다.
[그림 2-22] Onclick() 메소드
버튼을 클릭했을 때 원하는 동작의 코드는 모두 onClick() 메소드 안에 작성한다. 본 예제에서는 버튼을 클릭하였을 때 “Hello World~!!”를 출력하는 토스트 메시지가 나오 도록 한다.
6 7 8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class HelloWorldActivity extends Activity {
Button btnHelloWorld;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnHelloWorld = (Button) findViewById(R.id.btnHelloWorld);
btnHelloWorld.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Hello World~!!", 0).show();
} });
}
~~~~~ 중략 ~~~~~
}
1행 안드로이드 응응프로그램의 패키지 이름이며 자동으로 완성된다.
3~8행 작성한 코드에서 참조한 관련 클래스, 인터페이스를 import한 내용이다. “Ctrl + Shift + o ”를 누르면 필요한 내용이 자동으로 완성된다.
9행 Activity 클래스를 상속받아 HelloWorldActivity 클래스를 정의한다. 가장 기본이 되는 클 래스로, 초기 화면을 표시한다.
11행 버튼에 대한 변수를 선언한 내용으로 HelloWorldActivity 클래스 내의 전역변수 (멤버변 수)로 선언한다.
13행 다음에 나오는 메소드가 오버라이드되었다는 것을 알려주는 지시자이다.
14행 Activity 클래스의 메소드로 가장 기본이 되는 메소드이다. C언어의 main() 함수와 같이 어플리케이션 실행시에 가장 먼저 수행이 되는 메소드이다. 여기서는 HelloWorldActivity 클래스가 오버라이드 해서 사용하고 있다.
15행 수퍼 클래스인 Activity 클래스의 onCreate() 메소드를 호출한다.
16행 SetContentView() 메소드는 레이아웃을 화면에 표시해준다. 여기서는 R.layout.main은 main.xml을 가리키는 아이디 값이다.
17행 btnHelloWorld 버튼형 변수와 R.id.btnHelloWorld라는 아이디를 가진 버튼 객체를
findViewByID()함수를 이용하여 연결해준다. 연결한 후에는 btnHelloWorld 변수를 이용하 여 main.xml에서 생성한 R.id.btnHelloWorld 버튼 객체를 제어할 수 있다. 연결할 때는 (Button)과 같이 항상 객체의 자료형을 캐스팅 해줘야 한다.
19~26행 버튼을 클릭했을 때 동작하는 클래스를 익명 내부 클래스(Anonymous inner class) 로 정의했다.
22행 버튼을 클릭했을 때 실행되는 메소드이다. 버튼을 클릭했을 때 수행하고 싶은 내용을 onClick() 메소드 안에 코딩해주면 된다.
23행 자동으로 생성된 주석이다.
24행 토스트 메시지를 일정시간동안 화면에 나타내주는 메소드이다. 파라미터에는 메시지가 출 력될 컨텍스트, 메시지 내용, 출력할 시간(0은 2초, 1은 4초)이 있다. 컨텍스트는 응용 프로 그램 자체라고 생각하면 되며, getApplicationContext() 메소드는 현재 응용 프로그램의 컨 텍스트를 반환해준다.
27행 onCreate() 메소드의 종료를 나타낸다.
28행 생략된 onCreateOptionsMenu() 메소드는 옵션 메뉴에 대한 내용으로 추후에 다루도록 한다.
29행 HelloWorldActivity 클래스의 종료를 나타낸다.
(27) 코드 작성을 완료하였으니, 실행하여 보자. Package Explorer의 HelloWorld 프로 젝트에 마우스 오른쪽 버튼을 클릭한 후, [Run As]-[Android Application]을 선택하여 실행하자. 화면이 나타나면 버튼을 클릭해보자. [그림 2-22]과 같은 결과를 확인할 수 있을 것이다.
[그림 2-23] 실행 화면
4 안드로이드 프로젝트 구성
1) 학습하기
지금까지 간단한 안드로이드 프로젝트를 하나를 만들어보았다. 안드로이드 프 로그램의 구조를 정리하고, 앞으로의 혼란을 피하기 위해 Package Explorer의 구 조를 확인하도록 한다.
❍ 활동 개요
안드로이드 프로젝트 Package Explorer의 구성을 파악한다.
❍ 활동 과정: 안드로이드 프로젝트 구성 파악
앞에서 만든 HelloWorld 프로젝트의 구성은 [그림 2-23]과 같다. 안드로이드 프로젝 트에는 여러 개의 폴더와 파일로 구성되어 있다. 그중 가장 중심이 되는 메인 코드는
‘’프로젝트명+Activity.java’에 있다. 여기서는 HelloWorldActivity.java이다. 이 파일에는 응용프로그램 실행시 초기화면을 로딩해주는 부분이 있는데, onCreate()메소드 안에 setContentView(R.layout.main) 메소드가 그 역할을 한다. 여기서 R.layout.main은 [예 제 2-1]에서 만든 main.xml을 가리키는 id 값이며 R.java 파일에 저장되어 있다. 지금 부터 프로젝트의 폴더와 파일을 설명하며, 설명하지 않는 폴더와 파일들은 거의 사용 하지 않는 내용이다.
(1) src 폴더
- 하위에 패키지명 폴더가 있으며, 그 아래 메인 java 소스 파일이 “패키지명 + Activity.java” 형태로 들어가 있다. 프로그래머가 가장 많이 수정할 소스 파일이다.
(2) gen 폴더
- R.java 파일이 자동으로 생성되는데, (1)에서 설명한 메인 java 코드에서 R.id.btnHelloWorld, R.layout.main 과 같은 파일에 접근이 가능하도록 id를 만들어 준다.
- 직접 수정해서는 안된다.
(3) assets 폴더
- 앱을 완성한 후에 배포할 때 함께 포함시킬 파일을 넣는다.
- 일반적으로 소리, 동영상 파일등을 넣는다.
(4) bin 폴더
- 컴파일 후 저장되는 폴더이다.
- 프로젝트명.apk 파일이 생성되며 추후 배포되는 앱의 설치 파일로 쓰인다.
[그림 2-24] 안드로이드 프로젝트 구성
(5) res 폴더
- 앱 개발에 사용되는 이미지, 레이아웃, 문자열 등을 넣는 폴더이다.
- 이미지 파일은 drawable 폴더에 넣는다. 해상도 별로 폴더가 있지만 대부분 hdpi 폴더에 넣으면 된다.
- layout 폴더는 액티비티(화면)을 구성하는 xml파일을 넣는다. 기본적으로 main.xml 이 초기화면으로 지정되어 있으며 추가화면이 필요하면 xml을 더 만들어 이 폴더 에 넣어주면 된다.
- values 폴더는 문자열을 저장하는 string.xml이 있다.
- menu 폴더는 메뉴 xml 파일이 저장되어 있다. 기본적으로 main.xml이 초기메뉴로 지정되어 있다.
(6) AndroidManifest.xml 파일
- 앱의 정보를 담고 있는 파일로 메니페스트 파일이라고 부른다.
5 배운 내용 정리
1) 안드로이드 프로젝트 개발 단계는 다음과 같다.
2) 안드로이드의 기본적인 응용프로그램을 작성해 보았다.
3) 안드로이드 프로젝트에서 프로그래머가 주로 사용하는 내용은 아래와 같다.
. 프로젝트명 + Activity.java : 메인 자바 코드 . main.xml : 초기 화면
. drawable 폴더 : 이미지 파일 저장 . AndroidManifest.xml : 앱의 정보 설정
6 학습 확인하기
1) 안드로이드 응용프로그램 작성 순서를 연결해보자.
A B
①
②
③
④
연결해 보자
ⓐ 프로젝트 실행 및 결과 확인
ⓑ 안드로이드 프로젝트 생성
ⓒ 화면 디자인 및 편집
ⓓ 자바코드 작성 및 수정
2) 안드로이드 프로젝트에서 이미지 등과 같은 리소스를 관리하는 폴더는 무엇인가?
3) ''Hello World' 안드로이드 프로젝트에서 버튼을 클릭하였을 때 “Hi, Android” 토 스트 메시지가 출력되도록 수정해 보아라.
7 지식창고
❍ 참고문헌
[1] 우재남, 이복기, “안드로이드 프로그래밍”, 한빛미디어, 2012 [2] 김상형, “안드로이드 프로그래밍 정복”, 한빛미디어, 2011
❍ 참고사이트
[1]
