Transcript ch03

CHAPTER 3.
다양한 위젯과 이벤트 활용하기
2008011105 이원철
2011010933 최유진
2006011152 최경철
2009012952 박민호
03-1 이벤트 처리



학습 목표
안드로이드 이벤트 이해하기
제스처 이벤트 살펴보기
이벤트란?


이벤트 = 사건
사용자와 어플리케이션 사이 또는 어플리케이
션들 사이에 일어나는 어떤 일을 의미함.
여러가지 이벤트
일반적인 프로그래밍 언어
GUI 사용 -> 사용자로부터 화면에서 입력을 받아 처
리함
윈도우 -> 마우스 이벤트
※ 안드로이드 -> 터치이벤트, 키 이벤트
클릭 이벤트 - OnClickListener
OnClickListener 인터페이스
 OnClickListener
구현
Button 객체
설정
Public void onClick(View v) {
…
}
대표적인 이벤트

터치 이벤트


키 이벤트


터치 이벤트 중에서 일정 패턴을 만들어 내는 이벤트
포커스


키패드나 하드웨어 버튼을 누를 때 발생하는 이벤트
제스처 이벤트


화면을 손가락으로 누를 때 발생하는 이벤트
뷰마다 순서대로 주어지는 포커스
화면 방향 변경

화면의 방향이 가로/세로로 바뀜에 따라 발생하는 이
벤트
제스처 이벤트를 통해 처리할 수 있는 이벤트 유형









onDown()
onShowPress()
onSingleTapUp()
onSingleTapConfirmed()
onDoubleTap()
onDoubleTapEvent()
onScroll()
onFling()
onLongPress()
SampleEvents 예제
Fling 이벤트
처리
Scroll 이벤트
처리
LongClick
이벤트 처리
FocusChange
이벤트 처리
SampleKeyEvent 예제
Click!!
SampleFocus 예제
03-2 웹브라우저 사용하기
학습 목표
SampleWebView 예제 이해하기
SampleWebView 예제 - main.xml
웹페이지를 열기
위한 버튼 정의
웹페이지 URL
입력상자 정의
웹뷰 정의
SampleWebView 예제 - Activity.java
웹뷰 객체 참조
웹뷰에 WebSetting 설정
웹뷰에 클라이언트 객체 지정
웹뷰에 자바스크립트 인터페이
스 객체 지정
웹뷰에 샘플 페이지 로딩
사용자가 직접 입력한 일반
웹페이지 로딩
애플리케이션에서 정의한 메소
드로 웹페이지에서 호출할 대상
핸들러로 처리
애플리케이션 화면의 버튼 글자
변경
웹페이지의 자바스크립트 함수
호출
웹브라우저 클라이언트 클래서
정의
SampleWebView 예제 - Sample.html
자바스크립트 함수 정의한 것
으로 애플리케이션에서 호출
할 대상
웹페이지에서 보이는 그림을
눌렀을 때 clickOnFace()메소드
호출
웹페이지의 이미지 ID를 “face
로 지정
SampleWebView 예제 - 실행화면
초기화면
이미지를 클릭했을
때
웹뷰를 사용해 홈페
이지에 접속
자유 과제
SampleWebView 예제를 이용하여
2개의 웹뷰 구현
자유과제 - main.xml
Main.xml에서
EditText와
Button,
WebView를 각
각 하나씩 추
가한다.
자유과제 - main.xml
Layout을 임
의로 조정해
서 새로 만
들어진 뷰와
위젯들을 배
치한다.
자유과제 - Activity.java
Main.xml에서
새로이 추가한
것들의 객체를
생성해 설정해
줍니다.
자유과제 - 실행화면
03-3 간단한 애니메이션 사용하기
학습내용
1. 간단한 애니메이션 효과를 사용하
여 스마트폰에 실행시켜 본다.
Android animation
Kind of animation
Frame-by-frame animation
프레임마다 서로 다른 이미지가 표시되는
애니메이션
Tweened animation
그래픽에 회전, 페이딩, 이동, 확대 등을 수행
하는 애니메이션
Layout animation
리스트나 테이블 같은 컨테이너 뷰 안의
뷰들에게 효과를 주는 애니메이션
View animation
모든 범용 뷰에 주는 애니메이션
Text flow 애니메이션
startAnimation()
View
객체
Animation
객체
loadAnimation()
flow.xml
Text flow 애니메이션
flow.x
ml
위치이동
←이동
투명도 변경
Text flow 애니메이션
Activity_main.x
ml
Text flow 애니메이션
MainActivity.ja
va
애니메이션 객체 선언
액션 정보 로딩
애니메이션 리스너 설정
Text flow 애니메이션
텍스트 뷰 객체의 애니메이션 시작
애니메이션 종료 시 토스트 메시지 표시
Text flow 애니메이션
ex1
이동→
0
100
X축
Text flow 애니메이션
이동↓
이동↑
100
Y축
0
ex1
03-4 페이지 슬라이딩
학습내용
2. 페이지 슬라이딩을 직접 구현하여
스마트폰에서 실행시켜 본다.
스마트 폰의 멀티 윈도우 기능
편리함
신속함
페이지 슬라이딩
아래쪽 뷰
아래쪽 뷰
위쪽 뷰
열기
Animation
객체 적용
위쪽 뷰
닫기
Animation
객체 적용
페이지 슬라이딩
아래쪽 뷰
버튼 뷰
Button
위쪽 뷰
페이지 슬라이딩
아래쪽 뷰
버튼 뷰
페이지 슬라이딩
위쪽 뷰
페이지 슬라이딩
좌우 이동 애니메이션 객체
보여줄 슬라이딩 페이지
슬라이딩 애니메이션을 감시할 리스너
페이지 슬라이딩
페이지 슬라이딩
페이지 슬라이딩
ex1
페이지 슬라이딩
ex1
페이지 슬라이딩
ex2
페이지 슬라이딩
ex2
슬라이딩 페이지 layout 변수 선언
03-5 뷰 플리퍼
-뷰플리퍼 사용하기

