첫 번째 애플리케이션 첫째 마당 - Chapter 03 Do It! 안드로이드 앱 프로그래밍 Jun. 2013

Presentation on theme: "첫 번째 애플리케이션 첫째 마당 - Chapter 03 Do It! 안드로이드 앱 프로그래밍 Jun. 2013"— Presentation transcript:

1 첫 번째 애플리케이션 첫째 마당 - Chapter 03 Do It! 안드로이드 앱 프로그래밍 Jun. 2013
○ 본 강의 자료는 이지스퍼블리싱(주)에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2013, 정재곤, “Do it! 안드로이드 앱 프로그래밍(개정판)”, 이지스퍼블리싱(주) - 강의 교안에 사용된 화면 캡쳐나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다. 이지스퍼블리싱(주) 제공 강의 교안 저자 : 정재곤

2

3 안드로이드가 처음이라서 앱을 만드는 것이 어렵고 복잡할 것 같아요.
이번 장에서는 무엇을 다룰까요? 안드로이드가 처음이라서 앱을 만드는 것이 어렵고 복잡할 것 같아요. 아무것도 몰라도 따라해보면서 살펴볼까요? 첫 번째 애플리케이션을 만드는 과정이 어려운지 볼까요? 잘 몰라도 간단하게 따라 면서 만들 수 있는 기능은 어느 정도일까요?

4 이번 장에서는 무엇을 다룰까요? 프로젝트 만들기 하나씩 바꾸어보기 여러 개의 버튼에 기능 추가하기 새로운 화면 만들어 띄워주기

5 안드로이드 프로젝트를 위한 기초적인 코드 무작정 따라하기
강의 주제 및 목차 강의 주제 안드로이드 프로젝트를 위한 기초적인 코드 무작정 따라하기 1 프로젝트 만들기 목 차 2 하나씩 바꾸어 보기 3 여러 개의 버튼에 기능 추가하기 4 새로운 화면 만들어 띄워주기

6 첫째 마당 – CH3. 첫 번째 애플리케이션 1. 프로젝트 만들기

7 이클립스의 New 메뉴로 프로젝트 만들기 New  “Android Application Project” 선택  프로젝트 기본정보 입력 프로젝트 이름과 패키지 이름 수정 테마(Theme)은 ‘None’으로 변경 Android Application Project 선택 1. 프로젝트 만들기

8 프로젝트 기본 정보 입력 몇 가지 단계를 계속 [Next >] 버튼만 눌러 이동 마지막에 [Finish] 버튼 누름
1. 프로젝트 만들기

9 생성된 프로젝트 확인 왼쪽의 패키지 탐색기 화면에 새로 만들어진 HelloWorld 프로젝트 표시
오른쪽에 자동으로 만들어진 화면 표시 1. 프로젝트 만들기

10 AVD 매니저 화면 띄우기 왼쪽에서 여섯 번째 아이콘을 눌러 AVD 매니저 화면 띄우기 1. 프로젝트 만들기

11 가상 디바이스(에뮬레이터) 만들기 New 를 눌러 보이는 화면에서 파라미터를 입력하면 에뮬레이터를 위한 가상 디바이스 생성
에뮬레이터 이름 입력 : Android42 디바이스 선택 : 4.65’’ 720p … 또는 기타 플랫폼 선택 : Android 4.2.2 CPU/ABI 선택 : MIPS Memory Options의 RAM : ‘700’ 으로 수정 SD Card의 Size : 100 1. 프로젝트 만들기

12 에뮬레이터 띄우기 에뮬레이터를 띄우면서 크기를 줄일 수도 있음 1. 프로젝트 만들기

13 프로젝트 실행하기 프로젝트 선택 후 오른쪽 마우스 버튼을 누르고,
Run As > Android Application 메뉴를 눌러 프로젝트 실행 1. 프로젝트 만들기

14 setContentView(R.layout.activity_main);
자동으로 만들어진 자바코드 살펴보기 가장 중요하면서도 유일한 한 줄의 자바코드가 있음 [HelloWorld>/src/org.androidtown.helloworld/MainActivity.java] ... setContentView(R.layout.activity_main); 1. 프로젝트 만들기

