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

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

1

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

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

4 01 고급 위젯 02 뷰 컨테이너

5 1. 고급 위젯 ▶ 날짜/시간 관련 위젯[1/15] 아날로그 시계, 디지털 시계

6 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [2/15] 아날로그 시계, 디지털 시계 예제

7 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [3/15] 크로노미터(Chronometer) 타이머 형식의 위젯
일반적으로 시간을 측정할 때 많이 사용

8 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [4/15] 크로노미터 예제

9 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [5/15] 타임피커, 데이트피커, 캘린더뷰
타임피커(TimePicker) : 시간을 표시, 조절 데이트피커(DatePicker)와 캘린더뷰(CalendarView) : 날짜를 표시, 조절

10 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [6/15] 타임피커, 데이트피커, 캘린더뷰 예제

11 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [7/15] 안드로이드 프로젝트 생성 프로젝트 이름 : Project6_1
패키지 이름 : com.cookandroid.project6_1

12 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [8/15] 화면 디자인 및 편집 LinearLayout RadioGroup
Chronometer 1개와 Button 1개를 둠 위젯의 id는 chronometer1, btnStart로 함 RadioGroup RadioButton 2개를 둠 라디오버튼 위젯의 id는 rdoCal, rdoTime로 함 LinearLayout의 layout_weight를 1로 설정 FrameLayout을 두고 안에 CalendarView 1개, TimePicker 1개를 둠 위젯의 id는 calendarView1, timePicker1로 함 Button 1개와 TextView 10개를 둠 버튼의 id는 btnEnd로, 텍스트 뷰는 홀수 차례에만 id를 tvYear, tvMonth, tvDay, tvHour, tvMinute로 함

13 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [9/15] 화면 디자인 및 편집

14 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [10/15] Java 코드 작성 및 수정 전역변수 선언
activity_main.xml에서 id를 부여한 12개 위젯에 대응할 위젯 변수 12개

15 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [11/15] Java 코드 작성 및 수정
12개 위젯 변수에 위젯을 대입하고 처음에는 캘린더뷰와 타임피커가 보이지 않게 설정

16 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [12/15] Java 코드 작성 및 수정
라디오버튼 클릭시 캘런더뷰와 타임피커 중 하나씩만 보이게 클릭 이벤트 리스너 작성

17 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [13/15] Java 코드 작성 및 수정
<예약 시작>을 클릭하면 크로노미터가 시작하고 <예약 완료>를 클릭하면 정지하도 록 클릭이벤트 리스너를 작성

18 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [14/15] Java 코드 작성 및 수정
<예약 완료>를 클릭하면 캘린더뷰에서 설정한 연, 월, 일과 타임피커에서 설정한 시, 분이 맨아래 텍스트뷰에 채워지도록 함

19 1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [15/15]

