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

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

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

이번 장에서는 무엇을 다룰까요?

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

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

Quick Start 화면에서 새로운 프로젝트 만들기 (1) ‘Start a new Android Studio Project’ 메뉴 선택 1. 프로젝트 만들기

프로젝트 이름 입력하기 (2) Application name: 항목에 ‘Hello’ 입력 Company Domain: 항목에 ‘androidtown.org’ 입력 1. 프로젝트 만들기

대상 단말 종류 선택하기 (3) ‘Phone and Tablet’이 선택된 상태로 둠 1. 프로젝트 만들기

첫 화면의 모양 선택하기 (4) ‘Blank Activity’가 선택된 상태로 둠 1. 프로젝트 만들기

마지막 화면에서 [Finish] 버튼 눌러 생성하기 1. 프로젝트 만들기

생성된 프로젝트 확인 왼쪽의 프로젝트 화면에 새로 만들어진 프로젝트의 내용 표시 오른쪽에 자동으로 만들어진 두 개 파일이 탭으로 표시 1. 프로젝트 만들기

AVD 매니저 화면 띄우기 오른쪽 끝에서 네 번째 아이콘을 눌러 AVD 매니저 화면 띄우기 1. 프로젝트 만들기

가상 디바이스(에뮬레이터) 만들기 하드웨어 선택 – Phone 중 Nexus 5 선택 1. 프로젝트 만들기

가상 디바이스(에뮬레이터) 만들기 시스템 이미지 선택 – Lollipop 중 armeabi-v7a 선택 1. 프로젝트 만들기

가상 디바이스(에뮬레이터) 만들기 선택된 정보 확인 – 제대로 선택되었는지 확인 후 아래쪽 [Show Advanced Settings] 클릭 1. 프로젝트 만들기

가상 디바이스(에뮬레이터) 만들기 메모리와 키보드 속성 변경 – RAM 은 700 으로 입력, ‘Enable keyboard Input’은 체크 해제 1. 프로젝트 만들기

에뮬레이터 띄우기 새로운 만들어진 에뮬레이터 확인 후 오른쪽의 실행 버튼 클릭 1. 프로젝트 만들기

에뮬레이터 띄우기 1. 프로젝트 만들기

프로젝트 실행하기 상단 툴바의 실행 버튼 클릭  실행되어 있는 에뮬레이터 선택  에뮬레이터에 앱 실행 1. 프로젝트 만들기

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

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

자동으로 만들어진 XML 코드 살펴보기 XML 파일의 디자인 화면과 텍스트 화면 1. 프로젝트 만들기

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

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

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

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

안드로이드 스튜디오의 글자 크기 변경 File > Settings 메뉴  IDE Settings > Editor > Colors & Fonts > Font 2. 하나씩 바꾸어 보기

안드로이드 스튜디오의 글자 크기 변경 폰트 설정 저장한 후 폰트 지정하고 [OK] 버튼 클릭 2. 하나씩 바꾸어 보기

안드로이드 스튜디오의 줄번호 보이기 편집 화면의 왼쪽 영역에서 오른쪽 마우스 클릭  Show Line Numbers 2. 하나씩 바꾸어 보기

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

* 화면을 위한 XML에 정의된 버튼과 기능을 소스 간의 연결 고리를 만들어주는 과정 버튼을 눌렀을 때의 동작하도록 하기 위한 과정 ● 방법 1 : 버튼에 onClick 속성으로 메소드 추가 ● 방법 2 : 자바 소스에서 버튼 객체를 찾은 후 이벤트 처리 코드 추가  둘째 마당에서 해 볼 내용 1. XML 레이아웃 파일에 들어있는 버튼에 onClick 속성 추가 2. 자바 코드에서 onClick 속성의 값으로 넣었던 메소드와 동일한 이름의 메소드 추가 1. XML 레이아웃 파일에 들어있는 버튼에 ID 추가하기 2. 자바 코드에서 레이아웃 파일에 정의된 버튼 객체 참조하기 3. 이벤트 처리 코드 추가하기 * 화면을 위한 XML에 정의된 버튼과 기능을 소스 간의 연결 고리를 만들어주는 과정 2. 하나씩 바꾸어 보기

버튼 동작 방법 1 XML 파일의 버튼에 onClick 속성 추가 2. 하나씩 바꾸어 보기 [Hello>/res/layout/activity_main.xml] <Button android:layout_width="wrap_content" android:layout_height="wrap_content“ android:onClick=“onButton1Clicked" android:text="@string/hello_world" /> 2. 하나씩 바꾸어 보기

버튼 동작 방법 1 자바 파일에 onClick 속성에 추가했던 값과 똑같은 이름의 메소드 추가 [Hello>/java/org.androidtown.hello/MainActivity.java] public void onButton1Clicked(View v) { Toast.makeText(getApplicationContext(), “시작 버튼이 눌렸어요.”, Toast.LENGTH_LONG).show(); } 2. 하나씩 바꾸어 보기

자동으로 import되도록 설정 변경 File > Settings 화면 보이면 IDE Settings > Editor > Auto Import 2. 하나씩 바꾸어 보기

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

Design 탭에서 버튼 새로 추가 3. 여러 개의 버튼에 기능 추가하기

이름 속성과 onClick 속성 설정 3. 여러 개의 버튼에 기능 추가하기

XML 파일에 또 다른 버튼들 추가하기 <Button android:id=”@+id/button” [Hello>/res/layout/activity_main.xml]   <Button android:id=”@+id/button” android:layout_width=”wrap_content” android:layout_height=”wrap_content“ android:layout_alignParentTop=”true“ android:layout_alignParentLeft=”true“ android:layout_alignParentStart=”true” android:onClick=”onButton1Clicked” android:text=”네이버 접속하기” /> android:id=”@+id/button2” android:layout_height=”wrap_content” android:layout_below=”@+id/button” android:onClick=”onButton2Clicked” android:text=”전화 걸기” /> 1 첫 번째 버튼 정의 2 두 번째 버튼 정의 3. 여러 개의 버튼에 기능 추가하기

XML 파일에 또 다른 버튼들 추가하기 public void onButton1Clicked(View v) { [Hello>/java/org.androidtown.hello/MainActivity.javal]   public void onButton1Clicked(View v) { Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(“http://m.naver.com”)); startActivity(myIntent); } public void onButton2Clicked(View v) { Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(“tel:010-1000-1000”)); 3. 여러 개의 버튼에 기능 추가하기

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

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

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

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

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

자바 코드 파일 수정하기 [Hello>/java/org.androidtown.hello/NewActivity.java]   … public class NewActivity extends ActionBarActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_new); } public void onBackButtonClicked(View v) { Toast.makeText(getApplicationContext(), "돌아가기 버튼이 눌렸어요.", Toast.LENGTH_LONG).show(); finish(); 1 돌아가기 버튼 이벤트 처리 4. 새로운 화면 만들어 띄워주기

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

첫 화면에 버튼 하나 더 추가 4. 새로운 화면 만들어 띄워주기

버튼 눌렀을 때 새로 만든 액티비티 띄우기 [Hello>/java/org.androidtown.hello/MainActivity.java] ... public void onButton1Clicked(View v) { Intent myIntent = new Intent(getApplicationContext(), NewActivity.class); startActivity(myIntent); } }); 4. 새로운 화면 만들어 띄워주기

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

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

참고 문헌 [ References] References 기본 서적 2015, 정재곤, “Do it! 안드로이드 앱 프로그래밍(개정2판)”, 이지스퍼블리싱(주) Android Website http://www.android.com/ Google Developer’s Conference http://code.google.com/events/io/ Android SDK Documentation References