[안드로이드/Android] 리스트뷰(ListView) 만들기

 

리스트뷰 (ListView) 란?

 

- 사용자가 정의한 데이터 목록을 세로 방향으로 나열하여 화면에 표시하는 뷰 그룹(ViewGroup) 의 한 종류

- 리스트뷰(ListView) 와 같은 뷰 그룹(ViewGroup) 은 스크롤 기능을 지원하며 사용자가 배치된 각 항목(Item) 선택 기능이 가능한 선택 위젯

 

 

작성한 파일 목록 입니다.

 

1. AndroidManifest.xml

2. ListViewActivity.java

3. activity_listview.xml

4. BearItem.java

5. listview_list_item.xml 

 

 

 

1. AndroidManifest.xml

 

새로 생성한 ListViewActivity 를 application 에 등록해줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.eun.myapp">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".ListViewActivity">
        	<intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

 

 

 

2. ListViewActivity.java

 

리스트뷰(ListView) 를 구현할 ListViewActivity 액티비티를 생성합니다.

 

이 액티비티에서 리스트뷰(ListView) 를 호출하고

리스트뷰어댑터 를 구현합니다.

 

리스트뷰(ListView) 에 사용자가 정의한 아이템을 표시하기 위해서는 Adapter 를 사용해야 합니다.

Adapter 는 사용자의 아이템 데이터를 받아 뷰(View) 를 생성해주는 객체 입니다.

 

setAdapter() 를 통해 리스트뷰(ListView) 와 Adapter 를 연결합니다. 

리스트뷰(ListView) 는 Adapter 로부터 생성된 뷰(View) 를 받아 리스트뷰(ListView) 의 항목으로 배치합니다.

 

각 리스트의 선택 이벤트도 같이 구현하였습니다.

 

package com.eun.myapp;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class ListViewActivity extends AppCompatActivity {
    private String TAG = ListViewActivity.class.getSimpleName();

    private ListView listview = null;
    private ListViewAdapter adapter = null;

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

        listview = (ListView) findViewById(R.id.listview);
        adapter = new ListViewAdapter();

        //Adapter 안에 아이템의 정보 담기
        adapter.addItem(new BearItem("1", "파랑이", R.drawable.img_blue));
        adapter.addItem(new BearItem("2", "민트트", R.drawable.img_mint));
        adapter.addItem(new BearItem("3", "하늘이", R.drawable.img_skyblue));
        adapter.addItem(new BearItem("4", "하양이", R.drawable.img_white));
        adapter.addItem(new BearItem("5", "분홍이", R.drawable.img_pink));
        adapter.addItem(new BearItem("6", "노랑이", R.drawable.img_yellow));
        adapter.addItem(new BearItem("7", "보라라", R.drawable.img_purple));
        adapter.addItem(new BearItem("8", "믹스스", R.drawable.img_mix));

        //리스트뷰에 Adapter 설정
        listview.setAdapter(adapter);
    }


    /* 리스트뷰 어댑터 */
    public class ListViewAdapter extends BaseAdapter {
        ArrayList<BearItem> items = new ArrayList<BearItem>();

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

        public void addItem(BearItem 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 viewGroup) {
            final Context context = viewGroup.getContext();
            final BearItem bearItem = items.get(position);

            if(convertView == null) {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.listview_list_item, viewGroup, false);

            } else {
                View view = new View(context);
                view = (View) convertView;
            }

            TextView tv_num = (TextView) convertView.findViewById(R.id.tv_num);
            TextView tv_name = (TextView) convertView.findViewById(R.id.tv_name);
            ImageView iv_icon = (ImageView) convertView.findViewById(R.id.iv_icon);

            tv_num.setText(bearItem.getNum());
            tv_name.setText(bearItem.getName());
            iv_icon.setImageResource(bearItem.getResId());
            Log.d(TAG, "getView() - [ "+position+" ] "+bearItem.getName());

            //각 아이템 선택 event 
            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(context, bearItem.getNum()+" 번 - "+bearItem.getName()+" 입니당! ", Toast.LENGTH_SHORT).show();
                }
            });

            return convertView;  //뷰 객체 반환
        }
    }

}

 

 

 

3. activity_listview.xml

 

리스트뷰(ListView) 레이아웃 리소스 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ListViewActivity">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="50dp"
        android:background="#FAED7D"
        android:text="리스트뷰"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="550dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="50dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"
        android:background="#dedede"/>

</android.support.constraint.ConstraintLayout>

 

 

 

4. BearItem.java

 

리스트뷰(ListView) 에 아이템의 정보를 담기 위한 클래스 입니다.

생성자 함수를 통해 각 멤버변수의 데이터 값들을 넣어줍니다.

 

package com.eun.myapp;

public class BearItem {
    /* 아이템의 정보를 담기 위한 클래스 */

    String num;
    String name;
    int resId;

    public BearItem(String num, String name, int resId) {
        this.num = num;
        this.name = name;
        this.resId = resId;
    }

    public String getNum() {
        return num;
    }
    public void setNum(String num) {
        this.num = num;
    }

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

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

 

 

 

5. listview_list_item.xml

 

아이템의 뷰 레이아웃 리소스 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="100"
    android:padding="5dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        android:layout_gravity="center">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:orientation="horizontal"
            android:weightSum="100" >
            <TextView
                android:id="@+id/tv_num"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="100"
                android:text="번호"
                android:background="#B2EBF4"
                android:gravity="center"/>
        </LinearLayout>

        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="30"
            android:background="#FFD9FA" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="60"
            android:orientation="horizontal"
            android:weightSum="100" >
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="100"
                android:text="이름"
                android:background="#B7F0B1"
                android:gravity="center"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

 

 

 

 

안드로이드 결과화면

 

짜잔~ 케어베어 리스트뷰입니당 ^-^

각 리스트를 선택할 때 마다 Toast 를 표시해 줍니다!

 

 

 

 

끄읏-🐶