[Android] 리스트뷰(ListView)

리스트뷰는 사용자가 정의한 데이터 목록을 세로로 배열하고 스크롤 할 수 있게 제공되는 뷰그룹의 한 종류입니다.

리스트뷰에는 데이터를 관리하는 어탭터(Adapter)를 사용합니다.

어탭터는 각각의 아이템을 위한 뷰도 만들어줍니다.

각각의 아이템은 독립된 뷰로 만들어지고 이 뷰들이 모인 형태를 유지하는 것이 리스트뷰입니다.

 

그럼 직접 구현해보겠습니다.

 

1. activity_main.xml에 ListView 추가하기

간단하게 LinearLayout 안에 ListView를 추가하였습니다.

<?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">
 
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
</LinearLayout>

 

 

2. item_view.xml 구현하기

저는 최근에 본 청춘시대1 주인공들의 프로필을 만들어보겠습니다.

ImageView와 TextView로 구성된 item을 만들었습니다.

이 때, 주의할 점은 루트 레이아웃의 android:layout_height="wrap_content" 입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="130dp"
        android:layout_height="150dp"/>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_vertical">
 
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="20sp"/>
 
        <TextView
            android:id="@+id/nickname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="16sp"/>
 
    </LinearLayout>
 
</LinearLayout>

 

 

3. Item Class 만들기

리스트뷰에 들어갈 Item Class를 만들어줍니다.

저는 ImageView에 들어갈 리소스 ID를 담는 src와 name, nickname으로 만들었고 setter로 접근하도록 만들었습니다.

생성자로 각 멤버 변수의 값을 setting하도록 했습니다. (getter/setter로 구현해도 무방합니다.)

package com.example.mylist1;
 
public class People {
    private int src;
    private String name;
    private String nickname;
 
    public People(int src, String name, String nickname) {
        this.src = src;
        this.name = name;
        this.nickname = nickname;
    }
 
    public int getSrc() {
        return src;
    }
 
    public String getName() {
        return name;
    }
 
    public String getNickname() {
        return nickname;
    }
}
 

 

 

4. Adapter 만들기

BaseAdapter를 상속받아 Adapter를 만들어보았습니다.

 

1. Adapter는 Context, ArrayList를 인자로 받아 생성됩니다.

2. getCount() : item의 개수 return

3. getItem(int position) : 해당 position의 item을 return

4. getItemId(int position) : item id를 알려주는 부분, 저는 그냥 return position 했습니다.

5. getView(int position, View convertView, ViewGroup parent) : 가장 중요한 부분, 해당되는 item의 View를 직접 return하는 부분입니다. 

뷰의 재사용을 위해 convertView == null 일 때만 인플레이션 하고 각 구성요소들의 객체를 ID로 찾은 뒤 데이터를 세팅해줍니다.

package com.example.mylist1;
 
import android.content.Context;
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;
 
public class ItemAdapter extends BaseAdapter {
    Context context;
    ArrayList<People> items;
 
    public ItemAdapter(Context context, ArrayList<People> items) {
        this.context = context;
        this.items = items;
    }
 
    @Override
    public int getCount() {
        return items.size();
    }
 
    @Override
    public Object getItem(int position) {
        return items.get(position);
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.list_view, null);
        }
 
        People people = (People) getItem(position);
        ImageView image = convertView.findViewById(R.id.image);
        TextView name = convertView.findViewById(R.id.name);
        TextView nickname = convertView.findViewById(R.id.nickname);
 
        image.setImageResource(people.getSrc());
        name.setText(people.getName());
        nickname.setText(people.getNickname());
 
        return convertView;
    }
}
 

 

 

5. ListView와 Adapter 연결

마지막 부분입니다. 완성된 Adapter를 ListView와 연결해주기만 하면 됩니다.

우리가 만든 Adapter는 생성자의 인자로 Context, ArrayList를 받습니다.

MainActivity.this로 context를 전달하고 ArrayList에 element를 추가하여 전달합니다.

최종적으로 setAdapter() 메서드를 이용하여 adapter를 연결해줍니다.

package com.example.mylist1;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.widget.ListView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ArrayList<People> list = new ArrayList<>();
        list.add(new People(R.drawable.jinmyong, "윤진명", "생계형 철의 여인"));
        list.add(new People(R.drawable.yaeeun, "정예은", "연애 호구"));
        list.add(new People(R.drawable.jiwon, "송지원", "여자 신동엽"));
        list.add(new People(R.drawable.ina, "강이나", "외모 센터"));
        list.add(new People(R.drawable.eunjae, "유은재", "소심이"));
 
        ListView listView = findViewById(R.id.listView);
        ItemAdapter adapter = new ItemAdapter(MainActivity.this, list);
        listView.setAdapter(adapter);
    }
}
 

 

 

완성!