[Android / Java] ViewHolder를 이용한 Custom Adapter 만들기

[Android / Java]

ViewHolder를 이용한 Custom Adapter 만들기

 

* 목표 : Custom Item Class를 만들어 ViewHolder를 이용한 Custom Adapter를 구현해 매핑해보자.

 

Adapter는 보통 스크롤로 표현되는 ListView 에 많이 사용된다. 

내가 원하는 아이템의 POJO 클래스를 만들어 해당 클래스에 아이템을 추가하면 어댑터가 컨버팅을 해 뷰로 보이는 원리다.

일단 가볍게 클래스를 만들어주자.

package com.example.ming_gu;

import android.graphics.Bitmap;

public class CustomCaptureClass  {

    private String title; //이름
    private String realPath; //실제경로
    private String category; //분류
    private Bitmap capture; //이미지파일
    private Boolean status; //상태
    private String serialNo; //Serial


    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getRealPath() {
        return realPath;
    }

    public void setRealPath(String realPath) {
        this.realPath = realPath;
    }

    public Bitmap getCapture() {
        return capture;
    }

    public void setCapture(Bitmap capture) {
        this.capture = capture;
    }

    public Boolean getStatus() {
        return status;
    }

    public void setStatus(Boolean status) {
        this.status = status;
    }

    public String getSerialNo() {
        return serialNo;
    }

    public void setSerialNo(String serialNo) {
        this.serialNo = serialNo;
    }

    
    @Override
    public String toString(){
        return "CustomCaptureClass [ +  title : "+ title
                +  ", category : " + category
                +  ", realPath : " + realPath
                + ", capture : " + capture
                + ", status : " + status
                + ", serialNo : " + serialNo;
    }

}

 

코드가 길어보이지만 자바 짬이 되는 사람은 getter and setter generate에 대해 들어봤을 것이다..

내가 변수만 지정해주면 generate 를 자동으로 해준다. 단축키는 Alt + Insert

 

그리고 @Overide로 toString 을 해주면 Log 찍을 때 클래스만 적으면 해당 아이템 정보가 쫘르륵 나오니 POJO 클래스를 만들 때 사용해주면 좋다. ex) Log.e(TAG, "CaptureItem" + captureItem);

그 뒤 캡쳐아이템을 담을 Layout을 만들어주자.

<?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:descendantFocusability="blocksDescendants"
    android:orientation="horizontal"
    android:paddingTop="15dp"
    android:paddingBottom="15dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:id="@+id/iv_photo_item"/>

        <CheckBox
            android:id="@+id/chkStatus"
            android:layout_marginStart="30dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />

        <TextView
            android:id="@+id/tv_item_title"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="15dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:lineSpacingExtra="7sp"
            android:textColor="#333333"
            android:textSize="20sp"
            android:text="TITLE"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_category"
            android:layout_width="0dp"
            android:layout_height="45dp"

            android:layout_marginTop="15dp"
            android:layout_marginBottom="15dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:lineSpacingExtra="7sp"
            android:textColor="#333333"
            android:textSize="18sp"
            android:text="Category"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

 

클래스에서 정의한 것처럼 ImageView, CheckBox, TextView 등을 만들어줬다. 

안드로이드는 UI/UX 디자인 단이 매우 매우 중요한 개발 플랫폼이다. margin 1px에도 예민한 사람이 되어보자.

이제 본격적인  Custom Adapter 만드는 작업을 시작하겠다.

package com.example.ming_gu;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

class CustomCaptureAdapter extends BaseAdapter {

    private static final String TAG = "CustomCustomCaptureClass";
    
    private ArrayList<CustomCaptureClass> captureItems = new ArrayList<>();
    private ViewHolder mViewHolder;
    private Context mContext;
    
    public CustomCaptureAdapter(Context context) {
        this.mContext = context;
    }

