문제 정의

Home 화면에서 데이터를 서버에서 가져올 때 빈화면에서 갑자기 데이터가 보여지는 것이 어색할 수 있습니다. 또한 현재 데이터를 받아오는 건지 아님 앱이 멈춘건지 앱을 사용하는 유저들은 내부를 살펴볼 수 없으니 데이터를 가져오는 중인 것을 사용자에게 알려주기 위해서 로딩뷰를 구현하는데요

홈 화면에서 데이터를 가져올 때 로딩뷰를 활용해서 데이터 응답 전에 보여주도록 구현을 해보시면 좋을 것 같습니다.

문제 정의

• 홈 화면에서 서버통신 요청을 하고 응답을 받기 직전까지 로딩 뷰를 계속 보여주면 됩니다
  • 응답 요청 성공 시 리스트를 보여주면 되고 실패 시 빈화면 혹은 실패 화면을 보여주세요!
• 로딩 뷰는 다이얼로그/리스트 내의 로딩 인디케이터 뷰 등 다양한 형태를 활용해서 구현을 해도 좋습니다

device-2023-05-22-161047.mp4

1. Progress Bar를 레이아웃에 큰 화면으로 배치하기

   (화면 꽉채운, 흰색 배경으로 설정해 뒤에 리스트 생성 과정 안보이도록)

   <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/progress_bar_follower"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:background="@color/white"
           android:elevation="1dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent">
   
           <ProgressBar
               android:layout_width="0dp"
               android:layout_height="80dp"
               android:background="@color/white"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   

2. observer에서 서버에서 필요한 모든 데이터를 받아올 때까지만 visible하도록 설정

   // 뷰모델 observer 설정
   viewModel.followerResult.observe(viewLifecycleOwner) {followerResult ->
       val responseList = followerResult.data.toMutableList()
       responseList.let {
           followerList.addAll(responseList)
       }
       followerAdapter.submitList(followerList.toList())
   
   		// 두 페이지의 12명이 모두 들어올 때까지 보이도록 설정
       if (followerList.size == 12) {
           binding.progressBarFollower.visibility = View.GONE
       }
   
   }
   viewModel.errorResult.observe(viewLifecycleOwner) { errorResult ->
       Timber.d("서버 통신 실패 : $errorResult")
       binding.root.makeSnackBar(getString(R.string.snackbar_server_failure))
   }
   
   // 서버 통신으로 User 리스트 받아오기
   viewModel.addListFromServer(1)
   viewModel.addListFromServer(2)
   

→ 이 방식보다 더 좋은 적용 방식이 있을 것으로 생각됨