프로그래밍/안드로이드

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

가카리 2017. 9. 23. 16:36
반응형

예제 소스

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

실행화면

각 리스트 터치시 값들이 토스트 메시지로 출력됩니다.
(토스트 메시지가 너무 빨리 지나가서 캡쳐를 못하겠네요.)



image_layout.xml

이미지뷰 한개와 텍스트뷰 한개를 배치합니다.

이 레이아웃이 리스트뷰의 내용이 될 것입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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: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();//터치한 아이템을 토스트메시지로 보여줌

            }
        });

    }
}







반응형