13주차 A d a p t e rv i e w
학습내용 1. ListView 2. Spinner 3. GridView
ListView
AdapterView AdapterView - AdapterView 는항목에해당하는여러개의차일드뷰를통합하여화면에표시할수있음 - 리니어, 렐러티브같이배치만담당하는레이아웃과는달리사용자와상호작용도처리할수있으며항목의선택이가능함
AdapterView 위젯클래스계층도 View ViewGroup AbsListView ListView GridView ExpandedListView AdapterView AbsSpinner Spinner Gallery
AdapterView AdapterView - 표시할항목 ( 데이터 ) 를 Adapter 객체로부터공급받아화면에출력함 - 항목의개수는이론적으로제한이없으며, 실행중에항목이바뀔수있고데이터의원본도다양함
AdapterView Adapter vs AdapterView -Adapter 는원본으로부터얻은데이터를관리하며, AdapterView 는 Adapter 가전달한데이터를화면에출력함
AdapterView Adapter vs AdapterView Adapter ListAdapter SpinnerAdapter BaseAdapter ArrayAdapter<T> CursorAdapter SimpleAdapter
ListView AdapterView - 여러개의항목들을수직으로표시하는위젯 ( 주소록, 상품목록등 ) - 수직스크롤을지원하므로항목의개수에는제한이없음
ListView AdapterView - 제한된크기의화면에많은자료를출력하기어렵기때문에 ListView 를사용하여화면을스크롤할수있도록출력함 - 간단한문자열, 이미지를나타내거나, 문자열과이미지를같이표시할수있음
AdapterView ListView 항목 - ListView 의항목은임의의뷰이며, 레이아웃을사용하면어떠한형태로든정보를표현할수있음 - 항목들을수직으로펼쳐서보여줌
ListView 예제 1. activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/list" android:layout_width= wrap_content" android:layout_height=" wrap_content" /> </LinearLayout>
ListView 예제 1. MainActivity.java package exam.listview; import java.util.*; import android.app.*; import android.os.*; import android.widget.*; public class MainActivity extends Activity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);
ListView 예제 1. MainActivity.java ArrayList<String> argeneral = new ArrayList<String>(); argeneral.add( APPLE"); argeneral.add( BANANA"); argeneral.add( ORANGE"); argeneral.add( MANGO"); ArrayAdapter<String> Adapter; Adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_checked, argeneral); } } ListView list = (ListView)findViewById(R.id.list); list.setadapter(adapter);
ListView 예제 1. 설명 - ListView 에표시할데이터원본으로 ArrayList 객체를하나생성하고, 과일이름을 ArrayList 에추가함
ListView 예제 1. 설명 - 데이터 (ArrayList) 와 ListView 를연결해줄 Adapter 를생성함 - 항목들이모두문자열이므로 ArrayAdapter 를쓰는것이편리함
ListView Adapter 초기화 - 배열을원본으로사용할때는다음생성자로 Adapter 를초기화함 ArrayAdapter(Context context, int textviewresourceid, List<T> objects) ArrayAdapter(Context context, int textviewrewourceid, T[] objects) - 첫번째인수 : 현재콘텍스트인액티비티 (this) 를넘겨줌
ListView Adapter 초기화 ArrayAdapter(Context context, int textviewresourceid, List<T> objects) ArrayAdapter(Context context, int textviewrewourceid, T[] objects) - 두번째인수 : 항목을표시할레이아웃의리소스 ID 임 - 세번째인수 : Adapter 로공급될데이터의원본인데두가지타입에대해오버로딩되어있음
ListView Adapter 초기화 - List 인터페이스를지원하는컬렉션객체가원본인경우 (ArrayList 가대표적이며 LinkedList, Stack 등의컬렉션사용이가능함 ) ArrayAdapter(Context context, int textviewresourceid, List<T> objects)
ListView Adapter 초기화 - 단순배열을원본으로사용하는경우 ArrayAdapter(Context context, int textviewrewourceid, T[] objects)
ListView ListView 레이아웃정의 - 기존의예제들처럼직접레이아웃을정의할수도있지만, 미리정의된레이아웃을사용할수도있음 - 시스템이미리정의해놓은레이아웃이므로 android.r 뒤에 ID 만지정하면됨
ListView ListView 레이아웃정의 리소스 ID 설명 simple_list_item_1 하나의 TextView로구성된레이아웃 simple_list_item_2 두개의 TextView로구성된레이아웃 simple_list_item_checked 오른쪽에체크표시가나타난다. simple_list_item_single_choice 오른쪽에라디오버튼이나타난다. simple_list_item_multiple_choice 오른쪽에체크버튼이나타난다.
ListView ListView 레이아웃정의 - 문자열리소스를출력할때체크표시가나타나도록 simple_list_item_checked 레이아웃 ID 를사용하는예제임
ListView 레이아웃정의와시스템목록표시 - 레이아웃안에는 text1 이라는이름의 TextView 가배치되어있으며 Adapter 는미리정의된 ID 의 TextView 를찾아데이터를출력함
ListView setadapter 메소드호출 - Adapter 객체가준비되었으면 ListView 의 setadapter 메소드를호출하여연결함 void setadapter (T adapter)
ListView setadapter 메소드호출 - Adapter 는 ListView 에출력할데이터원본을가지고있으며이원본을출력할뷰를생성하여 ListView 에게제공함
ListView setadapter 메소드호출 - ListView 는 Adapter 가제공한뷰를사용자에게보여주며터치입력을받아항목선택및스크롤을처리함
ListView 예제 1. 결과
ListView 예제 1. 결과설명 - ArrayList 의원본으로부터하나의 TextView 를가지는레이아웃이생성되어 ListView 에출력되었음 - 항목을택하면선택도가능하지만리스너를처리하지않았으므로별다른반응은없음
ListView 예제 1. 결과설명 - 항목개수가적어한화면에다보이므로아직은스크롤이되지않음
예제 2. ListView - 고정적인문자열이라면컬렉션이나배열을쓰는것보다리소스에정의해놓고읽어와사용하는것이바람직함 - 배열도일종의리소스임
예제 2. ListView - 패키지탐색기의 values 폴더에 arrays.xml 을작성함
ListView 예제 2. - arrays.xml <resources> <string-array name="mobile"> <item>application</item> <item>activity</item> <item>intent</item> <item>layout</item> <item>linear</item> <item>relative</item> <item>absolute</item> <item>life Cycle</item> <item>inflation</item> <item>view</item> <item>permission</item> <item>widget</item> <item>preference</item> <item>broadcast</item> <item>fragment</item> <item>drawable</item> </string-array> </resources>
ListView arrays.xml 설명 - 문자열배열은 string-array 엘리먼트로작성함 - name 속성에배열리소스의이름 ( mobile ) 을지정하고 item 엘리먼트로배열요소를나열함
ListView ListFromArray.java - 리소스의배열 (arrays.xml) 을원본으로하는 Adapter 를생성할때는다음정적메소드를호출함 static ArrayAdapter<CharSequence> createfromresource (Context context, int textarrayresid, int textviewresid)
ListView ListFromArray.java - 두번째인수로문자열배열의 ID 를지정하고세번째인수로레이아웃을지정함
ListView ListFromArray.java - 문자열배열의 ID 는 R.string.mobile 이며레이아웃은앞예제와마찬가지로시스템의기본레이아웃을사용하면됨
ListView ListFromArray.java - CharSequence 의배열을원본으로가지는 Adapter 가생성되어반환되는데이 Adapter 를 ListView 와연결함
ListView ListFromArray.java package exam.listfromarray; import android.app.*; import android.os.*; import android.widget.*; public class MainActivity extends Activity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);
ListView ListFromArray.java ArrayAdapter<CharSequence> Adapter; Adapter = ArrayAdapter.createFromResource(this, R.array.mobile, android.r.layout.simple_list_item_1); } } ListView list = (ListView)findViewById(R.id.list); list.setadapter(adapter);
ListView 예제 2. 결과
ListView 의속성 choicemode 속성 - 항목을선택하는형식 - 디폴트로 ListView 의항목은클릭만가능할뿐선택은할수없지만이속성을지정하면하나또는복수개의항목을선택할수있음
ListView 의속성 choicemode 속성값인수설명 none CHOICE_MODE_NONE 항목을선택할수없다. singlechoice CHOICE_MODE_SINGLE 하나의항목만선택할수있다. multiplechoice CHOICE_MODE_MULTIPLE 복수개의항목을선택할수있다.
ListView 의속성 divider 속성 - 항목사이의구분선을지정함 - 색상을지정하거나아니면임의의 Drawable 객체를지정함
ListView 의속성 divider 속성 - 코드에서는 setdivider 메소드를사용하며 Drawable 객체를인수로전달함 dividerheight 속성 - 구분선의높이를지정함
ListView 의속성 entries 속성 - ListView 에표시할배열을지정함 - 정적인배열이라면이속성으로간편하게지정할수있음
ListView 의속성 예제 3. MainActivity.java package exam.listchoice; import android.app.*; import android.graphics.*; import android.graphics.drawable.*; import android.os.*; import android.widget.*; public class MainActivity extends Activity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);
ListView 의속성 예제 3. MainActivity.java ArrayAdapter<CharSequence> Adapter; Adapter = ArrayAdapter.createFromResource(this, R.array.mobile, android.r.layout.simple_list_item_multiple_choice); ListView list = (ListView)findViewById(R.id.list); list.setadapter(adapter); } list.setchoicemode(listview.choice_mode_multiple); list.setdivider(new ColorDrawable(Color.BLUE)); list.setdividerheight(5); }
예제 3. ListView 의속성 - 앞의예제 2 와동일하되 oncreate 에서 ListView 의속성을변경함 - 레이아웃에체크박스를체크할수있음
예제 3. ListView 의속성 - 구분선은파란색이며 5 픽셀두께로나타남
예제 3. ListView 의속성
Spinner
Spinner Spinner 와 ListView - ListView 는항상펼쳐져있지만, Spinner 는클릭할때만팝업으로펼쳐짐 - 목록을보려면팝업을열어야하고선택을위해최소한두번클릭해야함
Spinner Spinner 사용 - ListView 는항상보이며사용자와의상호작용도용이해서 Spinner 보다는좀더활용도가높은편임 - Spinner 는여러개의항목중에서하나를선택받을때사용됨
Spinner Spinner 사용 - Spinner 도 Adapter 로부터데이터를공급받으며 Adapter 를만드는방법은 ListView 와동일함
Spinner 기본레이아웃 - 항목뷰를표시하는기본레이아웃으로다음두가지가제공됨 simple_spinner_item simple_spinner_dropdown_item - 전자는문자열만나타나고, 후자는문자열과라디오버튼이같이나타남
Spinner 기본레이아웃 - ListView 와마찬가지로 Adapter 의세번째인수로레이아웃을지정함
Spinner 레이아웃팝업메소드 - Spinner 자체에적용할레이아웃과는별도로클릭했을때나타나는팝업의레이아웃을다르게지정할수있음 - 팝업의레이아웃은 Adapter 의다음메소드로지정함 public void setdropdownviewresource (int resource)
Spinner 레이아웃팝업메소드 public void setdropdownviewresource (int resource) - 인수로 simple_spinner_item 이나 simple_spinner_dropdown_item 중하나를지정함
Spinner 레이아웃팝업 - 두기본레이아웃을팝업에적용한결과임
Spinner 레이아웃팝업
Spinner 디폴트와드롭다운 - 디폴트인왼쪽은항목높이가너무낮아손가락으로정밀하게터치하기어려움 - simple_spinner_dropdown_item 지정은항목간격이넓고선택이편리함
Spinner 디폴트와드롭다운 - simple_spinner_dropdown_item 지정은자리를많이차지하므로항목이너무많을때는불편할수도있음
Spinner 디폴트와드롭다운 - 3.0 이전에는항목에라디오버튼이표시되어목록에서현재선택된값을바로알수있었는데 3.0 이후에는이기능이없어졌음
Spinner 프롬프트메시지 - 선택사항에대한프롬프트메시지를팝업상단에표시할수있다는점도 ListView 와는다른점임
Spinner 프롬프트메시지 - 프롬프트메시지의내용은다음메소드로지정하는데리소스의문자열 ID 를지정할수도있고아니면문자열리터럴을직접지정할수도있음 void setpromptid(int promptid) void setprompt(charsequence prompt)
Spinner 프롬프트메시지 - XML 문서에 prompt 속성으로지정할수도있으나이때는리소스만지정할수있음
Spinner 프롬프트메시지 -Spinner 에서선택을변경하면 AdpterView.OnItemSelectedListener 인터페이스의다음두메소드가호출됨 void onitemselected(adapterview<?> parent, View view, int position, long id) void onnothingselected(adapterview<?> parent)
Spinner 프롬프트메시지 - 항목이선택될때, 모든항목이선택해제될때각각호출됨 - 이인터페이스를구현하려면두메소드를모두구현해야하지만, 선택해제시에는특별한동작이필요치않으므로그냥비워두면됨
Spinner 예제 4. activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/mytext" android:layout_width="match_parent" android:layout_height="wrap_content" android:text= 원하는색상을선택하세요." />
Spinner 예제 4. activity_main.xml <Spinner android:id="@+id/myspinner" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
Spinner 예제 4. arrays.xml - arrays.xml 에는색깔들이문자열리소스로정의되어있으며이배열을원본으로사용함
Spinner 예제 4. arrays.xml <resources> <string-array name="colors"> <item> 검정색 </item> <item> 흰색 </item> <item> 짙은회색 </item> <item> 회색 </item> <item> 옅은회색 </item> <item> 빨간색 </item> <item> 연두색 </item> <item> 파란색 </item> <item> 노란색 </item> <item> 하늘색 </item> <item> 분홍색 </item> <item> 초록색 </item> <item> 남색 </item> </string-array> </resources>
Spinner 예제 4. SpinnerTest.java package exam.spinnertest; import android.app.*; import android.os.*; import android.view.*; import android.widget.*; import android.widget.adapterview.onitemselectedlistener; public class MainActivity extends Activity { ArrayAdapter<CharSequence> adspin; boolean minitspinner;
Spinner 예제 4. SpinnerTest.java public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Spinner spin = (Spinner)findViewById(R.id.myspinner); spin.setprompt( 원하는색을선택하세요."); adspin = ArrayAdapter.createFromResource(this, R.array.colors, android.r.layout.simple_spinner_item);
Spinner 예제 4. SpinnerTest.java adspin.setdropdownviewresource(android.r.layout. simple_spinner_dropdown_item); spin.setadapter(adspin); spin.setonitemselectedlistener(new OnItemSelectedListener() { public void onitemselected(adapterview<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this,adspin. getitem(position) + " 이좋다.", Toast.LENGTH_SHORT).show(); }
Spinner 예제 4. SpinnerTest.java } } }); public void onnothingselected(adapterview<?> parent) { }
예제 4. Spinner - Spinner 자체에는 simple_spinner_item 레이아웃을지정하여선택된색상만출력했고드롭다운팝업에는 simple_spinner_dropdown_item 레이아웃을지정하여표시함
예제 4. Spinner - 이두조합이가장일반적임 - 리스너에서는선택이바뀔때사용자가선택한색깔을토스트로출력함
Spinner 예제 4. 결과
Spinner 예제 4. 결과
GridView
그리드 GridView - 항목들을 2 차원의표형태로출력하는위젯 - 바둑판식으로항목을출력하므로많은항목들을보여줄수있으며한화면보다항목개수가더많으면스크롤도가능함
그리드 GridView - ListView 와마찬가지로항목들은 Adapter 로부터공급받는데임의의뷰일수있으므로문자열이나이미지모두가능함
예제 5. 그리드 - 원본으로사용할이미지들은다양한소스에서구할수있으며리소스에서읽도록작성함 - 프로그래밍의편의를위해동일이미지를반복사용함
예제 5. 그리드 - 메인레이아웃에는하나의 GridView 만배치함
그리드 예제 5. activity_main.xml <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/grid" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="2dip" android:verticalspacing="4dip" android:horizontalspacing="4dip" android:numcolumns="auto_fit" android:columnwidth="72dip" android:stretchmode="columnwidth" android:gravity="center" />
예제 5. 그리드 - 많은속성들을지정하며항목의폭, 간격, 이미지확장방법등을지정함
예제 5. 그리드 - numcolumns 속성은열의개수를지정하는데 auto_fit 로지정하면열의폭과화면의폭을균등하게나누어자동으로계산함
예제 5. 그리드 - verticalspacing, horizontalspacing 은항목들간의간격이며 columnwidth 는항목하나의폭임
예제 5. 그리드 - 열의개수를지정하는속성은있지만행의개수를지정하는속성은따로없으며, 공급되는데이터의개수에따라자동으로결정됨
예제 5. 그리드 - stretchmode 속성은열내부에여백이있을때여백을어떻게처리할것인가를지정하는데 columnwidth 로지정하면폭에맞게가득채움
그리드 예제 5. GridView.java package exam.gridview; import android.app.*; import android.content.*; import android.os.*; import android.view.*; import android.widget.*; import android.widget.adapterview.onitemclicklistener; public class MainActivity extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);
그리드 예제 5. GridView.java GridView grid = (GridView)findViewById(R.id.grid); ImageAdapter Adapter = new ImageAdapter(this); grid.setadapter(adapter); } } grid.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, position+1 + " 번째그림선택, Toast.LENGTH_SHORT).show(); } });
그리드 예제 5. GridView.java class ImageAdapter extends BaseAdapter { private Context mcontext; int[] picture = { R.drawable.black, R.drawable.eclipse, R.drawable.white, }; public ImageAdapter(Context c) { mcontext = c; }
그리드 예제 5. GridView.java public int getcount() { return 90; } public Object getitem(int position) { return picture[position % 3]; } public long getitemid(int position) { return position; }
그리드 예제 5. GridView.java public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { imageview = new ImageView(mContext); imageview.setlayoutparams(new GridView.LayoutParams(80, 60)); imageview.setadjustviewbounds(false); imageview.setscaletype(imageview.scaletype. CENTER_CROP); } else { imageview = (ImageView) convertview; }
그리드 예제 5. GridView.java imageview.setimageresource(picture[position % 3]); } } return imageview;
예제 5. 그리드 - 이미지를공급하는커스텀 Adapter 를 BaseAdapter 로부터파생함 - 출력에사용할원본이미지를배열로선언했으며, 이미지의개수는 3 개임
예제 5. 그리드 - getcount 에서는개수를 90 개로반환하는데 GridView 는이개수만큼행렬을준비함 - 90 개의이미지에대해 drwable 폴더에저장된이미지 3 개를교대로사용함 (position % 3)
예제 5. 그리드 - getview 에서는 ImageView 객체하나를생성하고 GridView.LayoutParams 객체를통해폭과높이를 80X60 으로설정함
예제 5. 그리드 - 실제이미지는 position 을 3 으로나눈나머지를구해그첨자의이미지를 ImageView 에출력함
예제 5. 그리드 - Adapter 는원본과 GridView 사이의중계역할을하기위해서는대화의수단이필요함 - 약속된인터페이스가대화수단이며메소드들은약속된대로요구하는정보를정확히조사해서넘겨주어야함
예제 5. 그리드 - GridView 는필요할때마다이메소드들을호출하여출력에필요한여러가지정보를얻을것임
예제 5. 그리드 - Adapter 로동작하려면 BaseAdapter 로부터상속을받아기본기능을물려받은후요구하는추상메소드를재정의해야함
예제 5. 그리드 - 이메소드들은 BaseAdapter 의조상인 Adapter 에미리정의되어있는것임
그리드 Adapter 의중간역할 항목개수는? GridView 90 개 3 번항목뷰요청 3 번이미지 Adapter 원본참조 원본
예제 5. 그리드 - getcount 메소드는 Adapter 에몇개의항목이있는지를조사하여개수를반환함 - getitem 메소드는 position 위치의항목을조사하는데배열의 (position % 3) 번째요소를반환함
예제 5. 그리드 - getitemid 는 position 위치의항목 ID 를반환하는데배열은첨자자체가고유한 ID 이므로첨자를그대로반환함 - getview 메소드는항목하나를출력하기위한뷰를생성하여반환함
예제 5. 그리드 - GridView 는각항목을출력할때마다 Adapter 의 getview 메소드를호출하여뷰를요청하며반환된뷰를 GridView 의해당위치에배치함 View getview (int position, View convertview, ViewGroup parent)
예제 5. 그리드 - position 인수는생성할항목의순서값이며, parent 는생성되는뷰 (ImageView) 의부모, 즉 GridView 임 - convertview 는이전에생성된차일드뷰임
예제 5. 그리드 - 최초호출시에는 null 이전달되며이때는 ImageView 를새로생성하여반환함 - 초기화까지완료된 convertview 를반환하면 GridView 가 ImageView 를해당위치에출력함
예제 5. 그리드 - 두번째이후부터는이미생성된 convertview 가인수로전달되므로새로운생성없이이미지만바꿔전달하면됨
그리드 예제 5. - 결과
예제참고문헌 본교재의예제는저자의허락을받아 [ 안드로이드프로그래밍정복, 한빛미디어,, 김상형저 ] 에서가져왔습니다.
학습개요 AdapterView의개념및속성을이해하고실행하는방법에대해학습한다. ListView의개념및속성을이해하고실행하는방법에대해학습한다.
학습개요 Spinner의개념및속성을이해하고실행하는방법에대해학습한다. 그리드의개념및속성을이해하고실행하는방법에대해학습한다.
학습목표 AdapterView 실행방법이해 ListView 실행방법이해 Spinner의실행방법이해 GridView의실행방법이해
주요용어 Adapter 객체 : 사용하고있는객체 와사용하고자하는다른객체의구조 가다를경우연결해주는기능을함
주요용어 콘텍스트 : 안드로이드에서어플리케이션을실행하는데필요한안드로이드의정보를가지고있는객체 (ex. cpu 의리제스트리정보, 해상도크기등 )
주요용어 정적메소드 : 인스턴스객체를생성하지않고도, 혹은인스턴스객체를이용하지않고도클래스이름을이용하여직접호출할수있는메소드
주요용어 추상메소드 : 구현없이선언만되 어있는메소드를말함. 언어에서인터 페이스를명시하게위해사용됨
주요용어 콤보박스 : 사용자가직접정보를입력하거나나열된항목들중에서하나의항목을선택하여정보를입력할수있는컨트롤
주요용어 드롭다운 : 보통때는단하나의줄항목을표시하지만, 화살모양을클릭하면리스트가펼쳐집으로써, 그중하나를선택할수있음
주요용어 프롬프트 : 컴퓨터시스템이사용자 에대하여다음에어떠한조작을행해 야하는지지시하기위한지시메시지
학습정리 - AdapterView : AdapterView는항목에해당하는여러개의차일드뷰를가질수있으며, 사용자와의상호작용도처리할수있음
학습정리 ListView : 항목들을수직으로펼쳐 서보여줌
학습정리 Spinner : 클릭할때만팝업으로펼쳐지는것으로화면이좁은모바일환경에서면적을적게차지한다는장점이있음
학습정리 GridView : 항목들을 2 차원의표형 태로출력하는위젯