13. 멀티미디어와 Google 지도 제목. 13. 멀티미디어와 Google 지도 제목.

Presentation on theme: "13. 멀티미디어와 Google 지도 제목. 13. 멀티미디어와 Google 지도 제목."— Presentation transcript:

1

2 13. 멀티미디어와 Google 지도 제목

3 오디오를 실행하는 방식을 익힌다. 스레드를 이해하고 오디오에 적용한다 Google 지도를 활용하는 앱을 작성한다.

4

5 1. 오디오 개요 스마트폰에서 가장 많이 사용하는 기능 중 하나가 MP3 플레이어
멀티미디어를 동작시키기 위해 제공되는 클래스는 MediaPlayer MediaPlayer 클래스는 음악 및 동영상을 재생해주는 기능을 한다. MediaPlayer의 play( ), pause( ), stop( ) 메소드는 음악을 시작, 일시정지, 정지하는 기능을 한다. 다음 예제를 실행하기 위해서 프로젝트의 res 폴더에 raw 폴더를 만들고,적당한 MP3 파일을 복사해놓는다.

6 1. 오디오 간단한 예제

7 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (1/6)
SD카드의 mp3 파일을 목록으로 출력한 후, 선택한 곡을 재생하는 간단한 MP3 플레이어를 만들자. 프로젝트 정보 프로젝트 이름 : Project13_1 패키지 이름 : com.cookandroid.project13_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project13_1Activity 레이아웃 이름 : main 타이틀 : Project13_1

8 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (2/6) 화면 디자인 1
DDMS에서 AVD의 /mnt/sdcard 폴더에 mp3 파일을 몇 개 넣는다(Push).

9 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (3/6) 화면 디자인 2
리니어레이아웃1 : 리스트뷰(lvMP3) 1개 리니어레이아웃2 : 버튼(btnPlay, btnStop) 2개 리니어레이아웃3 : 텍스트뷰(tvMP3) 1개, 프로그래스바(pbMP3) 1개 layout_weight는 6:1:1 정도로 설정

10 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (4/6) Java 코딩 1 : 전역변수 선언 리스트뷰 변수 1개
<듣기>, <중지> 변수 2개 텍스트뷰에 변수 1개 프로그래스바 변수 1개 MP3 파일 목록이 저장될 ArrayList<String> 변수 1개 리스트뷰에서 선택된 MP3 파일 이름이 저장될 변수 1개 MP3 파일이 저장되어 있는 SD카드의 절대 경로를 저장할 문자열 변수 1개 MediaPlayer 변수 1개

11 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (5/6) Java 코딩 2
SD카드의 MP3 파일을 읽어서 리스트뷰에 출력하는 부분을 작성

12 1. 오디오 [실습13-1] 간단 MP3 플레이어 만들기 (6/6) Java 코딩 3
<듣기>, <중지>를 클릭했을 때 동작하는 리스너를 코딩

13 1. 오디오 [직접 풀어보기 13-1] [실습 13-1]은 일시정지(Pause) 버튼이 없다. 이를 구현하자.
<일시정지>를 클릭하면, 음악이 멈추고 버튼 이름이 <이어듣기>로 변경되어야 한다. <중지>를 클릭하면 다시 초기화되어야 한다.

14 2. 스레드 ▶ 프로그래스바와 시크바 개요 프로그래스바 예제 (1/2) : XML 코드
프로그래스바는 작업의 진행 상태를 확인할 때, 시크바는 음악이나 동영상 재생의 위치를 지정할 때 많이 활용 프로그래스바 예제 (1/2) : XML 코드

15 2. 스레드 ▶ 프로그래스바와 시크바 프로그래스바 예제 (2/2) : Java 코드

16 2. 스레드 ▶ 스레드 기본 스레드 개요 스레드(Thread)는 동시에 여러 작업을 수행하기 위해 사용되는 개념으로, 멀티 스레드(Multi-Thread)라고도 부른다. 또는 경량 프로세스라고도 하는데, 이는 스레드가 프로세스(전체 프로그램 동작) 안에서 동작하는 작은 단위이기 때문이다

17 2. 스레드 ▶ 스레드 기본 스레드 기본 예제 (1/3) : XML 코드

18 2. 스레드 ▶ 스레드 기본 스레드 기본 예제 (2/3) : Java 코드 - 동작안함

19 2. 스레드 ▶ 스레드 기본 기본 스레드 형식

20 2. 스레드 ▶ 스레드 기본 스레드 기본 예제 (3/3) : Java 코드 - 동작함

21 2. 스레드 ▶ UI 스레드 UI 스레드 개요 UI 스레드 예제 (1/3) : XML 코드
UI(User Interface) 스레드는 화면의 위젯을 변경할 때 사용 일반적인 스레드는 스레드안에서 필요한 내용을 계산하는 것만 가능하며, 화면의 다른 위젯을 변경할 수 없다. UI 스레드 예제 (1/3) : XML 코드

22 2. 스레드 ▶ UI 스레드 UI 스레드 예제 (2/3) : Java 코드 - 동작안함

23 2. 스레드 ▶ UI 스레드 UI 스레드 기본 형식

24 2. 스레드 ▶ UI 스레드 UI 스레드 예제 (3/3) : Java 코드 - 동작함

25 2. 스레드 ▶ 스레드 응용 스레드 응용 예제 (1/2) : XML 코드 ([실습 13-1]을 수정)

26 2. 스레드 ▶ 스레드 응용 스레드 응용 예제 (2/2) : Java 코드

