예제 앱 만들기(4) - 게시글 리스트뷰에 표시

myRef는 데이터베이스가 저장될 위치를 지정해준것이다 

board라는 myRef에서 데이터를 가져온다 

 

 

BoardListActivity에 아래와같이 코드를 짜준다. 로그값을 찍어서 값이 잘 나왔는지 확인해본다

package com.example.mysampleapp

import android.content.ContentValues.TAG
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class BoardListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_board_list)

        // writeBtn누르면 BoardWriteActivity이동
        val writeBtn = findViewById<Button>(R.id.writeBtn)
        writeBtn.setOnClickListener {

            val intent = Intent(this, BoardWriteActivity::class.java)
            startActivity(intent)
        }

        getData()
    }

    fun getData(){

        val database = Firebase.database
        val myRef = database.getReference("board")


        val postListener = object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {


                //dataSnapshot에 있는 애들을 하나씩 가져와서 데이터모델에 집어넣는다
                for (dataModel in dataSnapshot.children){
                    Log.d("BoardListActivity", dataSnapshot.toString())
                }
            }

            override fun onCancelled(databaseError: DatabaseError) {
                // Getting Post failed, log a message
                Log.w("BoardListActivity", "loadPost:onCancelled", databaseError.toException())
            }
        }
        myRef.addValueEventListener(postListener)
    }
}

BoardListActivity.kt

 

 

이렇게 써주고 Logcat을 확인해보면 아래 사진과같이 로그가 하나씩 잘 찍히는것을 볼수있다

 

 

이제 key값이 아니라 value데이터를 받아오도록 작성해볼것이다

package com.example.mysampleapp

import android.content.ContentValues.TAG
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class BoardListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_board_list)

        // writeBtn누르면 BoardWriteActivity이동
        val writeBtn = findViewById<Button>(R.id.writeBtn)
        writeBtn.setOnClickListener {

            val intent = Intent(this, BoardWriteActivity::class.java)
            startActivity(intent)
        }

        getData()
    }

    fun getData(){

        val database = Firebase.database
        val myRef = database.getReference("board")


        val postListener = object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {


                //dataSnapshot에 있는 애들을 하나씩 가져와서 데이터모델에 집어넣는다
                for (dataModel in dataSnapshot.children){

                    // Model의 형태로 데이터를 받아옴
                    val item = dataModel.getValue(Model::class.java)
                    Log.d("BoardListActivity", item.toString())

                }
            }

            override fun onCancelled(databaseError: DatabaseError) {
                // Getting Post failed, log a message
                Log.w("BoardListActivity", "loadPost:onCancelled", databaseError.toException())
            }
        }
        myRef.addValueEventListener(postListener)
    }
}

BoardListActivity.kt

 

 

로그값을 찍어서 값을 확인해봤더니 아래와같이 잘 찍힌것을 확인할수있다

 

 

이제 이렇게 나온 데이터를 리스트뷰에 넣어줄것이다

리스트뷰를 만들기위해서 activity_board_list.xml로 가서 ListView를 추가해준다

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".BoardListActivity">
    
    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/writeBtn"
        android:text="글쓰기"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_board_list.xml

 

 

activity_board_list.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">

    <TextView
        android:id="@+id/itemTextId"
        android:text="리스트"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

listview_item.xml

 

 

연결시켜줄 Adapter를 만들어준다

일단 먼저 어뎁터의 기본틀을 만들어준뒤 코드를 추가해준다

package com.example.mysampleapp

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter


class ListViewAdapter(val List : MutableList<Model>) : BaseAdapter() {  //리스트뷰를 받는데 Model형태로 받는다
    override fun getCount(): Int {
        return List.count()
    }

    override fun getItem(position: Int): Any {
        return List[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        var view = convertView

        if(view == null ){
            view = LayoutInflater.from(parent?.context).inflate(R.layout.listview_item, parent, false)
        }

        return view!!
    }
}

ListViewAdapter.kt (기본틀)

 

 

 

BoardListActivity로 가서 먼저 어뎁터를 선언해준뒤, 어뎁터와 리스트를 연결해준다

class BoardListActivity : AppCompatActivity() {

