안드로이드 코틀린으로 만든 리사이클러뷰(RecyclerView)에 클릭으로 데이터 추가하고 삭제하기

안녕하세요!

이번에는 안드로이드 코틀린으로 만든 리사이클러 뷰에 

버튼을 클릭해서 데이터를 추가하고 삭제해 보겠습니다

 

지난 글에 이어서 진행됩니다.

https://dalgonakit.tistory.com/139

안드로이드 코틀린으로 만든 리사이클러뷰(RecyclerView)에 클릭 기능 추가하기 (Add ClickListener)

이어서 진행되지만 이전 글을 안보셔도 무방합니다

왜냐하면 밑에 적어두었거든요!

 

---

이전 코드 

아래를 눌러 펼쳐보세요

이전 코드 <AndroidManifest.xml>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mylistapplication">

    <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=".ListActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

 

이전 코드 <activity_list.xml>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mRecyclerView"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</RelativeLayout>

 

이전 코드 <item_contacts.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/mRootView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="50dp">

    <TextView
        android:id="@+id/mName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/mTel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

 

이전 코드 <ListActivity.kt>

package com.example.mylistapplication

import android.app.Activity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_layout.*

class ListActivity : Activity() {

    var contactsList : List<Contacts> = listOf(

    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_layout)

        val adapter = ContactsListAdapter(contactsList)
        adapter.setItemClickListener(object : ContactsListAdapter.OnItemClickListener{
            override fun onClick(v: View, position: Int) {
                val item = contactsList[position]

                Toast.makeText(v.context, "Activity\n${item.name}\n${item.tel}", Toast.LENGTH_SHORT).show()
                item.name = item.name + "1"
                adapter.notifyDataSetChanged()
            }
        })
        mRecyclerView.adapter = adapter

    }
}

 

이전 코드 <ContactsListAdapter.kt>

package com.example.mylistapplication

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class ContactsListAdapter(private val itemList : List<Contacts>) : RecyclerView.Adapter<ContactsViewHolder>()  {

    override fun getItemCount(): Int {
        return itemList.size
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ContactsViewHolder {
        val inflatedView = LayoutInflater.from(parent.context).inflate(R.layout.item_contacts, parent, false)
        return ContactsViewHolder(inflatedView)
    }

    override fun onBindViewHolder(holder: ContactsViewHolder, position: Int) {
        val item = itemList[position]

        holder.itemView.setOnClickListener {
            itemClickListener.onClick(it, position)
        }
        holder.apply {
            bind(item)
        }
    }

    //ClickListener
    interface OnItemClickListener {
        fun onClick(v: View, position: Int)
    }
    private lateinit var itemClickListener : OnItemClickListener

    fun setItemClickListener(itemClickListener: OnItemClickListener) {
        this.itemClickListener = itemClickListener
    }

}

 

이전 코드 <ContactsViewHolder.kr>

package com.example.mylistapplication

import android.view.View
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.item_contacts.view.*

class ContactsViewHolder(v: View) : RecyclerView.ViewHolder(v){
    var view : View = v

    fun bind(item: Contacts) {
        view.mName.text = item.name
        view.mTel.text = item.tel
    }
}

 

이전 코드 <Contacts.kt>

package com.example.mylistapplication

class Contacts(var name: String, var tel: String) {
}

 

---

 

1. 가변적인 리스트로 바꾸기

기존에 사용하던 리스트는 listOf 함수를 이용해서 생성된 리스트 이기때문에 데이터를 추가하거나 뺄 수 없는 구조로 되어 있었습니다.

그래서 listOf 함수가 아니고 mutable(변하기쉬운)ListOf 함수를 사용하면 됩니다 (mutableListOf)

var contactsList = mutableListOf(
        Contacts("john","010-0000-11111"),
        Contacts("mir","010-1111-2222"),
        Contacts("delp", "010-3333-4444"),
        Contacts("jacob", "010-3333-5555"),
        Contacts("sheu", "010-3333-6666"),
        Contacts("ma", "010-3333-7777"),
        Contacts("ham", "010-3333-8889")
    )

ListActivity.kt

 

2. 제거 기능 추가

리스트뷰를 클릭하면 이름을 바꾸던 기능을 제거 기능으로 바꿔봅니다

리스트에 removeAt함수를 이용하면 원하는 위치의 아이템을 제거할 수 있습니다.

리스트뷰에서 클릭한 곳의 위치는 position으로 받을 수 있습니다

	override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_layout)

        val adapter = ContactsListAdapter(contactsList)
        adapter.setItemClickListener(object : ContactsListAdapter.OnItemClickListener{
            override fun onClick(v: View, position: Int) {
                contactsList.removeAt(position)
                adapter.notifyDataSetChanged()
            }
        })
        mRecyclerView.adapter = adapter

    }

ListActivity.kt

contactsList.removeAt( position ) 함수를 사용하고 

리스트뷰 화면을 갱신해주기 위해 adapter.notifyDataSetChanged() 함수를 호출해 줍니다.

 

 

 

3. 추가하기 버튼 만들기

추가하는 버튼을 화면에 띄우기 위해 ListActivity의 xml을 담당하는 activity_list.xml에 Plus 버튼을 추가해 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mRecyclerView"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Plus"
        android:id="@+id/mPlusButton"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"/>

</RelativeLayout>

activity_list.xml

 

 

4. 버튼에 추가하는 기능 만들기

플러스 버튼(mPlusButton)에 클릭리스너를 만들어줍니다

누를때마다 Contacts 객체를 만들고, contactsList에 추가한다음, 리스트뷰의 어댑터에 초기화를 요청하는 기능을 만듭니다

var count = 0
//...

mPlusButton.setOnClickListener {
  var contact = Contacts("Add ${count++}","000-0000-00000")
  contactsList.add(contact)

  adapter.notifyDataSetChanged()
}

ListActivity.kt

 

 

---

완성된 모습

 

 

MyListApplication 2.zip

0.47MB

 

 

 

 

 

삭제하기와 추가하기는 어려울줄 알았는데 

정말 쉬운 작업이였습니다 :-)

 

다음엔 데이터베이스 설명과 함께 찾아뵙겠습니다~