06. 고급 위젯 다루기 제목. 06. 고급 위젯 다루기 제목 고급 위젯을 다루는 방법을 익힌다. 뷰 컨테이너와 그 응용법을 학습한다. 매니패스트 파일의 설정법을 배운다.

Presentation on theme: "06. 고급 위젯 다루기 제목. 06. 고급 위젯 다루기 제목 고급 위젯을 다루는 방법을 익힌다. 뷰 컨테이너와 그 응용법을 학습한다. 매니패스트 파일의 설정법을 배운다."— Presentation transcript:

1

2 06. 고급 위젯 다루기 제목

3 고급 위젯을 다루는 방법을 익힌다. 뷰 컨테이너와 그 응용법을 학습한다. 매니패스트 파일의 설정법을 배운다.

4

5 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 아날로그 시계, 디지털 시계 아날로그 시계, 디지털 시계 XML 코드 예제

6 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 크로노미터 크로노미터 XML 코드 예제

7 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 타임피커 데이트피커 캘린더뷰 타임피커, 데이트피커, 캘린더뷰 XML 코드 예제
타임피커 데이트피커 캘린더뷰 타임피커, 데이트피커, 캘린더뷰 XML 코드 예제 캘린더뷰는 허니콤(3.0)부터 지원됨

8 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (1/8)
시간 및 날짜와 관련된 위젯을 이용해서 "날짜/시간 예약" 앱을 만들자 프로젝트 정보 프로젝트 이름 : Project6_1 패키지 이름 : com.cookandroid.project6_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project6_1Activity 레이아웃 이름 : main 타이틀 : Project6_1

9 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (2/8)
화면 디자인 (1/2) : 바깥의 LinearLayout 안에 다음과 같이 구성 LinearLayout Chronometer 1개, Button 1개 위젯의 id는 chronometer1, btnStart RadioGroup RadioButton 2개 라디오버튼 위젯의 id는 rdoCal, rdoTime FrameLayout을 두고 안에 CalendarView 1개, TimePicker 1개 LinearLayout의 layout_weight를 1로 설정 위젯의 id는 calendarView1, timePicker1 Button 1개와 TextView 10개 버튼의 id는 btnEnd로, 텍스트 뷰는 홀수차례에만 id를 tvYear, tvMonth, tvDay, tvHour, tvMinute로 한다.

10 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (3/8) 화면 디자인 (2/2)

11 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (4/8) Java 코딩 1
main.xml에서 id를 부여한 12개 위젯에 대응할 위젯 변수 12개 선언

12 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (5/8) Java 코딩 2
12개 위젯변수에 위젯을 대입. 처음에는 캘린더뷰와 타임피커는 보이지 않도록 설정

13 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (6/8) Java 코딩 3
라디오버튼을 클릭하면 캘런더뷰와 타임피커 중 하나씩만 보이도록 클릭이벤트 리스너를 작성

14 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (7/8) Java 코딩 4
<예약 시작>을 클릭하면 크로노미터가 시작하고 <예약 완료>를 클릭하면 정지하도록 클릭이벤트 리스너를 작성

15 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [실습6-1] 날짜/시간 예약 앱 만들기 (8/8) Java 코딩 5
<예약 완료>를 클릭하면 캘린더뷰에서 설정한 연, 월, 일과 타임피커에서 설정한 시, 분이 제일 아래 텍스트뷰에 채움

16 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [직접 풀어보기 6-1] <실습 6-1>을 다음과 같이 변경하자.
캘리더뷰 대신에 데이트피커를 사용해서 날짜를 설정 <예약 시작>버튼과 <예약 완료> 버튼은 없애자. 대신 <예약 시작>기능은 크로노미터를 클릭하면, <예약 완료>기능은 아래쪽 연도를 롱클릭하면 작동하도록 한다. 크로노미터를 클릭하기 전에는 라디오버튼, 데이트피커, 타임피커가 안 보이도록 설정하고, 크로노미터를 클릭하면 라디오버튼이 나타나도록 한다. 또 아래쪽 연도를 롱클릭하면 라디오버튼, 데이트피커, 타임피커가 다시 사라진다.

17 1. 고급 위젯 ▶ 기타 관련 위젯 자동완성텍스트뷰, 멀티자동완성텍스트뷰
사용자가 단어의 일부만 입력해도 자동완성되는 에디트텍스트 자동완성텍스트뷰는 1개 단어만, 멀티자동완성텍스트뷰는 쉼표(,)로 구분하여 여러 개 단어가 자동완성됨. Android SDK Tools r20에서는 젤리빈 환경에서 EditText, AutoCompleteTextView, MultiAutoCompleteTextView에 약간의 버그가 있어서 속성 중 inputType을 꼭 지정해야 했으나, r 버전부터 그 버그가 해결되어서 inputType 속성을 넣지 않아도 된다.

