DKU-MUST Mobile ICT Education Center 11. AdapterView.

DKU-MUST Mobile ICT Education Center

11. AdapterView

Page 2

Goal

• How to learn the ListView and GridView

• How to learn the Gallery and Spinner

Page 3

1. ListView, GridView ▶ AdapterView

Overview the AdapterView An AdapterView is a view whose children are determined by an Adapter See ListView, GridView, Spinner and Gallery for commonly used subclasses of

AdapterView used together with the ArrayAdapter<T> class.

- A concrete BaseAdapter that is backed by an array of arbitrary objects. By default this class expects that the provided resource id references a singleTextView. If you want to use a more complex layout, use the constructors that also takes a field id. That field id should reference a TextView in the larger layout resource.

- However the TextView is referenced, it will be filled with the toString() of each object in the array. You can add lists or arrays of custom objects. Override the toString() method of your objects to determine what text will be displayed for the item in the list.

- To use something other than TextViews for the array display, for instance, ImageViews, or to have some of data besides toString() results fill the views, override getView(int, View, ViewGroup) to return the type of view you want.

Page 4

1. ListView, GridView ▶ AdapterView

Overview the AdapterView

Page 5

ListView Overview A view that shows items in a vertically scrolling list. The items come from the ListAdapter associated with this view

Create a ListView using XML Coding the between <ListView> and </ListView> Java Code : Fill the data in the ListView

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

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

③ ArrayAdapter<String> 형의 변수를 선언하고 ,

리스트뷰의 모양과 내용을 ①번 배열로 채운다 .

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

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

1. ListView, GridView ▶ ListView

Page 6

Example of Basic ListView(1/2) : XML Code


Page 7

Example of Basic ListView(2/2) : Java Code


Page 8

Setting the ListView of the various appearance RadioButton : simple_list_item_single_choice CheckBox : simple_list_item_multiple_choice


Page 9

Dynamically add/delete of the ListView Define the ArrayList<T>, and Using the add( ), remove( ) method

Example - Dynamically add/delete of the ListView(1/2) : XML Code


Page 10

Example-Dynamically add/delete of the ListView(2/2) : JAVA Code


Page 11

[Practice 11-1] Movie Poster 1 (1/6)

Using a GridView grid to put multiple pictures(movie poster). If you click on the movie poster, poster emerges as a dialog box.

Project Info. Project Name : Project11_1 Package Name

: com.cookandroid.project11_1 build SDK : Goolge API 15 or 16 Minimum Required SDK : API 15 or 16 Activity Name : Project11_1Activity Layout Name : main Title : Project11_1

1. ListView, GridView ▶ GridView

Page 12

Design the Screen Add a GridView in the main.xml Add a dialog.xml(For a large poster) Copy the 10 image(using the movie poster) in the /res/drawable-hdpi



Page 13

Java coding 1 Defined the MyGridAdapter Inherits BaseAdapter



Page 14

Java coding 2 Movie poster picture file ID is specified as an array



Page 15

Java coding 3 Update the getCount( ) and getView() metgod



Page 16

Java coding 4



Page 17

Update the [Practice 11-1]- When you click the movie poster, show the title in the another dialog page- update the icon Hint

define the string array(same count the posterID)

[Self Test 11-1]


Page 18

2. Gallery, Spinner ▶ Gallery

Gallery Overview A view that shows items in a center-locked, horizontally scrolling list. The default values for the Gallery assume you will be using

Theme_galleryItemBackground as the background for each View given to the Gallery from the Adapter. If you are not doing this, you may need to adjust some Gallery properties, such as the spacing.

Views given to the Gallery should use Gallery.LayoutParams as their layout parameters type.

사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있도록 해준다 . 이미지 목록을 스크롤하는 기능만 있으므로 이미지를 클릭하면 큰 이미지를

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

Page 19


Make the Movie Poster Using the gallery When you click the movie poster,

show the original size of the image in the ImageView

Project Info. Project Name : Project11_2 Package Name : com.cookandroid.project11_2 build SDK : Goolge API 15 or 16 Minimum Required SDK : API 15 or 16 Activity Name : Project11_2Activity Layout Name : main Title : Project11_2


Page 20

Design the Screen Andd a Gallery and ImageView in the main.xml Copy the 10 movie poster image in the /res/drawable-hdpi folder



Page 21

Java Coding 1 Define the

MyGalleryAdapter MyGalleryAdapter inderits from BaseAdapter

Applied to the MyGalleryAdapter variable on the GridView of the main.xml



Page 22

Java Coding 2 Update the getCount( ) and getView( ) method.



Page 23

Java Coding 3 When you click the movie image in the gallery,

show the original size of the image in the ImageView.



Page 24

Update the [practice 11-2] When you click the movie poster,

show the Toast message(movie title) Toast mssage appears with an icon.

[Self Test 11-2]


Page 25

Overview the Spinner Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available

values, from which the user can select a new one.

Example of the Spinner(1/2) : XML Code

2. Gallery, Spinner ▶ Spinner

Page 26

Example of the Spinner(2/2) : Java Code


Page 27

Update the Spinner example When you select the movie title in the spinner,

show the movie poster in the ImageView.

Hint:Using the setOnItemSelectedListener( ) method of the Spinner

[Self Test 11-3]


DKU-MUST Mobile ICT Education Center

DKU-MUST Mobile ICT Education Center 11. AdapterView.

Documents