[2020 안드로이드 스튜디오] 리스트뷰(ListView), 어댑터(Adapter) 이해 &기본예제

[2020 안드로이드 스튜디오] 리스트뷰(ListView) 이해 &예제, 어댑터 개념 

Android Studio Version 3.6.3

사용언어: JAVA

 

 

 

STEP 1 아이템을 위한 XML 레이아웃 정의하기

- 리스트뷰에 들어갈 각 아이템의 레이아웃을 XML로 정의합니다.

 

 

※ 예제 만들 때 파일명을 single로 한다는게 singer로 오타냈네요.

코드가 돌아가는데는 이상이 없습니다. 무시하고 원하는 대로 네이밍 하시면 됩니다. ※

 

■ singer_item_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/ic_launcher"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이름"
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@android:color/holo_blue_dark"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="전화번호"
            android:textSize="24sp"
            android:textColor="@android:color/darker_gray"/>
    </LinearLayout>
</LinearLayout>

 

STEP 2 아이템을 위한 뷰 정의하기

- 먼저 하나의 아이템을 정의하는 클래스를 만듭니다. 

- 아이템을 구성할 요소는 이미지, 텍스트2개 입니다. 즉, 변수 3개를 선언하면 되겠죠. 

 

 

 

■ SingerItem.java

package com.example.myapplication;

public class SingerItem {
    String name;
    String mobile;
    int resId;

    //생성
    public SingerItem(String name, String mobile, int resId) {
        this.name = name;
        this.mobile = mobile;
        this.resId = resId;
    }

    //변수에 접근할 때 .OO 접근하기보다는 안전하게 getter, setter를 이용합니다.
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

    public int getResId() {
        return resId;
    }
    
    @Override
    public String toString() {
        return "SingerItem{" +
                "name='" + name + '\'' +
                ", mobile='" + mobile + '\'' +
                '}';
    }
}

 

 

- 전체 중 부분화면만 구성하는 거라 STEP1 에서 정의한 XML 레이아웃을 인플레이션 후 설정해야 합니다. 

- 아이템을 다루는 자바 파일을 만듭니다.

- 아이템 레이아웃(single_item_list)를 인플레이션하여 참조할 수 있게 합니다. 

- setOOO 메서드를 통해 정의만 되어 있는 아이템의 이미지와 텍스트를 데이터를 넣을 수 있게 만듭니다. 

 

■ SingerItemView.java

package com.example.myapplication;
        import android.content.Context;
        import android.util.AttributeSet;
        import android.view.LayoutInflater;
        import android.widget.ImageView;
        import android.widget.LinearLayout;
        import android.widget.TextView;
        import androidx.annotation.Nullable;

public class SingerItemView extends LinearLayout {

    //어디서든 사용할 수 있게하려면
    TextView textView, textView2;
    ImageView imageView;

    public SingerItemView(Context context) {
        super(context);
        init(context);//인플레이션해서 붙여주는 역
    }

    public SingerItemView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    // 지금 만든 객체(xml 레이아웃)를 인플레이션화(메모리 객체화)해서 붙여줌
    // LayoutInflater를 써서 시스템 서비스를 참조할 수 있음
    // 단말이 켜졌을 때 기본적으로 백그라운드에서 실행시키는 것을 시스템 서비스라고 함
    private void init(Context context){
        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.singer_item_list,this, true);

        textView = findViewById(R.id.textView);
        textView2 = findViewById(R.id.textView2);
        imageView = findViewById(R.id.imageView);
    }

    public void setName(String name){
        textView.setText(name);
    }
    public void setMobile(String mobile){
        textView2.setText(mobile);
    }
    public void setImage(int resId){
        imageView.setImageResource(resId);
    }
}

 

STEP 3 어댑터 정의하기

- MainActivity에 데이터 관리 역할을 하는 어댑터 클래스를 만듭니다.

- 그 안에 각 아이템으로 표시할 뷰를 리턴하는 getView() 메소드를 정의합니다. 

 

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;

import java.lang.reflect.Array;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView listView = findViewById(R.id.listView);
        SingerAdapter adapter = new SingerAdapter();
        adapter.addItem(new SingerItem("blackFish", "010-1000-1000",R.drawable.icon01));
        adapter.addItem(new SingerItem("whiteFish", "010-1000-1001",R.drawable.icon02));
        adapter.addItem(new SingerItem("whiteGroup", "010-1000-1002",R.drawable.icon03));
        adapter.addItem(new SingerItem("blackGroup", "010-1000-1003",R.drawable.icon04));
        adapter.addItem(new SingerItem("blackFish", "010-1000-1000",R.drawable.icon01));
        adapter.addItem(new SingerItem("whiteFish", "010-1000-1001",R.drawable.icon02));
        adapter.addItem(new SingerItem("whiteGroup", "010-1000-1002",R.drawable.icon03));
        adapter.addItem(new SingerItem("blackGroup", "010-1000-1003",R.drawable.icon04));
        listView.setAdapter(adapter);
    }

    class SingerAdapter extends BaseAdapter {
        //데이터가 들어가있지 않고, 어떻게 담을지만 정의해뒀다.
        ArrayList<SingerItem> items = new ArrayList<SingerItem>();

        @Override
        public int getCount() {
            return items.size();
        }

        public void addItem(SingerItem item){
            items.add(item);
        }

        @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) {
            SingerItemView singerItemView = null;
            // 코드를 재사용할 수 있도록
            if(convertView == null) {
                singerItemView = new SingerItemView(getApplicationContext());
            } else {
                singerItemView = (SingerItemView)convertView;
            }
            SingerItem item = items.get(position);
            singerItemView.setName(item.getName());
            singerItemView.setMobile(item.getMobile());
            singerItemView.setImage(item.getResId());
            return singerItemView;
        }
    }
}

 

디렉토리 구성

 

완성본