11. 어댑터 뷰

Page 1 Copyright© 1993-2012 Hanbit Media, Inc.All rights reserved.

IT CookBook, 안드로이드 프로그래밍

본 강의교안은 수업상황을 도입 - 전개 - 마무리로 구분하여 수업의 각 단계에서 필요한 요소 중 강의교안으로 커버할 수 있는 영역을 기준으로 작성되었습니다 .

• 도입 : 수업준비 , 전시학습 , 동기유발 , 학습목표• 전개 : 학습안내제공 , 정보제시 , 연습기회제공 , 수행유도 , 중간점검 ( 피드백 )• 마무리 : 정리 , 형성평가 , 다음 차시 안내

[ 강의교안 이용 안내 ]

• 본 강의교안의 저작권은 한빛미디어㈜에 있습니다 . • 이 자료를 무단으로 전제하거나 배포할 경우 저작권법 136 조에 의거하여 최고 5 년 이하의 징역 또는 5 천만원 이하의 벌금에 처할 수 있고 이를 병과 ( 倂科 ) 할 수도 있습니다 .


Copyright© 1993-2012 Hanbit Media, Inc.All rights reserved.

11. 어댑터 뷰

Page 3

학습목표


• 리스트뷰와 그리드뷰 활용법을 배운다 .

• 갤러리와 스피너의 사용법을 익힌다 .

Page 4

차례



1. 리스트뷰와 그리드뷰 ▶ 어댑터뷰

어댑터뷰 개요 뷰 컨테이너 중에서 AdapterView 하위에 ListView,

ExpandableListView, GridView, Spinner, Gallery 등이 있는데 , 이를 묶어서 어댑터뷰 라고도 부름

어댑터뷰를 실제로 사용할 때는 어댑터뷰의 모양을 설정하고 데이터를 채워주는 ArrayAdapter<T> 클래스를 함께 사용


1. 리스트뷰와 그리드뷰 ▶ 리스트뷰

리스트뷰 개요 데이터를 리스트 모양으로 보여주며 리스트 중

하나를 선택하는 용도

XML 을 이용한 리스트뷰 만들기 XML 파일의 <ListView></ListView> 태그

부분에 리스트뷰를 생성 Java 코드에서 리스트뷰에 데이터를 채움

① 리스트뷰에 나열할 내용을 미리 String 배열로 만들어 놓는다 .

② 리스트뷰 변수를 생성하고 XML 의 <ListView> 에 대응시킨다 .

③ ArrayAdapter<String> 형의 변수를 선언하고 , 리스트뷰의 모양과 내용을 ①번 배열로 채운다 .

④ ③ 번에서 생성한 어레이어댑터를 ②번의 리스트뷰 변수에 적용시킨다 .

⑤ 리스트뷰의 항목을 클릭했을 때 동작하는 리스너를 정의한다 .



리스트뷰 기본 예제 (1/2) : XML 코드



리스트뷰 기본 예제 (2/2) : Java 코드



리스트뷰의 다양한 모양 설정 라디오버튼 모양은 simple_list_item_single_choice 체크박스 모양은 simple_list_item_multiple_choice



리스트뷰의 동적 추가 / 삭제 ArrayList<T> 를 정의한 후 add( ) 와 remove( ) 메소드를 사용

리스트뷰의 동적 추가 / 삭제 예제 (1/2) : XML 코드



리스트뷰의 동적 추가 / 삭제 예제 (2/2) : Java 코드


