안드로이드 - 4. 커스텀 리스트뷰(custom listview) 만들기

소스출처 : https://www.inflearn.com/course/

예제 소스

https://github.com/GaKaRi/gakari_android/tree/master/Tutorial5_list

이번에는 다음과 같이 이미지와 텍스트를 동시에 뿌려주는 커스텀 리스트뷰를 만들어봅시다.

실행화면

각 리스트 터치시 값들이 토스트 메시지로 출력됩니다.

(토스트 메시지가 너무 빨리 지나가서 캡쳐를 못하겠네요.)

image_layout.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"

android:orientation="horizontal" android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

    android:id="@+id/imageView"

    android:layout_width="100dp"

    android:layout_height="100dp"

    android:layout_margin="10dp"

    android:layout_weight="1"

    app:srcCompat="@mipmap/heart" />

<TextView

    android:id="@+id/textView"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="TextView"

    android:textAppearance="@style/TextAppearance.AppCompat.Display2" />

</LinearLayout>

ImageAdapter.java

리스트뷰의 어댑터를 만드는 클래스입니다.

package com.example.kch.tutorial5_list;

import android.content.Context;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

/**

* Created by kch on 2017. 9. 23..

*/

public class ImageAdapter extends ArrayAdapter<String>{

    ImageAdapter(Context context, String [] items){

        super(context, R.layout.image_layout, items);

    }

    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        LayoutInflater imageInflater = LayoutInflater.from(getContext());

        //image_layout.xml을 View객체에 저장함

        View view = imageInflater.inflate(R.layout.image_layout, parent, false);

        //리스트뷰의 갯수대로 실행하게 되는데 생성자를 이용해서 만들었으므로 각각 position에 맞는 데이터를 일단 item에 저장함

        String item = getItem(position);

        TextView textView = (TextView)view.findViewById(R.id.textView);

        ImageView imageView = (ImageView)view.findViewById(R.id.imageView);

        //TextView에 설정 해주는 부분

        textView.setText(item);//가져온 item을 텍스트뷰에 뿌려줌

        imageView.setImageResource(R.mipmap.heart);//리소스에 저장해둔 이미지도 뿌려줌

        return view;//뷰를 반환함

    }

}

activity_main.xml

리스트뷰를 선언해주고 각종 속성들을 설정해줍니다.

<?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="com.example.kch.tutorial5_list.MainActivity">

    <ListView

        android:id="@+id/listview"

        android:layout_width="368dp"

        android:layout_height="495dp"

        android:layout_marginBottom="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

MainActivity.java

실제 리스트뷰의 내용을 클릭했을때와 리스트뷰 내용들을 정의하고 보여줍니다.

package com.example.kch.tutorial5_list;

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.ListAdapter;

import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        String [] items = {"망고쥬스", "토마토쥬스", "포도쥬스"};

        //리스트뷰의 내용을 만들기 위한 adapter를 만듬(Adapter패턴 사용)

        ListAdapter adapter = new ImageAdapter(this, items);

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

        listView.setAdapter(adapter);//만든 adapter를 리스트뷰에 설정해줌

        //리스트뷰 리스너 설정

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> parent, View view, int i, long id) {

                // ItemClick/ItemSelect Code

                String item = String.valueOf(parent.getItemAtPosition(i));//사용자가 터치한 아이템을 문자로 받아서 item객체에 저장함

                Toast.makeText(MainActivity.this, item, Toast.LENGTH_SHORT).show();//터치한 아이템을 토스트메시지로 보여줌

            }

        });

    }

}