[ Android ] ListView

 

이 글은 부스트코스 강의를 공부하며 요약한 글입니다.

 

  CatServant  

 ListView

 

최근 실무에서는 ListView 보다는 RecyclerView를 많이 사용합니다. 

 

ListView 동작법

여러 개의 item 중에서 하나를 선택하는 방식을 가진 선택 위젯은 Adapter를 사용합니다. 화면에 보이는 View가 데이터를 관리하는 것이 아니라 Adapter가 데이터를 관리하는 방식으로 사용하게 됩니다. Adapter는 데이터를 관리하면서 동시에 위젯을 통해 보일 각각의 item을 위해 View를 만들어 줍니다. 

 

ListView는 여러 개의 Item을 위 아래로 스크롤 할 수 있게 해주면서 각각의 item을 순서대로 보여주는 역할을 합니다. 각각의 item은 독립적인 View로 만들어지게 되고 View들이 모여있는 형태를 유지해 주는 것이 ListView입니다.

 

• ListView로 보여줄 때 해야 할 일

 

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

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

 

2. 아이템을 위한 View 정의하기

리스트뷰에 들어갈 각 아이템을 하나의 View로 정의, 이 View는 여러 개의 뷰를 담고 있는 ViewGroup이어야 한다. 이는 부분화면과 같아서 아이템을 위해 정의한 XML 레이아웃을 인프레이션 후 설정해야 한다.

 

3. Adapter 정의하기

데이터 관리 역할을 하는 adapter class를 만들고 그 안에 각 아이템으로 표시할 View를 리턴하는 getView() 메소드를 정의한다.

 

4. ListView 정의하기

화면에 보여줄 리스트뷰를 만들고 그 안에 데이터가 선택되었을 때 호출될 Listener 객체를 정의한다.

 

 

 Code

• Singeritem.java

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

    public String getName() {
        return name;
    }

    public String getMobile() {
        return mobile;
    }

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

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

    public int getResId() {
        return resId;
    }

    public void setResId(int resId) {
        this.resId = resId;
    }

    @NonNull
    @Override
    public String toString() {
        return super.toString();
    }
}

• SingerItemView.java

public class SingerItemView extends LinearLayout {
    TextView textView;
    TextView textView2;
    ImageView imageView;

    public SingerItemView(Context context) {
        super(context);
        init(context);
    }

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

    private void init(Context context) {
        // layout inflation 안에 view를 참조 가능해짐
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);// 시스템 서비스 참조
        inflater.inflate(R.layout.singer_item, this, true);

        imageView = (ImageView)findViewById(R.id.imageView);
        textView = (TextView)findViewById(R.id.textview);
        textView2 = (TextView)findViewById(R.id.textview2);
    }

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

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

    public void setImage(int resId) {
        imageView.setImageResource(resId);
    }
}

• MainActivity.java

public class MainActivity extends AppCompatActivity {
    SingerAdapter adapter;

    EditText editText;
    EditText editText2;

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

        editText = (EditText)findViewById(R.id.editText);
        editText2 = (EditText)findViewById(R.id.editText2);

        ListView listView = (ListView) findViewById(R.id.listView);

        adapter = new SingerAdapter();
        adapter.addItem(new SingerItem("비투비", "010-1000-1000", R.drawable.ic_kakao));
        adapter.addItem(new SingerItem("여자친구", "010-1000-1000", R.drawable.ic_kakao));
        adapter.addItem(new SingerItem("태연", "010-1000-1000", R.drawable.ic_kakao));
        adapter.addItem(new SingerItem("아이유", "010-1000-1000", R.drawable.ic_kakao));
        adapter.addItem(new SingerItem("볼빨간사춘기", "010-1000-1000", R.drawable.ic_facebook));

        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                SingerItem item = (SingerItem) adapter.getItem(position);
                Toast.makeText(getApplicationContext(), "선택 : "+item.getName(), Toast.LENGTH_LONG).show();
            }
        });

        Button button =  (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String name = editText.getText().toString();
                String mobile = editText2.getText().toString();

                adapter.addItem(new SingerItem(name, mobile, R.drawable.ic_facebook));
                adapter.notifyDataSetChanged(); // adapter 쪽에서 listview에 갱신하라고 알려줌
            }
        });
    }

    class SingerAdapter extends BaseAdapter {
        ArrayList<SingerItem> items = new ArrayList<SingerItem>();

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

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

        @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 view = null;
            if (convertView == null) { // converView : 이전에 사용했던 뷰
                view = new SingerItemView(getApplicationContext());
            }
            else {
                view = (SingerItemView) convertView;
            }

            SingerItem item = items.get(position);
            view.setName(item.getName());
            view.setMobile(item.getMobile());
            view.setImage(item.getResId());

            return view;
        }
    }
}

List item의 데이터는 ListView가 관리하는 것이 아니라 Adapter가 관리합니다. Adapter를 Listview에 설정하면 ListView는 Adapter에게 데이터나 각각의 item을 위한 View에 관해 물어보게 됩니다. 각각의 item을 위한 View도 Adapter에서 만들어주기 때문에 ListView는 Adapter의 getView 메소드를 호출하여 View객체를 반환받은 후 화면에 보여주게 됩니다.

• res / layout / singer_item.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="wrap_content"
    android:orientation="horizontal">

    <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:orientation="vertical">

        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이름"
            android:textSize="30dp"
            android:textColor="@color/colorPrimaryDark"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="전화번호"
            android:textSize="24dp"
            android:textColor="@color/colorPrimaryDark"/>
    </LinearLayout>
</LinearLayout>

• res / layout / activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="추가" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Number" />
    </LinearLayout>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/linearLayout"/>
</RelativeLayout>

 

출처

https://www.edwith.org/boostcourse-android/lecture/17057/

[LECTURE] 1) 리스트뷰 만들기 : edwith