[ 실습 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

1. 리스트뷰와 그리드뷰 ▶ 그리드뷰


화면 디자인 main.xml 에 그리드뷰를 하나 추가 큰 포스트용 dialog.xml 추가 영화 포스터로 사용할 이미지 10 개를 /res/drawable-hdpi 에 복사

[ 실습 11-1] 영화 포스터 보기 1 (2/6)



Java 코딩 1 BaseAdapter 의 상속을 받는

MyGridAdapter 를 정의

[ 실습 11-1] 영화 포스터 보기 1 (3/6)



Java 코딩 2 영화 포스터 그림 파일의 ID 를 배열로 지정

[ 실습 11-1] 영화 포스터 보기 1 (4/6)



Java 코딩 3 getCount( ) 는 그리드뷰에 보여질 이미지의 개수를 반환하도록 수정 getView( ) 는 포스터를 각 그리드뷰의 칸마다 이미지뷰를 생성해서 보여주도록 수정

[ 실습 11-1] 영화 포스터 보기 1 (5/6)



Java 코딩 4 각 영화를 클릭하면 대화상자가 나오고 영화 포스터의 원래 크기가 보여지도록 한다

[ 실습 11-1] 영화 포스터 보기 1 (6/6)



[ 실습 11-1] 에서 영화 포스터를 클릭하면 나오는 대화상자의 제목창에 영화의 제목이 보이도록 수정하자 .대화상자의 아이콘도 수정한다 . 힌트 : posterID 와 동일한 개수의 문자열

배열을 정의하고 영화 제목을 넣는다 .

[ 직접 풀어보기 11-1]



2. 갤러리와 스피너 ▶ 갤러리

갤러리 개요 사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있도록 해준

다 . 이미지 목록을 스크롤하는 기능만 있으므로 이미지를 클릭하면 큰

이미지를 보이게 하는 방법은 Java 코드를 추가하여 사용 그리드뷰와 효과는 비슷하지만 좀 더 부드럽고 고급스런 느낌


[ 실습 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



화면 디자인 main.xml 에 갤러리와 이미지뷰를 추가 영화 포스터로 사용할 이미지 10 개를 /res/drawable-hdpi 에 복사

[ 실습 11-2] 영화 포스터 보기 2 (2/5)



Java 코딩 1 BaseAdapter 를 상속 받는

MyGalleryAdapter 를 정의한다 .

main.xml 의 그리드뷰에 MyGalleryAdapter 변수를 적용한다

[ 실습 11-2] 영화 포스터 보기 2 (3/5)



Java 코딩 2 getCount( ) 와 getView( ) 메소드를 수정한다 .

[ 실습 11-2] 영화 포스터 보기 2 (4/5)



Java 코딩 3 갤러리의 영화를 클릭하면 아래쪽 이미지뷰에 포스터가 원래 크기로 보여지도록 한

다 .

[ 실습 11-2] 영화 포스터 보기 2 (5/5)



[ 실습 11-2] 에서 영화 포스터를 클릭하면 영화의 제목이 토스트 메시지에 나타나도록 수정하자 . 토스트는 아이콘과 함께 보인다 .




2. 갤러리와 스피너 ▶ 스피너

스피너 개요 PC 의 드롭 다운 (Drop Down) 박스와 비슷한 기능 화면이 작은 스마트폰에서 여러 개 중 하나를 선택할 수 있도록

확장해주는 용도로 사용

스피너 예제 (1/2) : XML 코드



스피너 예제 (2/2) : Java 코드


[ 예제 11-17] 의 스피너에서 영화 제목을 선택하면 해당 영화 포스터가 아래의 이미지뷰에 나오게 수정하자 . 힌트 :

Spinner 의 setOnItemSelectedListener( ) 를 사용한다 .



Page 29

핵심정리


1. 리스트뷰의 모양은 기본적으로 simple_list_item_1 을 사용한다 . simple_list_item_single_choice 를 사용하면 라디오버튼이 되고 , simple_list_item_multiple_choice 를 사용하면 체크박스가 된다 .

2. 리스트뷰의 항목을 동적으로 추가 · 삭제하려면 ArrayList<T> 를 정의한 후 add( ) 와 remove( ) 메소드를 동적으로 사용한다 .

3. 그리드뷰 (GridView) 는 사진이나 그림을 격자 모양으로 배치하는 역할을 한다 . 사진이나 그림외에 버튼 , 텍스트 등도 배치할 수 있지만 보통 사진이나 그림을 배치한다 .

4. 갤러리 (Gallery) 는 사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있도록 해준다 .

5. 스피너 (Spinner) 는 PC 의 드롭 다운 (Drop Down) 박스와 비슷한 기능을 한다 . 화면이 작은 스마트폰에서 여러 개 중 하나를 선택할 수 있게 해준다 .



Documents

11. 어댑터 뷰