[AOS] SnackBar vs Toast

토스트나 스낵바는 가벼운 메세지를 유저에게 전달할때 주로 사용하는데 장단점이 명확해 상황에 맞게 사용하면 좋을것 같습니다.

로그인 화면에서 아이디를 입력하지 않고 로그인 버튼을 눌렀을때 '아이디를 입력해주세요' 와 같은 메세지를 전달할때 

 

간략히 차이점 먼저 공유드리면 아래와 같습니다. 보다 세세한 내용은 밑에 서술된 내용을 참고해주세요

	스낵바	토스트
화면 크기 변동시 위치 변화	유동적	고정적
클릭 이벤트 작동 여부	작동	비작동
노출 영역	현재 엑티비티	디바이스 화면

 

기본 사용 

아래는 기본적으로 제공하는걸 사용했을때 사진입니다.

 

레이아웃이 다르지만 둘다 커스텀을 할 수 있어서 크게 신경쓰지 않아도 되지만, 노출되어 있는 상태에서 키보드가 호출됐을때 처리는 다릅니다.

스낵바는 화면의 크기가 변함에 따라 위치가 변동되지만 토스트는 최초 생성된 자리에 그대로 있습니다.

하지만 토스트도 키보드가 올라온 상태에서 호출하면 스낵바와 동일하게 위치가 변하긴 하지만, 노출된 상태에서 키보드가 내려가는 경우 같은 자리에 머물러 있습니다.

 

기본사용 코드 

스낵바

    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()
    }

 

클릭 이벤트

버튼 위에 스낵바가 노출되면 노출되어 있는 동안 버튼을 클릭할 수 없습니다.

하지만 토스트는 클릭이 가능합니다. 

 

노출 영역

스낵바는 호출된 엑티비티에 속해 다음 엑티비티가 현재 엑티비티를 덮으면 보이지 않습니다. 그에 반해 토스트는 앱을 꺼도 보이는 특성이 있습니다.

 

커스텀 코드

두개 다 커스텀 레이아웃을 사용할 수 있습니다. 

토스트

       val binding = ViewSnackbarErrorBinding.inflate(LayoutInflater.from(this), null, false)
        binding.tvContent.text = message

        Toast(this).apply {
            setGravity(Gravity.BOTTOM or Gravity.CENTER or Gravity.FILL_HORIZONTAL, 0, 50)
            duration = Toast.LENGTH_SHORT
            view = binding.root
        }.show()

스낵바

class SuccessSnackBar(view: View, private val message: String, private val bottomMargin: Int = 0) {

    companion object{
        fun make(view: View, message: String, bottomMargin: Int = 0) = SuccessSnackBar(view, message, bottomMargin)
    }

    private val context = view.context
    private val snackbar = Snackbar.make(view, "", Snackbar.LENGTH_LONG)
    private val snackbarLayout = snackbar.view as Snackbar.SnackbarLayout

    private val inflater = LayoutInflater.from(context)
    private val binding: ViewSuccessBinding = DataBindingUtil.inflate(inflater, R.layout.view_success, null, false)

    init {
        initView()
        initData()
    }

    private fun initView() {

        with(snackbarLayout) {
            removeAllViews()

            setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent))
			// 하단에 마진을 줘서 특정 버튼보다 위에서 노출되도록 
            translationY = -bottomMargin.toFloat()

            addView(binding.root, 0)

        }
    }

    private fun initData() {
        binding.tvContent.text = message
    }

    fun show() {

        snackbar.show()
    }
}

위 스낵바는 아래처럼 사용합니다.

  ScanSuccessSnackBar.make(
                binding.root,
                getString(R.string.qr_scan_success_message),
                50
            ).show()

 

 

그밖에도 스낵바는 액션버튼을 제공해 커스텀 레이아웃을 사용하지 않고도 편리하게 버튼을 붙일 수 있는데 자세한 내용은 공식 문서를 참고해주세요!