리스트뷰 사용하기2

이 자료들은 팁스소프트에서 제공하는 [ 알짜배기 ] 프로그램을 이용하면 더 편리하게 볼수 있습니다.

* 알짜배기 프로그램 받기 - http://www.tipssoft.com/bulletin/tb.php/QnA/8406

이번 강좌에서는 버튼(Button) 과 에디트텍스트(EditText) 그리고 리스트뷰(ListView) 를 이용하여

에디트텍스트에 문자열을 입력한 후 버튼을 누르면 입력한 내용이 리스트뷰에 추가되고, 추가된

리스트뷰의 항목을 선택하면 해당 항목의 문자열이 에디트텍스트에 출력되는 간단한 예제를 만들어

보도록 하겠습니다. 만약 위 컨트롤에 대해 잘모르시거나 자세하게 알고 싶으시면 아래에 링크된 자료를

참고하시기 바랍니다.

- 버튼 사용하기 : http://www.tipssoft.com/bulletin/tb.php/FAQ/916

- 에디트텍스트 사용하기 : http://www.tipssoft.com/bulletin/tb.php/FAQ/917

- 리스트뷰의 기초 : http://www.tipssoft.com/bulletin/tb.php/FAQ/918

리스트뷰를 사용하기 위해서는 리스트뷰에 출력되는 정보 그룹이 별도로 존재하여야하는데 이전

리스트뷰의 기초 강좌에서는 정보의 수가 변동되지 않는 정보를 사용하여서 String 배열로 구성

하였었습니다. 이번 강좌에서는 사용자가 입력한 문자열이 추가되는 동적인 정보를 사용하기 때문에

배열이 아닌 String 타입의 정보들을 동적으로 관리할 수 있는 ArrayList<String> 객체로 구성하도록

하겠습니다.

1. 리스트뷰 각 항목의 출력 형식을 정의한 XML 리소스 파일 생성

XML 리소스 파일을 메인 리소스 파일과는 별도로 생성하여 리스트뷰의 각 항목이 어떤 형식으로

출력될 것인지 XML 코드로 구성합니다.

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

2. 리소스 코드에 레이아웃 구성

버튼과 에디트텍스트 그리고 리스트뷰 컨트롤을 적당한 위치에 레이아웃 시킵니다. 이 예제는 나중에

다른 기술들을 배웠을 때 바로 접목시킬 수 있도록 채팅 프로그램과 유사한 형태로 레이아웃을 구성

하도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView
android:id="@+id/id_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

<!--에디트텍스트와 버튼이 자리를 차지하고 남은 영역을 모두 ListView 가 차지하게된다.-->
android:layout_weight="1"
/>
<EditText
android:id="@+id/id_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"

/>
<Button
android:id="@+id/id_btn"
android:layout_width="50pt"
android:layout_height="wrap_content"

<!--우측에 정렬되어 나타난다.-->
android:layout_gravity="right"
android:text="Insert!!"
/>
</LinearLayout>

3. 소스 코드 구성

소스 코드에서 구성되어야할 주요 기능은 에디터텍스트에 문자열을 입력하고, 버튼을 눌렀을 때

해당 문자열이 리스트뷰에 추가되는 것과 리스트뷰에서 항목을 선택했을 때 해당 항목의 문자열이

에디티텍스트에 출력되는 것입니다.

이 두가지 기능을 구현하기 위해서는 버튼의 클릭을 감지하는 OnClickListener 와 리스트뷰의 항목

선택을 감지하는 OnItemClickListener 가 등록되어야 하는데 이 리스너들을 등록하는 여러가지

방법들 중에서 클래스에 implements 키워드로 인터페이스를 등록하여 메소드를 재정의 하는 방법을

사용하도록 하겠습니다.

package com.example.examlistview;

import android.app.Activity;
import android.os.Bundle;

// 이벤트리스너의 onItemClick 메소드에서 넘어오는 AdapterView 를 사용하기 위해 추가

import android.widget.AdapterView;

