[안드로이드] 리스트 뷰(ListView) 이용하기

안녕하세요 ! 초보개발자 입니다. 

이 블로그는 개인 공부 정리용 블로그 입니다. 

혹 잘못된 내용이 있다면 지적 부탁드리겠습니다.

그리고 질문주신다면 최대한 아는선에서 답변드리도록 하겠습니다.

그럼 시작하도록 하겠습니다.

---

리스트 뷰(ListView)

리스트 뷰는 일반적으로 리스트 형태로 된 컨트롤 입니다. 이러한 리스트 뷰는 여러개의 아이템 중에서 하나를 선택 할 수 있습니다. 이렇게 선택할 수 있는 위젯을 '선택 위젯' 이라고 합니다. 대표적인 선택 위젯은 '리스트 뷰', '스피너', '그리드 뷰' 등이 있습니다. 이러한 선택 위젯은 선택할 수 있는 여러개의 아이템이 어댑터(adapter)를 통해 화면에 표시됩니다.  쉽게 말해서 어댑터(adapter)가 하는 역활은 데이터를 받아 view를 생성하고 이렇게 생성된 view 는 ListView 의 하나의 아이템이 되는 것입니다.

그럼 실습을 통하여 리스트 뷰를 구현 하여 보겠습니다.

먼저 리스트 뷰의 하나의 아이템을 위한 xml 레이아웃을 만들어 보도록 하겠습니다. 아래와 같은 형태로 만들 것입니다.

<listviewitem.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/imageView"

        />
 
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/book"
            android:textSize="40dp"
            android:textStyle="bold"
             />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:id="@+id/date"
                android:textSize="20dp"
                android:layout_marginTop="6dp" />
 
 
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

리스트 뷰에 아이템이 추가 될 때마다 위와 같은 모양으로 추가가 될 것입니다.

리스트 뷰가 보여질 메인 xml은 다음과 같은 화면으로 나타 내었습니다.

<main.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
  >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView example"
        android:textSize="20dp"
        />
    <ListView
        android:id="@+id/listview"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="432dp">
 
    </ListView>
 
 
</LinearLayout>
 

리스트 뷰에 들어 갈 아이템의 정보는 이미지뷰 1개, 2개의 텍스트 이므로 아래와 같은 클래스를 만들어 줍니다.

<ListViewItem.java>

package com.example.donghyun.listview;
 
import android.graphics.drawable.Drawable;
 
/**
 * Created by DongHyun on 2017-05-17.
 */
 
public class ListViewItem {
    private Drawable drawable;
    private String text1;
    private String text2;
 
    public Drawable getDrawable() {
        return drawable;
    }
 
    public void setDrawable(Drawable drawable) {
        this.drawable = drawable;
    }
 
    public String getText1() {
        return text1;
    }
 
    public void setText1(String text1) {
        this.text1 = text1;
    }
 
    public String getText2() {
        return text2;
    }
 
    public void setText2(String text2) {
        this.text2 = text2;
    }
}
 

 

위에서 말한 것 처럼 어댑터(Adapter)를 통하여 아이템과 리스트 뷰를 연결해 주겠습니다. 

<ListViewAdapter.java>

package com.example.donghyun.listview;
 
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
/**
 * Created by DongHyun on 2017-05-17.
 */
 
public class ListViewAdapter extends BaseAdapter {
 
    private ArrayList<ListViewItem> arrayList = new ArrayList<>();
 
    public ListViewAdapter(){
 
    }
    @Override
    public int getCount() {
        return arrayList.size();
    }
 
    @Override
    public Object getItem(int i) {
        return arrayList.get(i);
    }
 
    @Override
    public long getItemId(int i) {
        return i;
    }
 
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        
        Context context = viewGroup.getContext();
 
        if(view == null){
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.listviewitem,viewGroup,false);
        }
        ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
        TextView text1 = (TextView)view.findViewById(R.id.book);
        TextView text2 = (TextView)view.findViewById(R.id.date);
 
        ListViewItem listViewItem = arrayList.get(i);
 
        imageView.setImageDrawable(listViewItem.getDrawable());
        text1.setText(listViewItem.getText1());
        text2.setText(listViewItem.getText2());
 
 
        return view;
    }
    public void addItem(Drawable drawable,String text1,String text2){
        ListViewItem listViewItem = new ListViewItem();
        listViewItem.setDrawable(drawable);
        listViewItem.setText1(text1);
        listViewItem.setText2(text2);
 
        arrayList.add(listViewItem);
    }
}
 

ListViewAdapter.java 클래스는 BaseAdapter 클래스를 상속 하였습니다. BaseAdapter 클래스는 어뎁터를 정의할 때 상속하는 가장 일반적인 클래스 입니다.  BaseAdapter 의 클래스를 상속하였으므로 기본적으로 ListViewAdapter가 가져야 할 클래스는 위에서 보는 것과 같습니다. 그 중에서도 getCount()함수와 getView() 함수가 중요 합니다. getCount() 함수는 아이템의 개수를 리턴해 줍니다. 그렇기 때문에 아이템들을 구분 하기 위해서는 아이템의 개수가 필요 합니다. getView() 함수는 다음과 같이 세개의 파라메터를 가지고 있습니다.

public View getView(int i, View view, ViewGroup viewGroup) 

첫 번째 파라메터는 아이템의 인덱스를 의미하고 리스트 뷰에서 보일 아이템의 위치정보라고 할 수 있습니다.

두 번째 파라메터는 현재 인덱스에 해당하는 뷰 객체를 의미 합니다.

세 번째 파라메터는 이 뷰를 포함하고 있는 부모 컨테이너의 객체 입니다. 

어댑터를 생성 하고 데이터를 추가 해주면 ListView 의 결과를 확인 할 수 있습니다.

<MainActivity.java>

package com.example.donghyun.listview;
 
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
 
public class MainActivity extends Activity {
    ListView listView ;
    ListViewAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        listView = (ListView)findViewById(R.id.listview);
        adapter = new ListViewAdapter();
 
        adapter.addItem(ContextCompat.getDrawable(this,R.drawable.a),"해리포터","불사조의 기사단");
        adapter.addItem(ContextCompat.getDrawable(this,R.drawable.b),"해리포터","마법사의 돌");
        adapter.addItem(ContextCompat.getDrawable(this,R.drawable.c),"해리포터","불의 잔");
 
        listView.setAdapter(adapter);
 
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                ListViewItem listViewItem = (ListViewItem)adapterView.getItemAtPosition(i);
                Toast.makeText(getApplicationContext(),listViewItem.getText2()+"를 선택하였습니다.",Toast.LENGTH_SHORT).show();
            }
        });
    }
}
 

ListView 아이템 클릭 이벤트를 통해 아이템이 클릭 되었을 경우 호출되는 OnItemClick() 함수에서 ListView의 아이템 정보를 가져오려면 파라메터로 전달되는 변수를 이용하면 됩니다. 

실행화면은 다음과 같습니다. 

아이템을 클릭시 Toast 메시지를 출력하는 결과 입니다.

이상으로 ListView에 대해서 알아 보았습니다.