27 2. 스레드 [직접 풀어보기 13-2] [예제 13-1]과 [예제 13-2]에서 작성한 간단한 음악 재생에 시크바를 추가해보자. 또 시크바를 직접 움직이면 음악이 해당 부분부터 재생되도록 하자. 힌트 : 시크바의 OnSeekBarChangeListener를 생성하고, onProgressChanged( ) 메소드를 다음과 같이 코딩한다. if (fromUser) { mPlayer.seekTo(progress); }

28 3. Google 지도 ▶ Google 지도 사용을 위한 준비 사항
[실습13-2] Google사의 API 키 얻기 (1/4) 명령 프롬프트에서 현재 사용자의 홈 폴더 아래의 .android 폴더로 이동 CookAndroid.exe 압축을 풀어서 사용 중이라면 C:\CookAndroid\android-sdk\.android\로 이동

29 3. Google 지도 ▶ Google 지도 사용을 위한 준비 사항
[실습13-2] Google사의 API 키 얻기 (2/4) Java SDK에 포함된 keytool.exe를 실행해서, 결과 중에서 [인증서 지문:] 부분의 “MD5:” 다음에 나오는 키를 복사

30 3. Google 지도 ▶ Google 지도 사용을 위한 준비 사항
[실습13-2] Google사의 API 키 얻기 (3/4) Google 사이트( 복사한 키를 붙여넣은 후 <Generate API Key> 를 클릭

31 3. Google 지도 ▶ Google 지도 사용을 위한 준비 사항
[실습13-2] Google사의 API 키 얻기 (4/4) XML 코드로 된 부분을 복사해서 메모장 등에 붙여 넣고,저장해둔다. 추후 현재 컴퓨터에서 사용할 Google 지도는 이 부분을 복사해서 사용하면 된다.

32 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
맵뷰 개요 맵뷰(MapView)는 Google 지도 서비스에서 받은 지도를 화면에 출력하는 기능을 한다. 확대, 축소, 이동 같은 기본 기능이 제공되고, 그 외의 기능을 활용하려면 오버레이(Overlay)를활용해야 한다. 오버레이는 지도(맵뷰) 위의 투명한 유리막을 얹어 놓는 개념으로 생각하면된다. 이 유리막(오버레이)에 원하는 그림을 그리면 지도 위에 그림이 그리는 듯한 효과를 준다 .

33 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
메뉴 버튼을 클릭하면 위성 지도 보기와 일반 지도보기를 선택할 수 있도록 하고, 월드컵경기장으로 바로 찾아가는 메뉴도 추가한다. 지도 화면을 클릭하면 CCTV 모양의 아이콘이 지도 위에 찍히는 기능도 추가하자. 프로젝트 정보 프로젝트 이름 : Project13_3 패키지 이름 : com.cookandroid.project13_3 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project13_3Activity 레이아웃 이름 : main 타이틀 : Project13_3

34 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
화면 디자인 1 : AndroidManifest.xml 편집

35 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
화면 디자인 2 : main.xml 편집 복사해놓은 XML 코드를 붙여넣고, id와 clickable 속성을 지정

36 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
Java 코딩 1 MapActivity 클래스를 상속받은 후, 추상 클래스인 isRouteDisplayed( ) 메소드를 완성.

37 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
Java 코딩 2 MapView 위젯 변수, MapController 변수를 전역변수로 선언한다. MapView 위젯에 대응시키고, 줌 컨트롤을 보이도록 설정한다. 위성 사진이 보이지 않도록 설정한다. MapControl 변수에 값을 대입하고, 초기 화면 축척을 지정한다.

38 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
Java 코딩 3 옵션 메뉴에 위성 지도/일반 지도 /월드컵경기장 바로가기 3개를 생성한다. 위성 지도를 선택하면 위성 지도가 켜지고, 일반 지도를 선택하면 위성 지도가 꺼지도록 한다. 월드컵경기장의 좌표는 위도 , 경도 이다.

39 3. Google 지도 ▶ 맵뷰를 이용한 프로그래밍
Java 코딩 4 지도를 클릭하면 표시한 CCTV 모양의 아이콘이 지도에 생성되도록 코딩.

40 3. Google 지도 [직접 풀어보기 13-3] [실습 13-3]은 월드컵경기장 하나만 바로가기가 있다. 추가로 유명한 장소의 바로 찾아가기를 세 군데 정도 생성하자. 또 클릭하면 생기는 아이콘도 변경하자.

41 MediaPlayer의 play( ), pause( ), stop( ) 메소드는 음악을 시작, 일시정지, 정지시키는 기능을 한다.
스레드(Thread)는 여러 작업을 동시에 수행하기 위해 사용되는 개념으로, 멀티 스레드(Multi-Thread)라고도 부른다. UI(User Interface) 스레드는 화면의 위젯들을 변경할 때 사용한다. 일반적인 스레드는 그 안에서 필요한 내용을 계산하는 것만 가능하며, 화면의 다른 위젯을 변경할 수 없다. 맵뷰(MapView)는 Google 지도 서비스에서 받은 지도를 화면에 출력하는 기능을 한다. 그리고 확대, 축소, 이동 같은 기본 기능도 제공된다. 자신의 추가 내용을 지도에 표시하려면 오버레이(Overlay)를 활용해야 한다. 오버레이는 지도(맵뷰) 위에 투명한 유리막을 얹어 놓는 개념으로 생각하면 된다.

42