18 1. 고급 위젯 ▶ 기타 관련 위젯 자동완성텍스트뷰, 멀티자동완성텍스트뷰 XML코드 예제

19 1. 고급 위젯 ▶ 기타 관련 위젯 자동완성텍스트뷰, 멀티자동완성텍스트뷰 Java 코드

20 1. 고급 위젯 ▶ 기타 관련 위젯 프로그래스바, 시크바, 래이팅바
프로그래스바(ProgressBar)는 작업의 진행상황을 바(Bar) 형태나 원 형태로 제공 시크바(SeekBar)는 프로그래스바의 하위 클래스로 프로그래스바와 대부분 비슷하며, 추가로 사용자가 터치로 임의 조절이 가능 래이팅바(RainngBar)는 별 모양으로 진행 상황이 표시

21 1. 고급 위젯 ▶ 기타 관련 위젯 프로그래스바, 시크바, 래이팅바 XML 코드 예제
세 위젯은 Java 코드와 연동되어야 의미가 있음. Java코드와 연동은 다른 장에서 필요할 때 다시 언급하겠음.

22 2. 뷰 컨테이너▶ 간단한 기능의 뷰 컨테이너 스크롤뷰
위젯이나 레이아웃이 화면에 넘칠 때, 스크롤뷰(ScrollView)에 넣어 놓으면 스크롤 효과를 낼 수 있음 스크롤뷰는 수직(위아래)로 스크롤하는 기능을 하며, 수평(좌우)로 스크롤 하는 뷰는 수평스크롤뷰(HorizontalScrollView)가 따로 있음 스크롤뷰에는 하나의 위젯만 넣을 수 있음

23 2. 뷰 컨테이너▶ 간단한 기능의 뷰 컨테이너 스크롤뷰 XML 코드 예제

24 2. 뷰 컨테이너▶ 간단한 기능의 뷰 컨테이너 슬라이딩드로어 기본 형태
사전적 의미로 '서랍'을 뜻하는 슬라이딩드로어(SlidiingDrawer)는 위젯들을 서랍처럼 열어서 보여주거나 닫아서 감춘다. 기본 형태

25 2. 뷰 컨테이너▶ 간단한 기능의 뷰 컨테이너 슬라이딩드로어 XML 코드 예제

26 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
뷰플리퍼 내부에 여러 개의 위젯을 배치한 후, 필요에 따라서 화면을 왼쪽과 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식의 뷰 컨테이너 기본 형태

27 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
뷰플리퍼 XML 코드 예제

28 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)

29 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[직접 풀어보기 6-2] 뷰플리퍼를 이용해서 자동 사진 보기 앱을 작성하자. 적절한 이미지 여러 장이 자동으로 넘어가는 앱을 만든다. <사진보기 시작>과 <사진보기 중지> 버튼을 만들고, <사진보기 시작>을 클릭하면 자동으로 1초 단위로 화면이 넘어간다. 뷰플리퍼 안에 리니어레이아웃을 배치할 필요는 없고, 직접 이미지뷰가 나오면 된다. hint: 화면넘김 시작 메소드는 startFlipping(), 중지 메소드는 stopFlipping()이며, 화면넘김 간격 메소드는 setFlipInterval(밀리초)를 사용하면 된다.

30 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
탭호스트 여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 뷰 컨테이너 기본 형태

31 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
탭호스트 구성 Java 코드

32 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
탭호스트 XML 코드 예제 탭호스트는 진저브레드(Android 2.3, API 10)까지는 잘 지원되지만, 아이스크림 샌드위치 이후에는 약한 경고가 나온다. 사용하지 않는 것을 권장하지만, 그 동안 앱 개발에 상당히 많이 사용되었고 무리없이 작동하므로 알아둘 필요가 있다.

33 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)

34 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[직접 풀어보기 6-3] 탭호스트를 이용해서 동물 선택 앱을 작성하자. 탭위젯을 아래쪽에 배치하고, 탭은 4개가 나오도록 한다. 프레임레이아웃 안의 3개의 리니어레이아웃을 제거하고, 4개의 이미지뷰로 배치한다. hint : 프레임레이아웃의 layout_weight 속성을 1로 준다.