15 자동으로 만들어진 XML 코드 살펴보기 XML로 된 파일들과 그 안의 생소한 태그들을 볼 수 있음 1. 프로젝트 만들기

16 XML 파일 따라가 보기 strings.xml 파일에서 에뮬레이터에 떴던 글자를 찾을 수 있음 1. 프로젝트 만들기

17 글자를 화면에 보여주는 과정 이해하기 여러 단계를 거쳐 글자를 화면에 표시함 1. 프로젝트 만들기

18 첫째 마당 – CH3. 첫 번째 애플리케이션 2. 하나씩 바꾸어 보기

19 XML 파일에서 글자 바꾸어 보기 글자가 저장된 위치를 알면 화면에 표시된 글자를 간단하게 바꿀 수 있음
[HelloWorld>/res/values/strings.xml] <?xml version="1.0"encoding="utf-8"?> <resources> <string name="app_name">HelloWorld</string> <string name="action_settings">Settings</string> <string name="hello_world">안녕 안드로이드!</string> </resources> 2. 하나씩 바꾸어 보기

20 텍스트를 버튼으로 바꾸어 보기 XML의 태그 이름만 바꾸어도 텍스트를 버튼으로 변경할 수 있음
[HelloWorld>/res/layout/activity_main.xml] <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> 2. 하나씩 바꾸어 보기

21 버튼을 눌렀을 때의 이벤트를 처리하기 위한 과정
● XML 레이아웃 파일에 들어있는 버튼에 ID 추가하기 ● 자바 코드에서 레이아웃 파일에 정의된 버튼 객체 참조하기 ● 이벤트 처리 코드 추가하기 * 화면을 위한 XML에 정의된 버튼과 기능을 구현하는 소스 파일 간의 연결 고리를 만들어주는 과정 2. 하나씩 바꾸어 보기

22 XML 파일에서 ID 추가하기 [HelloWorld>/res/layout/activity_main.xml]
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> 1 ID 속성 추가 2. 하나씩 바꾸어 보기

23 자바코드에서 ID로 버튼 참조하기 [HelloWorld>src/org.androidtown.helloworld/MainActivity.java] ... // 버튼 객체 참조 Button startBtn = (Button)findViewById(R.id.startBtn); 2. 하나씩 바꾸어 보기

24 이벤트 처리코드 추가하기 [HelloWorld>src/org.androidtown.helloworld/MainActivity.java] … public class MainActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button startBtn = (Button) findViewById(R.id.startBtn); startBtn.setOnClickListener(new OnClickListener() { public void onClick(View v) { Toast.makeText(getApplicationContext(), "시작 버튼이 눌렸어요.", Toast.LENGTH_LONG).show(); } }); 1 버튼 객체 참조 2 버튼 이벤트 처리 2. 하나씩 바꾸어 보기

25 잠깐 떴다 사라지는 메시지 보여주기 토스트(Toast)라는 클래스를 이용하면 잠깐 떴다 사라지는 메시지가 보여짐
2. 하나씩 바꾸어 보기

26 첫째 마당 – CH3. 첫 번째 애플리케이션 3. 여러 개의 버튼에 기능 추가하기

27 XML 파일에 또 다른 버튼들 추가하기 <Button android:id="@+id/startBtn"
[HelloWorld>/res/layout/activity_main.xml] <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> android:text="네이버 접속하기" /> android:text="전화 걸기" /> 1 첫 번째 버튼 정의 2 두 번째 버튼 정의 3 세 번째 버튼 정의 3. 여러 개의 버튼에 기능 추가하기