20 1. 고급 위젯 ▶ 기타 위젯[1/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 사용자가 단어의 일부만 입력해도 자동완성됨
자동완성텍스트뷰는 1개, 멀티자동완성텍스트뷰는 쉼표로 구분하여 자동완성

21 1. 고급 위젯 ▶ 기타 위젯[2/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 예제

22 1. 고급 위젯 ▶ 기타 위젯[3/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 Java 코드

23 1. 고급 위젯 ▶ 기타 위젯[4/5] 프로그래스바, 시크바, 래이팅바
프로그래스바(ProgressBar) : 작업의 진행 상황을 바(Bar)나 원 형태로 제공 시크바(SeekBar) : 프로그래스바와 대부분 비슷, 사용자 터치로 임의 조절 가능 래이팅바(RatingBar) : 진행 상황을 별 모양으로 표시

24 1. 고급 위젯 ▶ 기타 위젯[5/5] 프로그래스바, 시크바, 래이팅바 예제

25 2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[1/4]
스크롤뷰(ScrollView) 스크롤뷰는 수직(위아래)으로 스크롤하는 기능 수평(좌우)으로 스크롤하는 수평스크롤뷰(HorizontalScrollView)는 따로 있음 주의할 점은 스크롤뷰에는 단 하나의 위젯만 넣을 수 있음

26 2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[2/4]
스크롤뷰 예제

27 2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[3/4]
슬라이딩드로어(SlidingDrawer) 슬라이딩드로어(SlidingDrawer)의 사전적 의미는 서랍을 뜻함 위젯들을 서랍처럼 열어서 보여주거나 닫아서 감춤 슬라이딩드로어의 일반적 형태

28 2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[4/4]
슬라이딩드로어 예제

29 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[1/28]
뷰플리퍼(ViewFlipper) 안에 여러 개의 위젯을 배치한 후, 필요에 따라서 화면을 왼쪽과 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식의 뷰 컨테이너 뷰플리퍼의 일반적 형태

30 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[2/28]
뷰플리퍼 예제

31 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[3/28]
뷰플리퍼 Java 코드

32 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[4/28]

33 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[5/28]
탭호스트(TabHost) 여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 뷰 컨테이너 탭 호스트의 구성

34 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[6/28]
탭호스트 탭을 생성하고 탭화면을 연결하기 위한 Java 코드 형식 탭스팩(TabSpec) : 탭을 구성하는 요소들의 집합

35 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[7/28]
탭호스트 예제

36 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[8/28]
탭호스트 Java 코드

37 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[9/28]

38 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[10/28]
액션바(Action Bar) 액션바(Action Bar)는 허니콤(Android 3.0, API 11)에서 태블릿과 같은 대형화면에서 여러 화면을 사용하기 위해서 고안 태블릿, 스마트폰 등 다양한 크기의 화면을 디자인하는 데 활용 프래그먼트(Fragment) 액티비티보다 작은 단위의 화면 프래그먼트를 사용하면 대형화면에서 액티비티 화면을 분할해서 표현 가능 스마트폰과 같은 소형화면에서는 화면의 분할보다는 실행 중에 화면을 동적으로 추가, 제거하는 데 더 많이 활용

39 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[11/28]
액션바와 프래그먼트를 활용하여 화면 구현 액션바를 생성한 후, 탭(Tab) 위젯을 액션바에 등록

40 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[12/28]
액션바와 프래그먼트를 활용하여 화면 구현 액션바에 탭을 추가하는 Java 코드 형식

41 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[13/28]
액션바와 프래그먼트를 활용하여 화면 구현 액션바 Java 코드

42 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[14/28]
액션바와 프래그먼트를 활용하여 화면 구현 Fragment를 상속받는 MyTabFragment 클래스를 내부 클래스로 생성

43 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[15/28]
액션바와 프래그먼트를 활용하여 화면 구현 멤버변수로 프래그먼트 배열 변수를 추가, onTabSelected( ) 메소드 코딩

44 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[16/28]
웹뷰(WebView) 사용자가 웹브라우저 기능을 앱 안에 직접 포함시킬 수 있는 위젯

45 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[17/28]
안드로이드 프로젝트 생성 프로젝트 이름 : Project6_2 패키지 이름 : com.cookandroid.project6_2 화면 디자인 및 편집 리니어레이아웃을 하나 더 만들고, 그 안에 에디트텍스트 1개와 버튼 2개로 구성 하단에는 웹뷰를 만듦 각 위젯의 id는 edtUrl, btnGo, btnBack, webView1로 함

46 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[18/28]
화면 디자인 및 편집

47 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[19/28]
화면 디자인 및 편집 AndroidManifest.xml(매니패스트) : 프로젝트의 전반적인 환경을 설정하는 파일

48 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[20/28]
화면 디자인 및 편집 파일 수정

49 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[21/28]
실행 화면 상단에 아이콘과 타이틀이 변경된 것 확인

50 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[22/28]
Java 코드 작성 및 수정 activity_main.xml의 4개 위젯에 대응할 위젯 변수 4개를 전역변수로 선언 onCreate( ) 메소드 안의 각 변수에 위젯을 대입

51 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[23/28]
Java 코드 작성 및 수정 WebViewClient의 상속을 받는 웹뷰클라이언트 클래스를 정의

52 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[24/28]
Java 코드 작성 및 수정 메소드 중 shouldOverrideUrlLoading( ) 메소드를 선택하고 <OK>를 클릭

53 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[25/28]
Java 코드 작성 및 수정 자동으로 오버라이드된 메소드

54 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[26/28]
Java 코드 작성 및 수정 생성한 CookWebViewClient 클래스를 웹뷰에 설정 화면 확대/축소 아이콘이 보이도록 설정 버튼을 클릭하면 입력한 URL로 이동하 거나 이전 화면으로 돌아가도록 함

55 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[27/28]
프로젝트 실행 및 결과 확인 에디트텍스트에 “ 입력하고 <이동>을 클릭

56 2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[28/28]
다시 화면 디자인 및 편집 AndroidManifest.xml에 인터넷 사용 퍼미션 추가

57