35 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
웹뷰 사용자가 직접 웹브라우저 기능을 앱 안에 포함시킬 수 있는 위젯 실제 웹브라우저처럼 만들려면 상당히 많은 작업을 해야 하며 코드량도 많아짐 매니패스트(AndroidManifest.xml) 파일에 퍼미션을 지정해야 함

36 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (1/8) 에디트텍스트에 URL을 입력하면, 해당 URL로 이동하는 앱을 만든다. 또 화면의 로고,프로그램의 아이콘도 변경시킨다. 프로젝트 정보 프로젝트 이름 : Project6_2 패키지 이름 : com.cookandroid.project6_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project6_2Activity 레이아웃 이름 : main 타이틀 : Project6_2

37 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (2/8) 화면 디자인 리니어레이아웃을 하나 더 만들고, 그 안에 에디트텍스트 1개와 버튼 2개로 구성 하단에는 웹뷰를 생성 각 위젯의 id는 edtUrl, btnGo, btnBack, webView1

38 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (3/8) AndroidManifest.xml 편집 (1/2)

39 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (4/8) AndroidManifest.xml 편집 (2/2)

40 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (5/8) Java 코딩 1 main.xml의 4개 위젯에 대응할 위젯 변수 4개를 전역변수로 선언 각 변수에 위젯을 대입

41 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (6/8) Java 코딩 2 WebViewClient의 상속을 받는 웹뷰클라이언트 클래스를 정의 메소드 자동 오버라이드 CookWebViewClient 클래스 안에 커서를 놓고 이클립스 메뉴 [Source]- [Override/Implements Methods] 를 선택 shouldOverrideUrlLoading() 메소드를 선택

42 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (7/8) Java 코딩 3 생성한 CookWebViewClient 클래스를 웹뷰에 설정 화면 확대/축소 아이콘이 보이도록 설정 두 버튼을 클릭하면 입력한 URL로 이동하거나, 이전 화면으로 돌아가도록 함

43 2. 뷰 컨테이너▶ 복잡한 기능의 뷰 컨테이너 (Java 연동 필요)
[실습6-2] 간단한 웹브라우저 만들기 (8/8) AndroidManifest.xml에 인터넷 사용 퍼미션 추가

44 아날로그 시계(AlanogClock)과 디지털 시계(DigitalClock)는 단순히 화면에 시계를 표시해 준다
아날로그 시계(AlanogClock)과 디지털 시계(DigitalClock)는 단순히 화면에 시계를 표시해 준다. 크로노미터(Chronometer)는 시간을 측정하는 타이머 형식의 위젯이다. 타임피커(TimePicker)는 시간을, 데이트피커(DatePicker)와 캘린더뷰(CalendarView)는 시간 및 날짜를 표시하고 조절한다. 자동완성텍스트뷰 (AutoCompleteTextView)와 멀티자동완성텍스트뷰 (MultiAutoCompleteTextView)는 사용자가 단어의 일부만 입력해도 자동완성되는 에디트텍스트다. 프로그래스바(ProgressBar)는 작업의 진행상황을 바(Bar) 형태나 원모양의 형태로 제공하는데 주로 스레드와 함께 사용된다. 시크바(SeekBar)는 프로그래스바와 대부분 비슷하며, 추가로 사용자가 터치로 임의 조절이 가능하다. 래이팅(RainngBar)는 별 모양으로 진행 상황이 표시되는 위젯으로 서적, 음악, 영화 등에 대한 선호도를 표시할 때 사용된다.

45 스크롤뷰(ScrollView)는 위젯이 많아서 화면에 넘칠 때 스크롤 효과를 낼 수 있는데, 스크롤뷰에는 단 하나의 위젯만 넣을 수 있다.
슬라이딩드로어(SlidiingDrawer)는 서랍처럼 열어서 위젯들을 보여주거나 다시 닫아서 감춘다. 뷰플리퍼(ViewFlipper)는 안에 여러 개의 위젯을 배치한 후, 필요에 따라서 화면을 왼쪽과 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여준다. Java코드와 함께 구성된다. 탭호스트(TabHost)는 여러 탭을 두고 각 탭을 클릭할 때마다, 해당 화면이 나오도록 설정한다. Java코드와 함께 구성된다. 웹뷰(WebView)는 사용자가 직접 웹브라우저 기능을 앱 안에 포함시킬 수 있는 위젯이다. AndroidManifest.xml에 인터넷을 허용하는 퍼미션 <uses-permission android:name="android.permission.INTERNET" />

46