    // 어뎁터 선언
    lateinit var LVAdapter : ListViewAdapter

	...

        // Model데이터를 가져온다음 데이터를 추가
        val list = mutableListOf<Model>()
        list.add(Model("a"))
        list.add(Model("b"))
        list.add(Model("c"))

        getData()

        // 어뎁터와 리스트연결
        LVAdapter = ListViewAdapter(list)

        val lv = findViewById<ListView>(R.id.lv)
        lv.adapter = LVAdapter

    }
	...

}

BoardListActivity.kt

 

여기까지만하면 리스트뷰에 값들이 표시되지 않기때문에 

다시 ListViewAdapter로 돌아가서 a,b,c라고 넣은값들을 어뎁터에 연결을 해줘야지 a,b,c,에 해당하는 값들이 나타나게 된다

        override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        ...

        // 리스트값에 넣은값들을 연결
        val title = view?.findViewById<TextView>(R.id.itemTextId)
        title!!.text = List[position].title

        return view!!
    }
}

ListViewAdapter.kt

 

이렇게까지해주면 넣어줬던 a,b,c,의 값들이 리스트뷰들에 잘 들어가있는것을 확인할수있다

이제는 파이어베이스를 통해서 내가 작성한 값들로 바꾸고싶다

따라서 BoardListActivity에서 a,b,c값을 추가해줬던 것을 삭제해주고 Model데이터를 추가해준 코드를 위쪽으로 옮겨준다

그리고 파이어베이스에서 받아온 값들을 넘겨준다

그런데 여기까지하고 앱을 실행시켜보면 리스트뷰에 값이 아무것도 안나오는 것을 확인할수있을것이다

 파이어베이스에서는 비동기형태로 진행이되서, getData에 있는 함수를 다 받아오고 나서 코드들이 실행되는것이 아니라 데이터 받아오는동안 기다리지 않고 그냥 쭉 실행이 되버리기 때문이다.

따라서 notifyDataSetChanged()를 추가해서 데이터를 다 받아온다음에  리스트뷰를 동기화 시켜주도록 해야한다

 

package com.example.mysampleapp

class BoardListActivity : AppCompatActivity() {

    // 어뎁터 선언
    lateinit var LVAdapter : ListViewAdapter
    // Model데이터를 가져온다음 데이터를 추가
    val list = mutableListOf<Model>()


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

        // writeBtn누르면 BoardWriteActivity이동
        val writeBtn = findViewById<Button>(R.id.writeBtn)
        writeBtn.setOnClickListener {

            val intent = Intent(this, BoardWriteActivity::class.java)
            startActivity(intent)
        }

        getData()

        // 어뎁터와 리스트연결
        LVAdapter = ListViewAdapter(list)

        val lv = findViewById<ListView>(R.id.lv)
        lv.adapter = LVAdapter

    }

    fun getData(){

        val database = Firebase.database
        val myRef = database.getReference("board")


        val postListener = object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {


                //dataSnapshot에 있는 애들을 하나씩 가져와서 데이터모델에 집어넣는다
                for (dataModel in dataSnapshot.children){

                    // Model의 형태로 데이터를 받아옴
                    val item = dataModel.getValue(Model::class.java)
                    Log.d("BoardListActivity", item.toString())
                    // 파이어베이스에서 받아온 값들을 넣어줌
                    list.add(item!!)

                }
                LVAdapter.notifyDataSetChanged()
            }

            override fun onCancelled(databaseError: DatabaseError) {
                // Getting Post failed, log a message
                Log.w("BoardListActivity", "loadPost:onCancelled", databaseError.toException())
            }
        }
        myRef.addValueEventListener(postListener)
    }
}

BoardListActivity.kt

 

 

따라서 여기까지 해주면 내가 쓴 글이 리스트뷰에 나오는것을 확인할수있다

 

 

전체 앱 작동화면이다

 

 

 

 

여기까지 회원가입,로그인,로그아웃,글 작성,작성한 글 리스트뷰에 표시하는 간단한 예제를 만들어보았다!