CHAP 10. 고급 위젯

1. CHAP 10. 고급 위젯

2. 어댑터 뷰 • 어댑터 뷰(AdapterView)는 배열이나 파일, 데이터베이스에 저장된 데이터를 화면에 표시할 때 유용한 뷰

3. 어댑터 뷰의 종류 • 리스트 뷰(ListView), 갤러리(Gallery), 스피너(Spinner), 그리드뷰(GridView)

4. 리스트 뷰 • 리스트 뷰(ListView)는 항목들을 수직으로 보여주는 어댑터 뷰로서 상하로 스크롤이 가능

5. 리스트 뷰 예제 <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/ListView01" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>

6. 리스트 뷰 예제 publicclassListViewTestextends Activity { publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); String[] list = { "사과", "배", "딸기", "수박", "참외", "파인애플", "포도", "바나나", "키위", "귤", "망고"}; ArrayAdapter<String> adapter; adapter = newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list); ListViewlistview = (ListView) findViewById(R.id.ListView01); listview.setAdapter(adapter); } }

7. 리스트 뷰와arrayAdapter String[] list = { "사과", "배", "딸기", "수박", "참외", "파인애플", "포도", "바나나", "키위", "귤", "망고" }; listview.setAdapter(adapter); adapter = newArrayAdapter<String>(this,android.R.layout.simple_list_item_1, list);

8. 리스트뷰의 클릭 이벤트 처리 listview.setOnItemClickListener(newOnItemClickListener() { publicvoidonItemClick(AdapterView parent, View v, int position, long id) { // 리스트 뷰의 항목이 선택되면 여기서 처리한다. } });

9. 리스트 뷰 클릭 이벤트 예제 list_item.xml <?xmlversion="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textSize="20sp" android:textColor="#ff0000" > </TextView>

10. 리스트 뷰 이벤트처리 예제 ... publicclassListActivityTestextendsListActivity { @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] fruits = getResources().getStringArray(R.array.fruits); setListAdapter(newArrayAdapter<String>(this, R.layout.list_item, fruits)); ListViewlistview = getListView(); listview.setOnItemClickListener(newOnItemClickListener() { publicvoidonItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); } }); } }

11. 리스트 뷰 이벤트처리 예제 실행 결과

12. 스피너 • 스피너(Spinner)는 항목을 선택하기 위한 드롭 다운 리스트

13. 스피너 예제 <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:padding="10dip" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dip" android:text="@string/planet_prompt" /> <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:prompt="@string/planet_prompt" /> </LinearLayout>

14. 스피너 예제 strings.xml <?xmlversion="1.0" encoding="utf-8"?> <resources> <string name="app_name">SpinnerActivity</string> <string name="planet_prompt">행성을 선택하시오</string> <string-array name="planets_array"> <item>수성</item> <item>금성</item> <item>지구</item> <item>화성</item> <item>목성</item> <item>토성</item> <item>천왕성</item> <item>해왕성</item> </string-array> </resources>

15. 스피너 예제 @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Spinner spinner = (Spinner) findViewById(R.id.spinner); ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource( this, R.array.planets_array, android.R.layout.simple_spinner_item); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); spinner.setAdapter(adapter); spinner.setOnItemSelectedListener(newOnItemSelectedListener() { publicvoidonItemSelected(AdapterView<?> parent, View view, intpos, long id) { Toast.makeText(parent.getContext(), "선택된 행성은 "+ parent.getItemAtPosition(pos).toString(), Toast.LENGTH_LONG).show(); } publicvoidonNothingSelected(AdapterView<?> arg0) { } }); }

16. 실행결과

17. 그리드뷰 • 2차원의 그리드에 항목들을 표시하는 뷰그룹

18. 그리드뷰 예제 <?xmlversion="1.0" encoding="utf-8"?> <GridViewxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/GridView01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" />

19. 그리드뷰 예제 publicclassGridViewTestextends Activity { @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridViewgridview = (GridView) findViewById(R.id.GridView01); gridview.setAdapter(newImageAdapter(this)); gridview.setOnItemClickListener(newOnItemClickListener() { publicvoidonItemClick(AdapterView<?> parent, View v, int position, long id) { Toast.makeText(GridViewTest.this, "" + position, Toast.LENGTH_SHORT).show(); } }); } }

20. 실행결과

21. 갤러리 • 항목들이 수평으로 스크롤되면서 중심에 놓인 현재 항목을 강조해서 보여주는 위젯

22. 레이아웃 파일 <?xmlversion="1.0" encoding="utf-8"?> <Gallery xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gallery" android:layout_width="fill_parent" android:layout_height="wrap_content" />

