11.어댑터 뷰 제목. 11.어댑터 뷰 제목 리스트뷰와 그리드뷰 활용법을 배운다. 갤러리와 스피너의 사용법을 익힌다.

Presentation on theme: "11.어댑터 뷰 제목. 11.어댑터 뷰 제목 리스트뷰와 그리드뷰 활용법을 배운다. 갤러리와 스피너의 사용법을 익힌다."— Presentation transcript:

1

2 11.어댑터 뷰 제목

3 리스트뷰와 그리드뷰 활용법을 배운다. 갤러리와 스피너의 사용법을 익힌다.

4

5 1. 리스트뷰와 그리드뷰 ▶ 어댑터뷰 어댑터뷰 개요
뷰 컨테이너 중에서 AdapterView 하위에 ListView, ExpandableListView, GridView, Spinner, Gallery 등이 있는데, 이를 묶어서 어댑터뷰 라고도 부름 어댑터뷰를 실제로 사용할 때는 어댑터뷰의 모양을 설정하고 데이터를 채워주는 ArrayAdapter<T> 클래스를 함께 사용

6 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰 개요 XML을 이용한 리스트뷰 만들기
데이터를 리스트 모양으로 보여주며 리스트 중 하나를 선택하는 용도 XML을 이용한 리스트뷰 만들기 XML 파일의 <ListView></ListView> 태그 부분에 리스트뷰를 생성 Java 코드에서 리스트뷰에 데이터를 채움 ① 리스트뷰에 나열할 내용을 미리 String 배열로 만들어 놓는다. ② 리스트뷰 변수를 생성하고 XML의 <ListView>에 대응시킨다. ③ ArrayAdapter<String>형의 변수를 선언하고, 리스트뷰의 모양과 내용을 ①번 배열로 채운다. ④ ③번에서 생성한 어레이어댑터를 ②번의 리스트뷰 변수에 적용시킨다. ⑤ 리스트뷰의 항목을 클릭했을 때 동작하는 리스너를 정의한다.

7 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰 기본 예제 (1/2) : XML 코드

8 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰 기본 예제 (2/2) : Java 코드

9 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰의 다양한 모양 설정
라디오버튼 모양은 simple_list_item_single_choice 체크박스 모양은 simple_list_item_multiple_choice

10 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰의 동적 추가/삭제 리스트뷰의 동적 추가/삭제 예제 (1/2) : XML 코드
ArrayList<T>를 정의한 후 add( )와 remove( ) 메소드를 사용 리스트뷰의 동적 추가/삭제 예제 (1/2) : XML 코드

11 1. 리스트뷰와 그리드뷰 ▶ 리스트뷰 리스트뷰의 동적 추가/삭제 예제 (2/2) : Java 코드

12 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (1/6)
그리드뷰를 이용해서 여러 사진(영화 포스터)을 격자 모양으로 배치하자. 영화포스터를 클릭하면 확대된 포스터가 대화상자로 나온다. 프로젝트 정보 프로젝트 이름 : Project11_1 패키지 이름 : com.cookandroid.project11_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project11_1Activity 레이아웃 이름 : main 타이틀 : Project11_1

13 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (2/6) 화면 디자인
main.xml에 그리드뷰를 하나 추가 큰 포스트용 dialog.xml 추가 영화 포스터로 사용할 이미지 10개를 /res/drawable-hdpi에 복사

14 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (3/6) Java 코딩 1
BaseAdapter의 상속을 받는 MyGridAdapter를 정의

15 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (4/6) Java 코딩 2
영화 포스터 그림 파일의 ID를 배열로 지정

16 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (5/6) Java 코딩 3
getCount( )는 그리드뷰에 보여질 이미지의 개수를 반환하도록 수정 getView( )는 포스터를 각 그리드뷰의 칸마다 이미지뷰를 생성해서 보여주도록 수정

17 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [실습11-1] 영화 포스터 보기 1 (6/6) Java 코딩 4
각 영화를 클릭하면 대화상자가 나오고 영화 포스터의 원래 크기가 보여지도록 한다

18 1. 리스트뷰와 그리드뷰 ▶ 그리드뷰 [직접 풀어보기 11-1]
[실습 11-1]에서 영화 포스터를 클릭하면 나오는 대화상자의 제목창에 영화의 제목이 보이도록 수정하자.대화상자의 아이콘도 수정한다. 힌트 : posterID와 동일한 개수의 문자열 배열을 정의하고 영화 제목을 넣는다.