학습목표: 뷰플리퍼의 개념과 사용
범위 그리고 예제를 통해 이해한
다.
-What is ViewFlipper?

하나의 화면에서 여러 개의 뷰가 전환되며 보이
는 대표적인 위젯 중의 하나가 뷰플리퍼이다.

ViewFlipper라는 클래스를 별도로 만들어 제공

CardView와 비슷한 형태
-Why is important?
탭
특정 탭버튼 사용하
여 다른탭 전환 가능
하지만 화면 전환시
에 번거롭다.
뷰플리퍼
시간에 따라 화면이
바뀌게 하거나 모션
센서 등을 이용 가능
함으로써 모바일 특
성에 유리
-ViewFlipper
-Example(main.xml)
<-현재 페이지를 표시할 상단의
버튼들이
들어갈 레이아웃
<-뷰플리퍼 정의
-Example(ViewActivity.java)
<-뷰플리퍼 화면
을 위한 레이아웃
인플레이션
<-뷰플리퍼 객
체에 터치 이
벤트 리스너
설정
<-상단의 버튼
들 객체 생성
<-각 화면의
텍스트뷰들 객
체 생성
-Example(ViewActivity.java)
<-뷰플리퍼에 애니메
이션 설정
<-다음 화면을 보기 위
한 showNext() 메소드
호출
<-이전 화면을 보기위
한 showPrevious() 메소
드 호출
-Example(ViewFlipperActivity.java)
<-onCreate()메소
드 안에서는 앞에
서 만든
ScreenViewFlipper
클래스를 이용해
객체를 하나 만듦
<-setContentView()
메소드를 이용해
화면에 이 객체를
표시
-실행결과
-실습파일(갤러리 뷰플리퍼)
-실습파일(main.xml)
<-left 버튼 레이아
웃
<-right버튼레이아
웃
<-뷰플리퍼
-실습파일(mainActivity)
<- 뷰플리퍼 변수 vf
선언
<- 뷰플리퍼에 뷰 추
가
-실습파일(mainActivity)
<-오른쪽 버튼
클릭시
<-왼쪽 버튼 클
릭시
<-img 출력 함
수
03-6 프로그레스 바
-프로그레스바 사용하기

학습목표: 상태 표시 위젯인 프로그레스바의 개
념과 사용범위를 예제를 통해 이해한다.
-What is Progress Bar?


