ArrayList, ArrayAdapter와 ListView - 1. 기본적인 사용 방법

본 포스팅에서는 ArrayList에 저장되어 있는 데이터를 ListView에 보여주기 위해  ArrayAdapter를 사용하는 방법을 코드적으로 설명합니다.

자세한 구현 방법은 MainActivity.java에 있는 주석을 번호 순으로 읽어보세요.

다음 포스팅에서는 화면 크기 제약으로 일정 개수만 리스트뷰에 보여주게 되는 원리를 설명합니다.

최초 작성  - 2018. 6. 24

ArrayList,  ArrayAdapter와 ListView - 1. 기본적인 사용 방법 ArrayList,  ArrayAdapter와 ListView - 2. ListView와 Adapter의 동작 살펴보기 http://webnautes.tistory.com/1194 ArrayList,  ArrayAdapter와 ListView - 3. Custom Adapter를 구현하는 방법(ViewHolder, getView ) http://webnautes.tistory.com/1201

앱을 실행시키면 ArrayList에 저장되어 있던  item 0 ~ item 49를 화면에 보여줍니다.

하지만 한 화면에 모두 보여줄 수 없기 때문에 일부(안드로이드 디바이스에 따라 다른 갯수)만 화면에 보이게 됩니다.

그래서 item 0 ~ item 11만 화면에 보여집니다.  이후 사용자가 수직으로 스크롤하여 모든 item을 확인할 수 있습니다.

    

ListView의 아이템을 터치하면 해당 아이템을 ListView에서 제거하도록 구현되어 있습니다.

아래 캡쳐화면은 item 4 ~ item 7까지 터치하여 ListView에서 제거된 상태입니다.

styles.xml

앱의 타이틀 바를 제거하기 위해 다음 노란색 코드를 추가합니다.

<resources>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <!-- 타이틀바 제거. -->        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style> </resources>

activity_main.xml

레이아웃에 ListView를 추가합니다.

<?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:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity"> <ListView    android:id="@+id/listview"    android:layout_width="match_parent"    android:layout_height="match_parent" /> </LinearLayout>

MainActivity.java

package com.tistory.webnautes.usearrayadapterwithlistview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        // 1. 레이아웃을 정의한 레이아웃 리소스(R.layout)을 사용하여 현재 액티비티의 화면을 구성하도록 합니다.        setContentView(R.layout.activity_main);        // 2. 레이아웃 파일에 정의된 ListView를 자바 코드에서 사용할 수 있도록 합니다.        // findViewById 메소드는 레이아웃 파일의 android:id 속성을 이용하여 뷰 객체를 찾아 리턴합니다.        ListView listview = (ListView)findViewById(R.id.listview);        // 3. 실제로 문자열 데이터를 저장하는데 사용할 ArrayList 객체를 생성합니다.        final ArrayList<String> list = new ArrayList<>();        // 4. ArrayList 객체에 데이터를 집어넣습니다.        for (int i = 0; i < 50; i++) {            list.add("item " + i);          }        // 5. ArrayList 객체와 ListView 객체를 연결하기 위해 ArrayAdapter객체를 사용합니다.        // 우선 ArrayList 객체를 ArrayAdapter 객체에 연결합니다.        final ArrayAdapter<String> adapter = new ArrayAdapter<String>(                this, //context(액티비티 인스턴스)                android.R.layout.simple_list_item_1, // 한 줄에 하나의 텍스트 아이템만 보여주는 레이아웃 파일                // 한 줄에 보여지는 아이템 갯수나 구성을 변경하려면 여기에 새로만든 레이아웃을 지정하면 됩니다.                list // 데이터가 저장되어 있는 ArrayList 객체        );                        // 6. ListView 객체에 adapter 객체를 연결합니다.        listview.setAdapter(adapter);        // 7. ListView 객체의 특정 아이템 클릭시 처리를 추가합니다.        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView,                                    View view, int position, long id) {                // 8. 클릭한 아이템의 문자열을 가져와서                String selected_item = (String)adapterView.getItemAtPosition(position);                // 9. 해당 아이템을 ArrayList 객체에서 제거하고                list.remove(selected_item);                // 10. 어댑터 객체에 변경 내용을 반영시켜줘야 에러가 발생하지 않습니다.                adapter.notifyDataSetChanged();            }        });    } }