CHAP 10. 고급 위젯

CHAP 10. 고급 위젯

© 2012 생능출판사 All rights reserved

어댑터 뷰 어댑터 뷰 (AdapterView) 는 배열이나 파일 ,

데이터베이스에 저장된 데이터를 화면에 표시할 때 유용한 뷰


어댑터 뷰의 종류 리스트 뷰 (ListView), 갤러리 (Gallery), 스피너

(Spinner), 그리드 뷰 (GridView)

View

ViewGroup

AdaptorView

ListView GridView Spinner Gallery

View

ViewGroup

AdaptorView

ListView GridView Spinner Gallery


리스트 뷰 리스트 뷰 (ListView) 는 항목들을 수직으로

보여주는 어댑터 뷰로서 상하로 스크롤이 가능


리스트 뷰 예제<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns: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>


리스트 뷰 예제public class ListViewTest extends Activity {

public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);String[] list = { " 사과 ", " 배 ", " 딸기 ", " 수박 ", " 참외 ",

" 파인애플 ", " 포도 ", " 바나나 ", " 키위 ", " 귤 ", " 망고 " };

ArrayAdapter<String> adapter;adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, list);

ListView listview = (ListView) findViewById(R.id.ListView01);

listview.setAdapter(adapter);}

}


리스트 뷰와 ARRAYADAPTER

String[] list = { " 사과 ", " 배 ", " 딸기 ", " 수박 ", " 참외 ", " 파인애플 ", " 포도 ", " 바나나 ", " 키위 ", " 귤 ", " 망고 " };

adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, list);

listview.setAdapter(adapter);


리스트뷰의 클릭 이벤트 처리

listview.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView parent, View v, int position,

long id)

{

// 리스트 뷰의 항목이 선택되면 여기서 처리한다 .

}

});


리스트 뷰 클릭 이벤트 예제

<?xml version="1.0" encoding="utf-8"?><TextViewxmlns: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>

list_item.xml


리스트 뷰 이벤트 처리 예제

...public class ListActivityTest extends ListActivity {

@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] fruits = getResources().getStringArray(R.array.fruits); setListAdapter(new ArrayAdapter<String>(this,

R.layout.list_item, fruits));

ListView listview = getListView();

listview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View

view, int position, long id) { Toast.makeText(getApplicationContext(),

((TextView) view).getText(),

Toast.LENGTH_SHORT).show(); } });}

}


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


스피너 스피너 (Spinner) 는 항목을 선택하기 위한 드롭

다운 리스트


스피너 예제

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/an-droid" 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>


스피너 예제

<?xml version="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>

strings.xml


스피너 예제 @Overridepublic void onCreate(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(new

OnItemSelectedListener() {public void onItemSelected(AdapterView<?>

parent, View view,int pos, long id) {

Toast.makeText(parent.getContext()," 선택된 행성은 " +

parent.getItemAtPosition(pos).toString(),

Toast.LENGTH_LONG).show();}public void onNothingSelected(AdapterView<?

> arg0) {}

});

}


실행 결과


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


그리드 뷰 예제 <?xml version="1.0" encoding="utf-8"?><GridView xmlns: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"/>


그리드 뷰 예제

public class GridViewTest extends Activity {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main);GridView gridview = (GridView)

findViewById(R.id.GridView01);gridview.setAdapter(new ImageAdapter(this));gridview.setOnItemClickListener(new

OnItemClickListener() {public void onItemClick(AdapterView<?>

parent, View v, int position, long id) {Toast.makeText(GridViewTest.this, "" +

position,

Toast.LENGTH_SHORT).show();}

});}

}


실행결과


갤러리 항목들이 수평으로 스크롤되면서 중심에 놓인 현재

항목을 강조해서 보여주는 위젯


레이아웃 파일

<?xml version="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" />


코드...public class GalleryTest extends Activity {

@Override public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main);Gallery g = (Gallery) findViewById(R.id.gallery);g.setAdapter(new ImageAdapter(this));g.setOnItemClickListener(new OnItemClickListener()

{public void onItemClick(AdapterView

parent, View v, int position, long id) {Toast.makeText(GalleryTest.this, ""

+ position,

Toast.LENGTH_SHORT).show(); }});

}}


IMAGEADAPTER 클래스...public class ImageAdapter extends BaseAdapter {

int mGalleryItemBackground;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 };

public ImageAdapter(Context c) {mContext = c;

}public int getCount() {

return mImageIds.length;}public Object getItem(int position) {

return position;}


IMAGEADAPTER 클래스public long getItemId(int position) {

return position;}public View getView(intposition, View convertView,

ViewGroup parent) {ImageView i = new ImageView(mContext);i.setImageResource(mImageIds[position]);i.setLayoutParams(new Gallery.LayoutParams(150,

100));i.setScaleType(ImageView.ScaleType.FIT_XY);

i.setBackgroundResource(mGalleryItemBackground);return i;

}}


실행결과


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


레이아웃 파일

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns: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>

http://schemas.android.com/apk/res/android




코드

...public class ProgressBarTest extends Activity {

private static final int PROGRESS = 0x1;private ProgressBar mProgressprivate int mProgressStatus = 0;private Handler mHandler = new Handler();

@Overrideprotected void onCreate(Bundle icicle) {

super.onCreate(icicle);setContentView(R.layout.main);


코드

mProgress = (ProgressBar) findViewById(R.id.ProgressBar01);// 백그라운드 스레드new Thread(new Runnable() {

@Overridepublic void run() {

while (true) {if (mProgressStatus < 100)

mProgressStatus += 10;

elsemProgressStatus =

0;mHandler.post(new

Runnable() {

@Overridepublic void run() {

mProgress.setProgress(mProgressStatus);}

});try {

Thread.sleep(300);} catch (InterruptedException

e) {e.printStackTrace();

}}

}}).start();

}}


실행 결과


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


레이아웃 파일

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/an-droid" 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>


코드

public class RatingBarTest extends Activity {@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main);final RatingBar ratingbar = (RatingBar)

findViewById(R.id.ratingbar);ratingbar.setOnRatingBarChangeListener(new

OnRatingBarChangeListener() {public void onRatingChanged(RatingBar

ratingBar, float rating, boolean fromUser) {Toast.makeText(RatingBarTest.this, "

점수 : "+ rating,

Toast.LENGTH_SHORT).show(); }});

}}


실행 결과


데이터 픽커와 타임 픽커


레이아웃 파일

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/an-droid" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android: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>


코드

private TextView mDateDisplay;private Button mPickDate;private int mYear;private int mMonth;private int mDay;

static final int DATE_DIALOG_ID = 0;


코드protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main);mDateDisplay = (TextView) findViewById(R.id.dateDisplay);mPickDate = (Button) findViewById(R.id.pickDate);mPickDate.setOnClickListener(new View.OnClickListener() {

public void onClick(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();

}


코드private void updateDisplay() {

mDateDisplay.setText(new StringBuilder() // 월은 0 부터 시작한다 . 따라서 1 을 더한다 ..append(mMonth + 1).append("-")

.append(mDay).append("-")

.append(mYear).append(" "));}


코드private DatePickerDialog.OnDateSetListener mDateSetListener = new DatePickerDialog.OnDateSetListener() {

public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)

{mYear = year;mMonth = monthOfYear;mDay = dayOfMonth;updateDisplay();

}}


코드@Overrideprotected Dialog onCreateDialog(int id) {

switch (id) {case DATE_DIALOG_ID:

return new DatePickerDialog(this, mDateSetListener, mYear,

mMonth, mDay);}return null;

}


실행 결과

Documents

CHAP 10. 고급 위젯