여러가지 화면을 구성하고 그 안에 다양한 위젯
을 사용하는데 있어서 대화상자처럼 중간 중간
상태 정보를 보여주는 가장 좋은 방법
작업의 진행정도를 표시하거나 작업이 진행 중
임을 사용자에게 알려주는 역할
-Progress Bar
막대모양
• 작업의 진행정도를 알려 줄 수 있도록
막대모양으로 표시한다.
• Style속성의 값을
“?android:attr/progressBarStyleHorizonta
l”로 설정한다.
원 모양
• 작업이 진행 중임을 알려준다.
• 원 모양으로 된 프로그레스바가 반
복적으로 표시된다.
-Example(main.xml)
<-프로그레스바 정의
사과를 표현하는 아
이콘과 프로그레스바
를 보여준다.(막대모
양)
<-하단 버튼 두개 정
의
하나는 작업의 진행
상태를 보여주는 원
모양의 프로그레스바
를 위해
다른 하나는 그 대화
상자를 없애는 역할
-Example(ProgressBarActivity.java)
<-프로그레스 대화상
자를 위한 함수
<-프로그레스 대화상
자 객체 선언
<-프로그레스바 객체
참조 후 최대값과 현
재값 설정
(즉 100%중 80%표현)
-Example(ProgressBarActivity.java)
<-프로그레스 대화상
자 보이기
showDialog()호출시에
onCreateDialog()자동
호출
<-프로그레스 대화상
자 없애기
<-프로그레스 대화상
자 객체 생성
생성시에
progressDialog.STYLE_S
PINNER형태로 생성.
실행화면
-실습과제(downloading표시)
-실습파일(main.xml)
<-처음 시작 할 수
있게 스타트 버튼
정의
-실습파일(Activity.java)
<-버튼 리스너 설정
<-막대모양 형태의
프로그레스바를 최
대값 100을 가지고
초기화
<-리셋 프로그레스
바
<-리셋 파일크기
-실습파일(Activity.java)
<-doSomeTasks()
에서 thread 검
사
<-thread를 1초
sleep시킨다.
<-다운로드형태
로 보여주기위
해서 프로그레
스바를 업데이
트
<-완료시에
100%라고 출력
<-프로그레스바
종료
03-7 메뉴와 탭
학습목표



메뉴의 개념에 대해 이해할 수 있다.
탭의 개념에 대해 이해할 수 있다.
키 패드를 설정하는 방법에 대해 이해할 수 있다.
메뉴 - 개념
사용자의 명령을
받아들이는 인터페이스
메뉴 - 개념

옵션 메뉴 : 메뉴 버튼을 누를 때 나오는 메뉴

컨텍스트 메뉴 : 화면을 오래 누를 때 나오는 메뉴
메뉴 - 개념
옵션 메뉴
컨텍스트 메뉴
메뉴 작성하기 – XML 작성
res/menu 폴더에 있는 XML을 불러온다.
메뉴 작성하기 – XML 작성
메뉴 아이템
메뉴 작성하기 – 코드 작성
메뉴 만들기
메뉴 기능 부여
메뉴 작성하기 - 실행
안드로이드 2.2에서
수행한 결과
메뉴 작성하기 - 실행
안드로이드 4.2.2에서
수행한 결과
메뉴 작성하기 – 차이의 이유

안드로이드 버전 2.3 이하


하단의 사각형 메뉴를 사용함.
안드로이드 버전 3.0 이상


Action Bar가 추가됨.
따라서 메뉴가 상위에 배치됨.
메뉴 작성하기 - 해결

①
②
상위 버전에서도 하단메뉴를 배치하려면?
Theme을 구 버전으로 바꾼다.
manifest 파일에서 targetSDK 버전을
적절히 낮춘다. (API Level 8이하)
메뉴 작성하기 - 해결
안드로이드 4.2.2에서
수행한 결과
탭 - 개념
탭 - 개념


몇 개의 버튼을 두고 그 중 하나의 버튼을 눌러
화면을 전환하는 뷰
하나의 액티비티에서 여러 개의 뷰를 다른
형태로 배치가 가능함.
탭 - 구성
Subpage 1
Subpage 2
Subpage 3
FrameLayout
탭 만들기 – XML 작성순서
①
탭을 삽입할 레이아웃 XML 파일을 연다.
②
<TabHost>
<TabWidget/>
<FrameLayout>
위젯 배치
</FrameLayout>
</TabHost>
형태로 짠다.
탭 만들기 – XML 작성 예시
탭 설정부
탭 내용부
탭 만들기 – 코드 작성
탭 호스트 설정
탭의 내용설정 및
탭 추가
처음 출력할
탭 설정
탭 만들기 - 실행
탭 01
탭 02
03-8 키패드 설정
키패드


스마트폰은 대부분 키보드가 탑재되지 않음.
따라서 소프트웨어 방식의 키패드가
안드로이드에 내장되어 있음.
상황에 따른 적절한 키패드
숫자만 입력하는 키패드
모든 문자열 입력하는 키패드
키패드의 설정 - InputType

키패드의 종류를 변경하려면?
 입력받는

EditText의 InputType속성을 변경
여러 종류의 키패드를 섞으려면?
 InputType의
속성을 | 연산자로 묶는다.
키패드의 설정 – XML 작성
입력 속성 지정
키패드의 설정 - 실행
입력 결과
Q&A
자유과제 - DJSuperPi

PC용으로 나온 SuperPi를 모방해 봄.

안드로이드용 간이 벤치마크
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi
자유과제 - DJSuperPi