1 / 43

CHAP 10. 고급 위젯

CHAP 10. 고급 위젯. 어댑터 뷰. 어댑터 뷰 ( AdapterView ) 는 배열이나 파일 , 데이터베이스에 저장된 데이터를 화면에 표시할 때 유용한 뷰. 어댑터 뷰의 종류. 리스트 뷰 ( ListView ), 갤러리 (Gallery), 스피너 (Spinner), 그리드 뷰 ( GridView ). 리스트 뷰. 리스트 뷰 ( ListView ) 는 항목들을 수직으로 보여주는 어댑터 뷰로서 상하로 스크롤이 가능. 리스트 뷰 예제.

Download Presentation

CHAP 10. 고급 위젯

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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. 실행 결과

More Related