// 이벤트리스너의 메소드에서 넘어오는 View 를 사용하기 위해 추가
import android.view.View;

import android.widget.Button; // 버튼 클래스를 사용하기 위해 추가
import android.widget.ListView; // 리스트뷰 클래스를 사용하기 위해 추가
import android.widget.TextView; // 텍스트뷰 클래스를 사용하기 위해 추가
import android.widget.EditText; // 에디트텍스트 클래스를 사용하기 위해 추가

import android.widget.ArrayAdapter; // 어댑터클래스를 사용하기 위해 추가
import android.widget.AdapterView.OnItemClickListener; // 리스너 이벤트를 사용하기 위해 추가
import android.view.View.OnClickListener; // 리스너 이벤트를 사용하기 위해 추가
import java.util.ArrayList; // 어레이리스트를 사용하기 위해 추가

// 이 액티비티는 OnItemClickListener, OnClickListener 인터페이스의 메소드 재정의를

// 포함하여 구현하였다.

public class ExamListViewAppActivity extends Activity implements OnItemClickListener, OnClickListener
{

// 이벤트 리스너의 재정의 메소드에서도 어댑터를 사용할 수 있도록 멤버변수로 선언한다.
ArrayAdapter<String> m_adapter;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

// 리소스 파일의 레이아웃 구성을 그대로 사용한다.
setContentView(R.layout.main);

// 리스트뷰가 가질 문자열이 동적으로 추가되므로 ArrayList 클래스 객체를 선언하여 사용한다.

ArrayList<String> list_string = new ArrayList<String>();

// 어댑터를 할당하여 ArrayList 객체와 항목 출력 리소스를 설정한다.
m_adapter = new ArrayAdapter<String>(this, R.layout.listview_item, list_string);

// 리소스 파일에 정의된 id_list 라는 ID의 리스트뷰를 얻어온다.

ListView list = (ListView) findViewById(R.id.id_list);

// 리스트뷰에 어댑터를 설정한다.
list.setAdapter(m_adapter);

// 리스트뷰에 리스너 인터페이스를 구현한 이 클래스를 넘겨주어 리스너를 설정한다.
list.setOnItemClickListener(this);

// 리소스 파일에 정의된 id_btn 이라는 ID의 버튼을 얻어온다.

Button btn = (Button) findViewById(R.id.id_btn);

// 버튼에 리스너 인터페이스를 구현한 이 클래스를 넘겨주어 리스너를 설정한다.
btn.setOnClickListener(this);
}

// OnClickListener 인터페이스의 onClick 메소드를 정의한다.

public void onClick(View view)
{

// 어댑터가 가진 데이터(ArrayList)가 몇개의 항목을 가지는지 얻어온다.
int string_count = m_adapter.getCount();

// 리소스 파일에 정의된 id_edit 이라는 ID의 에디트텍스트를 얻어온다.

EditText edit = (EditText) findViewById(R.id.id_edit);

// 에디트텍스트에 입력된 문자열을 String 타입으로 변경하여 리스트뷰의 맨 끝에 추가한다.
m_adapter.insert(edit.getText().toString(), string_count);

// 리소스 파일에 정의된 id_list 이라는 ID의 리스트뷰를 얻어온다.
ListView list = (ListView) findViewById(R.id.id_list);

// 문자열을 추가한 항목쪽으로 스크롤을 이동한다.
list.smoothScrollToPosition(string_count);

// 에디트텍스트에 문자열을 지운다.
edit.setText("");
}

// OnItemClickListener 인터페이스의 onItemClick 메소드를 정의한다.
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{

// 매개 변수로 넘어온 선택된 항목 View 를 TextView 로 캐스팅한다.
TextView select_item = (TextView)view;

// 리소스 파일에 정의된 id_edit 라는 ID의 에디트텍스트를 얻어온다.
EditText edit = (EditText) findViewById(R.id.id_edit);

// TextView 로 캐스팅된 선택 항목의 문자열을 얻어서 에디트텍스트에 출력시킨다.
edit.setText(select_item.getText());
}

}

4. 실행 화면