06. 고급 위젯 다루기 제목
고급 위젯을 다루는 방법을 익힌다. 뷰 컨테이너와 그 응용법을 학습한다. 매니패스트 파일의 설정법을 배운다.
01 고급 위젯 02 뷰 컨테이너
1. 고급 위젯 ▶ 날짜/시간 관련 위젯[1/15] 아날로그 시계, 디지털 시계
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [2/15] 아날로그 시계, 디지털 시계 예제
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [3/15] 크로노미터(Chronometer) 타이머 형식의 위젯 일반적으로 시간을 측정할 때 많이 사용
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [4/15] 크로노미터 예제
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [5/15] 타임피커, 데이트피커, 캘린더뷰 타임피커(TimePicker) : 시간을 표시, 조절 데이트피커(DatePicker)와 캘린더뷰(CalendarView) : 날짜를 표시, 조절
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [6/15] 타임피커, 데이트피커, 캘린더뷰 예제
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [7/15] 안드로이드 프로젝트 생성 프로젝트 이름 : Project6_1 패키지 이름 : com.cookandroid.project6_1
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로 함
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [9/15] 화면 디자인 및 편집
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [10/15] Java 코드 작성 및 수정 전역변수 선언 activity_main.xml에서 id를 부여한 12개 위젯에 대응할 위젯 변수 12개
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [11/15] Java 코드 작성 및 수정 12개 위젯 변수에 위젯을 대입하고 처음에는 캘린더뷰와 타임피커가 보이지 않게 설정
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [12/15] Java 코드 작성 및 수정 라디오버튼 클릭시 캘런더뷰와 타임피커 중 하나씩만 보이게 클릭 이벤트 리스너 작성
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [13/15] Java 코드 작성 및 수정 <예약 시작>을 클릭하면 크로노미터가 시작하고 <예약 완료>를 클릭하면 정지하도 록 클릭이벤트 리스너를 작성
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [14/15] Java 코드 작성 및 수정 <예약 완료>를 클릭하면 캘린더뷰에서 설정한 연, 월, 일과 타임피커에서 설정한 시, 분이 맨아래 텍스트뷰에 채워지도록 함
1. 고급 위젯 ▶ 날짜/시간 관련 위젯 [15/15]
1. 고급 위젯 ▶ 기타 위젯[1/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 사용자가 단어의 일부만 입력해도 자동완성됨 자동완성텍스트뷰는 1개, 멀티자동완성텍스트뷰는 쉼표로 구분하여 자동완성
1. 고급 위젯 ▶ 기타 위젯[2/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 예제
1. 고급 위젯 ▶ 기타 위젯[3/5] 자동완성텍스트뷰와 멀티자동완성텍스트뷰 Java 코드
1. 고급 위젯 ▶ 기타 위젯[4/5] 프로그래스바, 시크바, 래이팅바 프로그래스바(ProgressBar) : 작업의 진행 상황을 바(Bar)나 원 형태로 제공 시크바(SeekBar) : 프로그래스바와 대부분 비슷, 사용자 터치로 임의 조절 가능 래이팅바(RatingBar) : 진행 상황을 별 모양으로 표시
1. 고급 위젯 ▶ 기타 위젯[5/5] 프로그래스바, 시크바, 래이팅바 예제
2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[1/4] 스크롤뷰(ScrollView) 스크롤뷰는 수직(위아래)으로 스크롤하는 기능 수평(좌우)으로 스크롤하는 수평스크롤뷰(HorizontalScrollView)는 따로 있음 주의할 점은 스크롤뷰에는 단 하나의 위젯만 넣을 수 있음
2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[2/4] 스크롤뷰 예제
2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[3/4] 슬라이딩드로어(SlidingDrawer) 슬라이딩드로어(SlidingDrawer)의 사전적 의미는 서랍을 뜻함 위젯들을 서랍처럼 열어서 보여주거나 닫아서 감춤 슬라이딩드로어의 일반적 형태
2. 뷰 컨테이너 ▶ 간단한 기능의 뷰 컨테이너[4/4] 슬라이딩드로어 예제
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[1/28] 뷰플리퍼(ViewFlipper) 안에 여러 개의 위젯을 배치한 후, 필요에 따라서 화면을 왼쪽과 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식의 뷰 컨테이너 뷰플리퍼의 일반적 형태
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[2/28] 뷰플리퍼 예제
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[3/28] 뷰플리퍼 Java 코드
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[4/28]
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[5/28] 탭호스트(TabHost) 여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 뷰 컨테이너 탭 호스트의 구성
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[6/28] 탭호스트 탭을 생성하고 탭화면을 연결하기 위한 Java 코드 형식 탭스팩(TabSpec) : 탭을 구성하는 요소들의 집합
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[7/28] 탭호스트 예제
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[8/28] 탭호스트 Java 코드
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[9/28]
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[10/28] 액션바(Action Bar) 액션바(Action Bar)는 허니콤(Android 3.0, API 11)에서 태블릿과 같은 대형화면에서 여러 화면을 사용하기 위해서 고안 태블릿, 스마트폰 등 다양한 크기의 화면을 디자인하는 데 활용 프래그먼트(Fragment) 액티비티보다 작은 단위의 화면 프래그먼트를 사용하면 대형화면에서 액티비티 화면을 분할해서 표현 가능 스마트폰과 같은 소형화면에서는 화면의 분할보다는 실행 중에 화면을 동적으로 추가, 제거하는 데 더 많이 활용
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[11/28] 액션바와 프래그먼트를 활용하여 화면 구현 액션바를 생성한 후, 탭(Tab) 위젯을 액션바에 등록
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[12/28] 액션바와 프래그먼트를 활용하여 화면 구현 액션바에 탭을 추가하는 Java 코드 형식
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[13/28] 액션바와 프래그먼트를 활용하여 화면 구현 액션바 Java 코드
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[14/28] 액션바와 프래그먼트를 활용하여 화면 구현 Fragment를 상속받는 MyTabFragment 클래스를 내부 클래스로 생성
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[15/28] 액션바와 프래그먼트를 활용하여 화면 구현 멤버변수로 프래그먼트 배열 변수를 추가, onTabSelected( ) 메소드 코딩
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[16/28] 웹뷰(WebView) 사용자가 웹브라우저 기능을 앱 안에 직접 포함시킬 수 있는 위젯
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[17/28] 안드로이드 프로젝트 생성 프로젝트 이름 : Project6_2 패키지 이름 : com.cookandroid.project6_2 화면 디자인 및 편집 리니어레이아웃을 하나 더 만들고, 그 안에 에디트텍스트 1개와 버튼 2개로 구성 하단에는 웹뷰를 만듦 각 위젯의 id는 edtUrl, btnGo, btnBack, webView1로 함
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[18/28] 화면 디자인 및 편집
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[19/28] 화면 디자인 및 편집 AndroidManifest.xml(매니패스트) : 프로젝트의 전반적인 환경을 설정하는 파일
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[20/28] 화면 디자인 및 편집 파일 수정
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[21/28] 실행 화면 상단에 아이콘과 타이틀이 변경된 것 확인
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[22/28] Java 코드 작성 및 수정 activity_main.xml의 4개 위젯에 대응할 위젯 변수 4개를 전역변수로 선언 onCreate( ) 메소드 안의 각 변수에 위젯을 대입
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[23/28] Java 코드 작성 및 수정 WebViewClient의 상속을 받는 웹뷰클라이언트 클래스를 정의
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[24/28] Java 코드 작성 및 수정 메소드 중 shouldOverrideUrlLoading( ) 메소드를 선택하고 <OK>를 클릭
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[25/28] Java 코드 작성 및 수정 자동으로 오버라이드된 메소드
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[26/28] Java 코드 작성 및 수정 생성한 CookWebViewClient 클래스를 웹뷰에 설정 화면 확대/축소 아이콘이 보이도록 설정 버튼을 클릭하면 입력한 URL로 이동하 거나 이전 화면으로 돌아가도록 함
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[27/28] 프로젝트 실행 및 결과 확인 에디트텍스트에 “http://m.daum.net”을 입력하고 <이동>을 클릭
2. 뷰 컨테이너 ▶ 복잡한 기능의 뷰 컨테이너[28/28] 다시 화면 디자인 및 편집 AndroidManifest.xml에 인터넷 사용 퍼미션 추가