Mobile/Android

BaseAdapter 를 사용하여 ListView만들기 (위시리스트 or 투두리스트)

 

https://developer.android.com/reference/android/widget/BaseAdapter

 

BaseAdapter  |  Android 개발자  |  Android Developers

 

developer.android.com

 

ListView 를 사용할 때 수많은 데이터들이 어떻게 배치되고, 어떤 데이터가 들어갈것인지 관리해주는 역할을 한다.

실습하면서 설명하겠습니다. 우선 필요한 클래스는 

화면뷰 / 리스트뷰 / 화면뷰.java / dto.java / apdapter.java 입니다.

 

화면뷰는 아래와 같습니다.

 

wish_view.xml

<?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="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="위시리스트"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        android:textStyle="bold" />
    <ListView
        android:id="@+id/wishView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/wish_list"
        />
</LinearLayout>

 

ListView 아래에 선언되어있는 listitem이 리스트뷰입니다. 새로 만들어줍니다.

 

wish_list.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="8dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <androidx.cardview.widget.CardView
        android:layout_width="380dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:background="@color/white"
        app:cardCornerRadius="5dp">
        <CheckBox
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="10dp"
            android:layout_marginTop="26dp"
            android:layout_marginLeft="26dp"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:textSize="30dp"
            android:text="한강에서 치킨 시켜먹기"/>

    </androidx.cardview.widget.CardView>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

이 view는 리스트 한칸한칸에 대한 디자인을 담당합니다. 카드 뷰에 체크박스와 텍스트뷰를 넣어줬습니다.

 

 

이런식으로 나오면 성공적입니다. 이제 adapter를 이용해서 내가 원하는 정보의 리스트를 조회할 수 있도록 해볼까요 !

 

wish.java

package com.example.alroha;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import java.util.ArrayList;

public class Fragment2  extends Fragment {

    ViewGroup viewGroup;

    ArrayList<Wish> wishArrayList;
    WishList wishAdapter;
    ListView listView;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable  ViewGroup container, @Nullable  Bundle savedInstanceState) {
        viewGroup = (ViewGroup) inflater.inflate(R.layout.fragment2,container,false);

        wishArrayList = new ArrayList<>();
        wishArrayList.add(new Wish("한강에서 맥주마시기",false));
        wishArrayList.add(new Wish("도깨비 드라마 정주행하기",false));
        wishArrayList.add(new Wish("커플 운동화 사기",false));

        wishAdapter = new WishList(wishArrayList);
        listView = (ListView) viewGroup.findViewById(R.id.wishView);
        listView.setAdapter(wishAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(getContext(),i+"번째 소원입니다.",Toast.LENGTH_SHORT).show();
            }
        });



        return viewGroup;
    }
}

우선 ListView가 있는화면의 java에서 정보를 3개 정도 추가하고 Adapter 연결을 해줍니다. 각 아이템이 선택이 되는지 확인하기 위해

setOnItemClickListener도 사용해 주었습니다!

 

package com.example.alroha;

public class Wish {
    String contents;
    boolean checked;

    public Wish(String contents, boolean checked) {
        this.contents = contents;
        this.checked = checked;
    }

    public String getContents() {
        return contents;
    }

    public void setContents(String contents) {
        this.contents = contents;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }
}

필요한 정보의 dto도 만들어줄게요! 

 

Adater.java

package com.example.alroha;

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

import java.util.ArrayList;
import java.util.List;

public class WishList extends BaseAdapter {

    private final List<Wish> wishList;

    public WishList(ArrayList<Wish> wishArrayList) {
        wishList = wishArrayList;
    }

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

    @Override
    public Object getItem(int i) {
        return wishList.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder = new ViewHolder();

        if(view == null) {
            view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.wish_list, viewGroup, false);
            TextView content = (TextView) view.findViewById(R.id.wishText);
            CheckBox checked = (CheckBox) view.findViewById(R.id.checked);

            holder.content =content;
            holder.checked =checked;
        }else{
            holder = (ViewHolder) view.getTag();
        }
        Wish wish = wishList.get(i);
        holder.content.setText(wish.getContents());
        holder.checked.setChecked(wish.isChecked());
        return view;
    }

    static class ViewHolder{
        TextView content;
        CheckBox checked;
    }
}

ViewHolder로 뷰가 없을 때 inflate를 해주고 있을 때는 바로 가져다 쓸 수 있도록 해줍니다.

여기까지 잘 따라 오셨으면 아래와 같이 리스트를 조회하는 화면이 나타납니다!