[JETPACK개론] Retrofit 예제 + RecyclerView

먼저 기존의 포스팅 했던 게시물에 이어서 Retrofit + ViewModel + ViewModelScope + RecyclerView 를 이용하여

여태까지 공부했던 내용을 합쳐 예제를 통해 연습해보자!

Retrofit 게시물 ->

[JETPACK개론] Retrofit

@GET("posts/1")
suspend fun getPost1() : Post

@GET("posts/{number}")
suspend fun getPostNumber(
    @Path("number") number : Int
) : Post

@GET("posts")
suspend fun getPostALl() : List<Post>

data class Post (
    val userId : Int,
    val id : Int,
    val title : String,
    val body : String
)

위와 같이 셋팅이 되어있고 다음과 같이 ViewModel을 구현해주었다.

먼저 리사이클러뷰를 적용하기 전에 단순히 ViewModel에서 서버와 통신하여 받아온 데이터를 통해 뷰에 접근해보자.

class MainViewModel : ViewModel() {

    private val retrofitInstance = RetrofitInstance.getInstance().create(MyApi::class.java)

    private var _mutableWord1 = MutableLiveData<String>()
    val liveWord1 : LiveData<String>
        get() = _mutableWord1

    private var _mutableWord2 = MutableLiveData<String>()
    val liveWord2 : LiveData<String>
        get() = _mutableWord2

fun getPost1() = viewModelScope.launch {

    val post = retrofitInstance.getPost1()
    Log.d("MainViewModel", post.toString())
    _mutableWord1.value = post.title

}

fun getPostNumber(number : Int) = viewModelScope.launch {

    val post = retrofitInstance.getPostNumber(number)
    Log.d("MainViewMoel", post.toString())
    _mutableWord2.value = post.title
}

retrofitInstance를 통해 api를 불러온 값을 post에 저장한 뒤, post에 있는 title의 값을 mutable값에 넣어

liveword의 값에 변화를 주었다. 

viewModel = ViewModelProvider(this).get(MainViewModel::class.java)
viewModel.getPost1()
viewModel.getPostNumber(3)
viewModel.getPostAll()

val area1 = findViewById<TextView>(R.id.area1)
val area2 = findViewById<TextView>(R.id.area2)

viewModel.liveWord1.observe(this, Observer {
    area1.text = it.toString()
})

viewModel.liveWord2.observe(this, Observer {
    area2.text = it.toString()
})

액티비티의 코드는 위와 같이 구현할 수 있었다.

getPost와 postNumber를 불러 liveWord의 값에 변화를 준다음, observe를 통해 뷰에 있는 text의 값을 서버에서 불러온 title데이터의 값으로 변경시켰다!!

결과화면

그 다음 리사이클러뷰 추가해서 구현해보자!!

class CustomAdapter(private val dataSet : ArrayList<Post>) : RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    class ViewHolder(view : View) : RecyclerView.ViewHolder(view) {

        val textView : TextView

        init {
            textView = view.findViewById(R.id.textView)
        }

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomAdapter.ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.text_row_item, parent, false)

        return ViewHolder(view)

    }

    override fun onBindViewHolder(holder: CustomAdapter.ViewHolder, position: Int) {

        holder.textView.text = dataSet[position].title

    }

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

위와 같이 어댑터를 통해 서버에서 받은 리스트들의 title의 값을 텍스트로 변경한다!

private var _mutableWordList = MutableLiveData<List<Post>>()
val liveWordList : LiveData<List<Post>>
    get() = _mutableWordList

fun getPostAll() = viewModelScope.launch {
    val postAll = retrofitInstance.getPostALl()
    Log.d("MainViewModel", postAll.toString())
    _mutableWordList.value = postAll
}

리사이클러뷰에 적용하기 위해 데이터의 값을 List<Post> 형태로  받았고, 이를 역시 mutable에 넣어

liveWordList의 값을 변화시켰다.

val rv = findViewById<RecyclerView>(R.id.rv)

viewModel.liveWordList.observe(this, Observer {
    val customAdapter = CustomAdapter(it as ArrayList<Post>)
    rv.adapter = customAdapter
    rv.layoutManager = LinearLayoutManager(this)
})

이제 액티비티에서 위와 같이 liveWordList의 변화에 따라 어댑터에 넣어주어 리사이클러뷰와 연결시켜주면 끝!!!

결과화면

 

GitHub - SsongSik/JetPack_Android_Practice: Android practice using the Jetpack library