안드로이드 앱 프로그래밍#11-리스트뷰(list view)

오늘은 매우 중요한 리스트 뷰 에 대해서 알아보겠다.

리스트 뷰는 데이터를 아이템 별로 보여주는 뷰의 한 종류이다.

제일 쉬운 예로는 스마트폰에 있는 전화번호부를 생각하면 될것같다.

리스트 뷰에 데이터가 많으면 자동으로 스크롤뷰로 보이는데

전화번호부는 아이템별로 보여진다는 점에서 리스트뷰라고 이해하면 된다.

사람이름과 전화번호등의 하나의 패키지를 하나의 아이템으로 보면 된다.

다른예로는 음악 플레이리스트도 있겠다.

자 그럼 코드를 먼저 보면

package com.example.mylistview;

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.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        ListView listView = (ListView) findViewById(R.id.listView); //리스트뷰 객체 찾기

        SingerAdapter adapter = new SingerAdapter();

        adapter.addItem(new SingerItem("aaa", "010-1000-1000"));
        adapter.addItem(new SingerItem("bbb", "010-2000-2000"));
        adapter.addItem(new SingerItem("ccc", "010-3000-3000"));
        adapter.addItem(new SingerItem("ddd", "010-4000-4000"));
        adapter.addItem(new SingerItem("eee", "010-5000-5000"));
        adapter.addItem(new SingerItem("fff", "010-1000-1000"));
        adapter.addItem(new SingerItem("ggg", "010-2000-2000"));
        adapter.addItem(new SingerItem("hhh", "010-3000-3000"));
        adapter.addItem(new SingerItem("iii", "010-4000-4000"));
        adapter.addItem(new SingerItem("jjj", "010-5000-5000"));

        listView.setAdapter(adapter);

    }

    class SingerAdapter extends BaseAdapter{ //어댑터를 커스터마이징하기 쉽게 클래스 만들기

        ArrayList<SingerItem> items = new ArrayList<SingerItem>();
        //어댑터는 데이터를 관리하는 역할, 데이터를 관리(추가,삭제)하기 쉽게 arraylist만들어줌

        @Override
        public int getCount() { //SingerAdapter라는 클래스에 몇개의 아이템이 있는지
            return items.size();
        }

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

        @Override
        public Object getItem(int position) { //position은 index역할
            return items.get(position);
        }

        @Override
        public long getItemId(int position) { //item의 id가 있다면 그것을 반환
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) { //item들을 view로 보여주는 메소드
            SingerItemView view = new SingerItemView(getApplicationContext());
            SingerItem item = items.get(position);
            view.setName(item.getName()); // 윗줄에서 정의된 item값을 view의 이름으로 설정함
            view.setMobile(item.getMobile());

            return view;
        }
    }
}

위의 코드에 대해서 간략히 설명하자면 어댑터를 만들고 그안에 들어가는 데이터를 만들어 놓은것이다.

 

리스트뷰는 빈 껍데기일뿐이고 그 안에 들어가는 데이터들은 어댑터를 통해서 관리한다.

 

그래서 BaseAdapter를 상속받는 SingerAdapter라는 클래스를 만들고 

 

그안에 데이터의 생성,삭제를 쉽게 하기위해서 배열(ArrayList)로 item들을 관리하는 코드이다.

 

그렇게 item 구성을 다 끝내면 view로 보여주기 위한 getView라는 메소드도 만들어준다.

package com.example.mylistview;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;

public class SingerItemView extends LinearLayout { //singer_item.xml의 최상위 레이아웃인 LinearLayout을 상속
    TextView textView1;
    TextView textView2;
    public SingerItemView(Context context) {
        super(context);
        init(context);
    }

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

    private void init(Context context){//인플레이션 담당
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.singer_item, this, true);

        textView1 = (TextView) findViewById(R.id.textview1);//singer_item.xml에 있는 textview1을 가져옴
        textView2 = (TextView) findViewById(R.id.textview2);
    }

    public void setName(String name){
        textView1.setText(name);
    }

    public void setMobile(String mobile) {
        textView2.setText(mobile);
    }
}

위의 코드는 새로운 xml파일을 화면에 보여주기 위해서 레이아웃 인플레이션을 하는 과정과

 

textView1,2에 있는 이름,번호에 각 아이템들의 이름 번호를 설정해주는 메소드 setName, setMobile을 만들어준것이다.

 

package com.example.mylistview;

public class SingerItem {
    String name;
    String mobile;

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

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

    @Override
    public String toString() { //문자열로 출려하기 위한 메소드, 데이터가 잘 들어갔는지 확인용
        return "SingerItem{" +
                "name='" + name + '\'' +
                ", mobile='" + mobile + '\'' +
                '}';
    }
}

위 코드는 SingerItem이라는 클래스인데

 

데이터로 들어가는 name과 mobile넘버를 다루기 위한 클래스이다.