23. 코드 ... publicclassGalleryTestextends Activity { @Overridepublicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Gallery g = (Gallery) findViewById(R.id.gallery); g.setAdapter(newImageAdapter(this)); g.setOnItemClickListener(newOnItemClickListener() { publicvoidonItemClick(AdapterView parent, View v, int position,long id) { Toast.makeText(GalleryTest.this, "" + position, Toast.LENGTH_SHORT).show();} }); } }

24. ImageAdapter클래스 ... publicclassImageAdapterextendsBaseAdapter { intmGalleryItemBackground; private Context mContext; private Integer[] mImageIds = { R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6, R.drawable.sample_7 }; publicImageAdapter(Context c) { mContext = c; } publicintgetCount() { returnmImageIds.length; } public Object getItem(int position) { return position; }

25. ImageAdapter클래스 publiclonggetItemId(int position) { return position; } public View getView(intposition, View convertView, ViewGroup parent) { ImageView i = newImageView(mContext); i.setImageResource(mImageIds[position]); i.setLayoutParams(newGallery.LayoutParams(150, 100)); i.setScaleType(ImageView.ScaleType.FIT_XY);i.setBackgroundResource(mGalleryItemBackground); return i; } }

26. 실행결과

27. 프로그레스바 • 작업의 진행 정도를 표시하는 위젯

28. 레이아웃 파일 <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android=http://schemas.android.com/apk/res/android android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ProgressBar android:id="@+id/ProgressBar01" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > </ProgressBar> </LinearLayout>

29. 코드 ... publicclassProgressBarTestextends Activity { privatestaticfinalintPROGRESS = 0x1; privateProgressBarmProgress privateintmProgressStatus = 0; private Handler mHandler = new Handler(); @Override protectedvoidonCreate(Bundle icicle) {super.onCreate(icicle); setContentView(R.layout.main);

30. mProgress = (ProgressBar) findViewById(R.id.ProgressBar01); // 백그라운드 스레드 new Thread(new Runnable() { @Override publicvoid run() { while (true) { if (mProgressStatus < 100) mProgressStatus += 10; else mProgressStatus = 0; mHandler.post(new Runnable() { @Override publicvoid run() { mProgress.setProgress(mProgressStatus); } }); try { Thread.sleep(300); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } } 코드

31. 실행 결과

32. 레이팅 바 • 레이팅바는 별을 사용하여서 점수를 표시하는 위젯

33. 레이아웃 파일 <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <RatingBar android:id="@+id/ratingbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:stepSize="1.0" /> </LinearLayout>

34. 코드 publicclassRatingBarTestextends Activity { @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); finalRatingBarratingbar = (RatingBar) findViewById(R.id.ratingbar); ratingbar.setOnRatingBarChangeListener(newOnRatingBarChangeListener() { publicvoidonRatingChanged(RatingBarratingBar, float rating, booleanfromUser) { Toast.makeText(RatingBarTest.this, "점수: "+ rating, Toast.LENGTH_SHORT).show(); } }); } }

35. 실행 결과

36. 데이터 픽커와 타임 픽커

37. 레이아웃 파일 <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextViewandroid:id="@+id/dateDisplay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> <Button android:id="@+id/pickDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="날짜변경/> </LinearLayout>

38. 코드 privateTextViewmDateDisplay; private Button mPickDate; privateintmYear; privateintmMonth; privateintmDay; staticfinalintDATE_DIALOG_ID = 0;

39. 코드 protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mDateDisplay = (TextView) findViewById(R.id.dateDisplay); mPickDate = (Button) findViewById(R.id.pickDate); mPickDate.setOnClickListener(newView.OnClickListener() { publicvoidonClick(View v) { showDialog(DATE_DIALOG_ID); } }); final Calendar c = Calendar.getInstance(); mYear = c.get(Calendar.YEAR); mMonth = c.get(Calendar.MONTH); mDay = c.get(Calendar.DAY_OF_MONTH); updateDisplay(); }

40. 코드 privatevoidupdateDisplay() { mDateDisplay.setText(newStringBuilder()   // 월은 0부터 시작한다. 따라서 1을 더한다..append(mMonth + 1).append("-") .append(mDay).append("-") .append(mYear).append(" ")); }

41. 코드 privateDatePickerDialog.OnDateSetListenermDateSetListener = newDatePickerDialog.OnDateSetListener() { publicvoidonDateSet(DatePicker view, int year, intmonthOfYear,intdayOfMonth) { mYear = year; mMonth = monthOfYear; mDay = dayOfMonth; updateDisplay(); } }

42. 코드 @Override protected Dialog onCreateDialog(int id) { switch (id) { caseDATE_DIALOG_ID: returnnewDatePickerDialog(this, mDateSetListener, mYear, mMonth, mDay); } returnnull; }

43. 실행 결과