안드로이드 리스트에 View붙이기 (Header, Footer)

이번 글에선 ListView의 상단 또는 하단에 다른 View를 부착하는 법에 대해서 알아보도록 하자.

 

ListView는 목록을 보여주기 위해서 사용되는 View이며

이 리스트에 대한 특징, 제목 등을 표현하기 위해 상단에 붙이는 것을 Header,

리스트를 다루기 위해 버튼 등을 하단에 붙이는 것을 Footer라고 한다.

 

Xml파일 작성

---

먼저, Header와 Footer에 사용할 View의 리소스 파일을 작성한다.

화면 구성은 아래와 같이 해보도록 하자.

Header를 위한 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="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/cntText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="20sp"
        android:text="갯수" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:gravity="center"
        android:textSize="20sp"
        android:text="좋아하는 동물" />
</LinearLayout>

다음으로 Footer를 위한 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="match_parent"
    android:orientation="horizontal">

    <Button
        android:id="@+id/addBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="추가" />
</LinearLayout>

다음으로 MainActiviy Layout에 ListVIew를 하나 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/myList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

LIstView에 Header, Footer추가

---

이제 MainActiviy에서 List에 Adapter를 연결하고, Header와 Footer를 붙여보도록 하자.

.
.
생략
.
.
val header = layoutInflater.inflate(R.layout.list_header, null, false)
val footer = layoutInflater.inflate(R.layout.list_footer, null, false)
binding.myList.addHeaderView(header)
binding.myList.addFooterView(footer)

val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1)
binding.myList.adapter = adapter
.
.
생략
.
.

ListView에 Header와 Footer를 추가시켜주기 위해선

각각 addHeaderview, addFooterview함수를 실행시켜 주면 되고, 인자로는 View가 들어간다.

이렇게 Header와 Footer를 추가한 ListView에 adapter를 연결시켜주도록 한다.

 

Button이벤트 처리

---

이제 Footer에 있는 Button을 터치하면 아이템을 하나 추가하는 이벤트를 작성해보도록 하자.

val addBtn = footer.findViewById<Button>(R.id.addBtn)
addBtn.setOnClickListener {
    val editText = EditText(this)
    val dialog = AlertDialog.Builder(this)
        .setTitle("아이템 추가")
        .setView(editText)
        .setPositiveButton("확인",
            DialogInterface.OnClickListener { dialogInterface, i ->
                if(editText.text.toString() != ""){
                    adapter.add(editText.text.toString())
                    val cnt = adapter.count

                    val cntText = header.findViewById<TextView>(R.id.cntText)
                    cntText.text = "${cnt}개"
                }
            })
        .setNegativeButton("취소",
        DialogInterface.OnClickListener { dialogInterface, i ->  })
        .show()
}

먼저 footer에 있는 Button을 addBtn변수에 저장하고,

버튼을 클릭하면 Dialog를 호출하여 EditText에 있는 값을 리스트에 추가한다.

결과물

---

일단 전체 코드는 아래와 같다.

package com.example.example

import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AlertDialog
import com.example.example.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        val header = layoutInflater.inflate(R.layout.list_header, null, false)
        val footer = layoutInflater.inflate(R.layout.list_footer, null, false)
        binding.myList.addHeaderView(header)
        binding.myList.addFooterView(footer)

        val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1)
        binding.myList.adapter = adapter

        val addBtn = footer.findViewById<Button>(R.id.addBtn)
        addBtn.setOnClickListener {
            val editText = EditText(this)
            val dialog = AlertDialog.Builder(this)
                .setTitle("아이템 추가")
                .setView(editText)
                .setPositiveButton("확인",
                    DialogInterface.OnClickListener { dialogInterface, i ->
                        if(editText.text.toString() != ""){
                            adapter.add(editText.text.toString())
                            val cnt = adapter.count

                            val cntText = header.findViewById<TextView>(R.id.cntText)
                            cntText.text = "${cnt}개"
                        }
                    })
                .setNegativeButton("취소",
                DialogInterface.OnClickListener { dialogInterface, i ->  })
                .show()
        }
    }
}

그리고, 이렇게 만들어진 ListView가 동작하는 것을 확인해보도록 하자.

이상으로 ListView에 Header와 Footer를 추가하는 법에 대해서 알아보았다.