19 2. 갤러리와 스피너 ▶ 갤러리 갤러리 개요 사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있도록 해준 다.
이미지 목록을 스크롤하는 기능만 있으므로 이미지를 클릭하면 큰 이미지를 보이게 하는 방법은 Java 코드를 추가하여 사용 그리드뷰와 효과는 비슷하지만 좀 더 부드럽고 고급스런 느낌

20 2. 갤러리와 스피너 ▶ 갤러리 [실습11-2] 영화 포스터 보기 2 (1/5)
갤러리를 영화 포스터 보기를 이용해서 작성한다. 영화 포스터를 클릭하면 아래쪽 이미지뷰에 확대된 영화 포스터가 나오게 한다. 프로젝트 정보 프로젝트 이름 : Project11_2 패키지 이름 : com.cookandroid.project11_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project11_2Activity 레이아웃 이름 : main 타이틀 : Project11_2

21 2. 갤러리와 스피너 ▶ 갤러리 [실습11-2] 영화 포스터 보기 2 (2/5) 화면 디자인
main.xml에 갤러리와 이미지뷰를 추가 영화 포스터로 사용할 이미지 10개를 /res/drawable-hdpi에 복사

22 2. 갤러리와 스피너 ▶ 갤러리 [실습11-2] 영화 포스터 보기 2 (3/5) Java 코딩 1
BaseAdapter를 상속 받는 MyGalleryAdapter를 정의한다. main.xml의 그리드뷰에 MyGalleryAdapter 변수를 적용한다

23 2. 갤러리와 스피너 ▶ 갤러리 [실습11-2] 영화 포스터 보기 2 (4/5) Java 코딩 2
getCount( )와 getView( ) 메소드를 수정한다.

24 2. 갤러리와 스피너 ▶ 갤러리 [실습11-2] 영화 포스터 보기 2 (5/5) Java 코딩 3
갤러리의 영화를 클릭하면 아래쪽 이미지뷰에 포스터가 원래 크기로 보여지도록 한다.

25 2. 갤러리와 스피너 ▶ 갤러리 [직접 풀어보기 11-2]
[실습 11-2]에서 영화 포스터를 클릭하면 영화의 제목이 토스트 메시지에 나타나도록 수정하자. 토스트는 아이콘과 함께 보인다.

26 2. 갤러리와 스피너 ▶ 스피너 스피너 개요 스피너 예제 (1/2) : XML 코드
PC의 드롭 다운(Drop Down) 박스와 비슷한 기능 화면이 작은 스마트폰에서 여러 개 중 하나를 선택할 수 있도록 확장해주는 용도로 사용 스피너 예제 (1/2) : XML 코드

27 2. 갤러리와 스피너 ▶ 스피너 스피너 예제 (2/2) : Java 코드

28 2. 갤러리와 스피너 ▶ 스피너 [직접 풀어보기 11-3]
[예제 11-17]의 스피너에서 영화 제목을 선택하면 해당 영화 포스터가 아래의 이미지뷰에 나오게 수정하자. 힌트: Spinner의 setOnItemSelectedListener( )를 사용한다.

29 리스트뷰의 모양은 기본적으로 simple_list_item_1을 사용한다
리스트뷰의 모양은 기본적으로 simple_list_item_1을 사용한다. simple_list_item_single_choice를 사용하면 라디오버튼이 되고, simple_list_item_multiple_choice를 사용하면 체크박스가 된다. 리스트뷰의 항목을 동적으로 추가·삭제하려면 ArrayList<T>를 정의한 후 add( )와 remove( ) 메소드를 동적으로 사용한다. 그리드뷰(GridView)는 사진이나 그림을 격자 모양으로 배치하는 역할을 한다. 사진이나 그림외에 버튼, 텍스트 등도 배치할 수 있지만 보통 사진이나 그림을 배치한다. 갤러리(Gallery)는 사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있도록 해준다. 스피너(Spinner)는 PC의 드롭 다운(Drop Down) 박스와 비슷한 기능을 한다. 화면이 작은 스마트폰에서 여러 개 중 하나를 선택할 수 있게 해준다.

30