28 새로 추가된 버튼에 이벤트 처리 코드 넣기 Button start02Btn = (Button) findViewById(R.id.start02Btn); start02Btn.setOnClickListener(new OnClickListener() { public void onClick(View v) { Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(" startActivity(myIntent); } }); Button start03Btn = (Button) findViewById(R.id.start03Btn); start03Btn.setOnClickListener(new OnClickListener() { Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("tel: ")); 2 두 번째 버튼 이벤트 처리 3 세 번째 버튼 이벤트 처리 3. 여러 개의 버튼에 기능 추가하기

29 버튼을 눌러 웹페이지 접속과 전화 걸기 인텐트(Intent) 라는 것을 사용하면 “ “tel:...” 만으로도 웹 페이지 접속과 전화걸기 가능 3. 여러 개의 버튼에 기능 추가하기

30 첫째 마당 – CH3. 첫 번째 애플리케이션 4. 새로운 화면 만들어 띄워주기

31 새로운 화면을 만들어 띄워주는 과정 ● 새로운 액티비티 만들기 ● 새로운 레이아웃 만들기 ● 매니페스트에 태그 추가하기
● 새로운 액티비티 시작 코드 넣기 4. 새로운 화면 만들어 띄워주기

32 액티비티 복사하여 만들기 기존 액티비티 코드 파일을 복사(Ctrl + C)하고 붙여넣기(Ctrl + V)하여 새로운
액티비티 코드를 만들 수 있음 4. 새로운 화면 만들어 띄워주기

33 XML 파일 수정하기 복사한 XML 파일의 내용을 수정함
[HelloWorld>/res/layout/new_activity.xml] <Button android:layout_width=" wrap_content " android:layout_height="wrap_content" android:text="돌아가기" /> 1 돌아가기 버튼 정의 4. 새로운 화면 만들어 띄워주기

34 자바 코드 파일 수정하기 [HelloWorld>/src/org.androidtown.helloworld/NewActivity.java] … public class NewActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.new_activity); Button backBtn = (Button) findViewById(R.id.backBtn); backBtn.setOnClickListener(new OnClickListener() { public void onClick(View v) { Toast.makeText(getApplicationContext(), "돌아가기 버튼이 눌렸어요.", Toast.LENGTH_LONG).show(); finish(); } }); 1 돌아가기 버튼 이벤트 처리 4. 새로운 화면 만들어 띄워주기

35 매니페스트에 새로 만든 액티비티 추가하기 AndroidManifest.xml 파일에 <activity> 태그 추가
[HelloWorld>AndroidManifest.xml] ... <activity android:name=".NewActivity"> </activity> 4. 새로운 화면 만들어 띄워주기

36 버튼 눌렀을 때 새로 만든 액티비티 띄우기 [HelloWorld>/src/org.androidtown.helloworld/MainActivity.java] ... Button startBtn = (Button) findViewById(R.id.startBtn); startBtn.setOnClickListener(new OnClickListener() { public void onClick(View v) { Toast.makeText(getApplicationContext(), "시작 버튼이 눌렸어요.", Toast.LENGTH_LONG).show(); Intent myIntent = new Intent(getApplicationContext(), NewActivity.class); startActivity(myIntent); } }); 4. 새로운 화면 만들어 띄워주기

37 실행 화면 4. 새로운 화면 만들어 띄워주기

38 기억하면 좋은 내용 무작정 따라한 내용들을 앞으로 살펴볼 것이므로 아래 단어와 내용들을 기억해 보자. 알아둘 내용 설명
프로젝트 만들기 이클립스에서 안드로이드 프로젝트를 만들 수 있습니다. setContentView() 화면에 무엇을 보여줄 지를 결정하는 함수(메소드)입니다. R.layout.activity_main 화면에 보여줄 대상이 되는 XML의 위치를 지정합니다. /res/layout/activity_main.xml 위의 R.layout.activity_main에 해당하는 프로젝트 안의 파일입니다. @string/hello 어떤 글자를 사용할 것인지 지정합니다. /res/values/strings.xml 같은 글자가 저장된 프로젝트의 안의 파일입니다. @+id/startBtn Activity_main.xml 파일 안에 있는 태그의 ID를 지정하는 방식입니다. findViewById() XML에서 정의한 태그의 ID를 이용해 코드에서 객체를 참조합니다. setOnClickListener() 버튼을 눌렀을 때 어떤 기능을 할지 간단하게 지정하는 함수입니다. Intent 어떤 기능을 실행할 지를 지정하기 위해 사용합니다. Toast 화면에 잠깐 보였다 없어지는 메시지를 간단하게 보여주고 싶을 때 사용합니다. 4. 새로운 화면 만들어 띄워주기

39 참고 문헌 [ References] References 기본 서적
2013, 정재곤, “Do it! 안드로이드 앱 프로그래밍(개정판)”, 이지스퍼블리싱(주) Android Website Google Developer’s Conference Android SDK Documentation References