[내일배움캠프] 캠프 18주차 - 3/15(금) #SnackBar #Toast

📝TIL

SnackBar vs Toast

• 프로젝트 진행 중 사용자에게 짧은 메세지를 전달해야하는 시나리오가 있었다.
  이때, SnackBar와 Toast 중 어느 것을 사용할지 정하기 위해 SnackBar와 Toast를 비교해보았다.

📌참고자료

• Snackbars & toasts | Material Design
• Toast and snackbars | Orange Design System
• [AOS] SnackBar vs Toast | 개발자 키우기

• 사용 용도
  • Toast: 간단한 메세지 노출
  • SnackBar: 간단한 메세지 노출 + 하나의 Action 포함 가능
    (사용자에게 2개 이상의 Action을 입력받고 싶은 경우, Dialog 사용)
• 노출 영역
  • Toast: 디바이스 화면 위에 노출, 앱을 꺼도 노출됨
  • SnackBar: 호출된 Activity/Fragment에 속함, Activity/Fragment 이동 시 보이지 X
• 화면 크기 변동 시 위치 변화 (ex. 키보드가 노출되어 화면 크기가 작아졌을 때)
  • Toast: 변화 X
  • SnackBar: 키보드 위로 위치 이동
• 노출 종료
  • Toast: 사용자가 화면의 다른 부분을 터치했을 때, 일정 시간이 지난 뒤
  • SnackBar: 〃 , 스와이프로 닫기 가능

private fun makeSnackBar(view: View){
    var snack = Snackbar.make(view,"스낵바 입니다.",Snackbar.LENGTH_LONG)

    var layoutParam = snack.view.layoutParams as FrameLayout.LayoutParams
    snack.view.layoutParams = layoutParam
    snack.show()
}
    
private fun showToast(){
    Toast.makeText(this, "토스트 입니다.",Toast.LENGTH_SHORT).show()
}

SnackBar 위치 조절하기

• RecyclerView 무한 스크롤 기능 구현 중, API 호출 시 네트워크/서버 문제로 다음 페이지 응답을 가져오지 못 한 경우 SnackBar를 띄워야 했다.
• 이 때, SnackBar가 화면 하단의 Floationg Button과 겹쳐져 보이지 않는 문제가 생겨, 이를 해결하기 위해 SnackBar 위치 조절에 대해 알아보았다.

📌참고자료

• [Android] SnackBar 위치 조절
• SnackBar | Android Developers
• BaseTransientBottomBar | Android Developers

• SnackBar은 BaseTransientBottomBar 추상 클래스를 상속한다

  • BaseTransientBottomBar는 Default로 화면의 bottom edge에 표시됨
  • setAnchorView(int anchorViewId) 또는 setAnchorView(View anchorView) 함수를 통해 Anchor View를 지정해주면, 이 Anchor View 위에 표시됨

• (1) SnackBar 표시 함수 Fragment 확장 함수로 정의

fun Fragment.showSnackBar(message: Int, length: Int = Snackbar.LENGTH_SHORT, anchorView: View) {
    Snackbar
        .make(requireView(), message, length)
        .apply{ this.anchorView = anchorView }
        .show()
}

• (2) Fragment 내 SnackBar 표시 함수 호출

showSnackBar(
    message = R.string.place_list_more_tourist_attraction_no_result,
    anchorView = requireActivity().findViewById(R.id.fab_bottom_random)
)