    public class ViewHolder {
        private ImageView ivCapture;
        private CheckBox chkBox;
        private TextView titleTextView;
        private TextView categoryTextView;
    }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        
        if (convertView == null) {

            convertView = LayoutInflater.from(mContext).inflate(R.layout.layout_custom_capture_item, parent, false);

            mViewHolder = new ViewHolder();

            mViewHolder.ivCapture = convertView.findViewById(R.id.iv_photo_item);
            mViewHolder.chkBox = convertView.findViewById(R.id.chkStatus);
            mViewHolder.titleTextView = convertView.findViewById(R.id.tv_item_title);
            mViewHolder.categoryTextView = convertView.findViewById(R.id.tv_item_category);

            convertView.setTag(mViewHolder);

        } else {
            mViewHolder = (ViewHolder) convertView.getTag();
        }

        CustomCaptureClass captureItem = captureItems.get(position);

        // View에 Data 세팅
        mViewHolder.ivCapture.setImageBitmap(captureItem.getCapture());
        mViewHolder.chkBox.setChecked(false);
        mViewHolder.titleTextView.setText(captureItem.getTitle());
        mViewHolder.categoryTextView.setText(captureItem.getCategory());
        
        return convertView;
    }

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

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public Object getItem(int position) {
        return captureItems.get(position);
    }

    public void addItem(String strTitle, String strCategory) {
        CustomCaptureClass item = new CustomCaptureClass();
        
        item.setTitle(strTitle);
        item.setCategory(strCategory);
        item.setStatus(false); 

        captureItems.add(item);
    }
    
}

    

보자마자 바로 현기증이 오지만 실제로 뜯어보면 별 것 아닌 내용이다. 

일단 ViewHolder가 무엇이냐면 'View들을 넣어두는 Holder 객체'를 말한다.

ListView에 들어갈 아이템이 적을 땐 상관 없지만 만약 1,000개, 10,000개가 들어간다면..? 그만큼의 객체를 findViewById() 메서드를 통해 일일이 지정해 줘야 한다. 

그러나 ViewHolder를 이용하면 최초에 화면에 나타나는 갯수만큼의 객체를 지정해주고 스크롤을 내리면 가장 첫 번째 아이템이 마지막 위치로 이동한다. 

아이템 갯수가 무한히 늘어남에도 이미 만들어둔 View를 재활용하기 위한 퍼포먼스 전략이라고 볼 수 있다.

왼쪽은 길이가 긴 ListView를 일일히 객체지정 하는 것, 오른 쪽은 ViewHolder라는 컨베이어를 이용해 재활용 하는 것

따라서 ListView 를 이용한다면 반드시 알아야 하는 항목이다. 

Adapter 안에 ViewHolder Class를 만들고 화면에서 보일 객체를 저장해주기 때문에 사용하지 않는 필드는 정의할 필요 없다. ex) POJO클래스에는 정의했지만 내부적으로 사용할 serialNo 등

아까 만들어 둔 Layout을 inflate하고 최초에 convertView가 없다면 새로 만들고 있다면 원래 것을 사용하도록 만들어준다. 

BaseAdapter를 extend 함에 따라 Overide 된 메서드들이 보이는데 보이는 그대로 사이즈나 position을 통한 객체 확인 용도이다.

여기까지 됐으면 이제 끝난 것이나 다름없다. 

MainActivity에서 ListView을 적용하고 아이템을 추가해보자.

<?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"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listViewCapture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

package com.example.ming_gu;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private ListView listView;

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

        listView = findViewById(R.id.listViewCapture); //listview 선언

        CustomCaptureAdapter customCaptureAdapter = new CustomCaptureAdapter(MainActivity.this); //CustomAdapter
        listView.setAdapter(customCaptureAdapter); //ListView에 Adapter 연결
        
        customCaptureAdapter.addItem("셀카용","001"); //Item 추가
        customCaptureAdapter.addItem("풍경용","002");
        customCaptureAdapter.addItem("음식용","003");
        customCaptureAdapter.addItem("운동용","004");
        customCaptureAdapter.addItem("용용용","005");
        customCaptureAdapter.addItem("짱쎈용","006");
        customCaptureAdapter.addItem("권지용","007");

        customCaptureAdapter.notifyDataSetChanged(); //Adapter 변경시 적용 

    }
}

 

ListView를 선언, Adapter도 선언해주고 setAdapter를 통해 연결 지어준다. 

아이템을 추가한 뒤에는 notifyDataSetChanged()를 호출하면 Adapter의 변경 사항을 바로 적용해 ListView에서 보여준다.