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 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 single TextView. 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 and Java Code : Fill the data in the ListView ① 리스트뷰에 나열할 내용을 미리 String 배열로 만들어 놓는다. ② 리스트뷰 변수를 생성하고 XML 의 에 대응시킨다. ③ ArrayAdapter 형의 변수를 선언하고, 리스트뷰의 모양과 내용을 ①번 배열로 채운다. ④ ③번에서 생성한 어레이어댑터를 ②번의 리스트뷰 변수에 적용시킨다. ⑤ 리스트뷰의 항목을 클릭했을 때 동작하는 리스너를 정의한다. 1. ListView, GridView ▶ ListView

Page  6  Example of Basic ListView(1/2) : XML Code 1. ListView, GridView ▶ ListView

Page  7  Example of Basic ListView(2/2) : Java Code 1. ListView, GridView ▶ ListView

Page  8  Setting the ListView of the various appearance RadioButton : simple_list_item_single_choice CheckBox : simple_list_item_multiple_choice 1. ListView, GridView ▶ ListView

Page  9  Dynamically add/delete of the ListView Define the ArrayList, and Using the add( ), remove( ) method  Example - Dynamically add/delete of the ListView(1/2) : XML Code 1. ListView, GridView ▶ ListView

Page  10  Example-Dynamically add/delete of the ListView(2/2) : JAVA Code 1. ListView, GridView ▶ ListView

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 1. ListView, GridView ▶ GridView [Practice 11-1] Movie Poster 1 (2/6)

Page  13  Java coding 1 Defined the MyGridAdapter Inherits BaseAdapter 1. ListView, GridView ▶ GridView [Practice 11-1] Movie Poster 1 (3/6)

Page  14  Java coding 2 Movie poster picture file ID is specified as an array 1. ListView, GridView ▶ GridView [Practice 11-1] Movie Poster 1 (4/6)

Page  15  Java coding 3 Update the getCount( ) and getView() metgod 1. ListView, GridView ▶ GridView [Practice 11-1] Movie Poster 1 (5/6)

Page  16  Java coding 4 1. ListView, GridView ▶ GridView [Practice 11-1] Movie Poster 1 (6/6)

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] 1. ListView, GridView ▶ GridView

Page  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 [Practice 11-2] Movie Poster 2 (1/5)  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 2. Gallery, Spinner ▶ Gallery

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 2. Gallery, Spinner ▶ Gallery [Practice 11-2] Movie Poster 2 (2/5)

Page  21  Java Coding 1 Define the MyGalleryAdapter MyGalleryAdapter inderits from BaseAdapter Applied to the MyGalleryAdapter variable on the GridView of the main.xml 2. Gallery, Spinner ▶ Gallery [Practice 11-2] Movie Poster 2 (3/5)

Page  22  Java Coding 2 Update the getCount( ) and getView( ) method. 2. Gallery, Spinner ▶ Gallery [Practice 11-2] Movie Poster 2 (4/5)

Page  23  Java Coding 3 When you click the movie image in the gallery, show the original size of the image in the ImageView. 2. Gallery, Spinner ▶ Gallery [Practice 11-2] Movie Poster 2 (5/5)

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] 2. Gallery, Spinner ▶ Gallery

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 2. Gallery, Spinner ▶ Spinner

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] 2. Gallery, Spinner ▶ Spinner

DKU-MUST Mobile ICT Education Center