[37일차 Android] SnackBar

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 SnackBar

• Toast와 비슷하며 Activity 위에 표시되며 하단에 나타나는 메시지이다.

주요 메서드

메서드	설명
make	SnackBar를 구성
setTextColor	메시지의 색상 설정
setBackgroundTint	배경 색상 지정
setAnimationMode	나타나고 사라지는 애니메이션 설정
setAction	클릭하면 이벤트를 처리할 수 있는 요소를 설정
show	SnackBar를 표시

 

Callback

• Snackbar가 나타나거나 사라졌을 때 반응한다.
  • onShown()
  • onDismissed()

 

커스터마이징

• Snackbar는 새로운 View를 설정하는 메서드나 프로퍼티가 없다.
• Snackbar를 구성하기 위해 사용되는 Layout을 추출해 View를 추가해서 처리한다.

 

 

 

예제 코드

lateinit var snackBar1 : Snackbar

button3.run {
	setOnClickListener {
		// SnackBar 객체를 생성한다.
		// val snackBar1 = Snackbar.make(it, "기본 스낵바", Snackbar.LENGTH_SHORT)
		// val snackBar1 = Snackbar.make(it, "기본 스낵바", Snackbar.LENGTH_LONG)
		snackBar1 = Snackbar.make(it, "기본 스낵바", Snackbar.LENGTH_INDEFINITE)

		// snackBar의 CallBack
		snackBar1.addCallback(object : BaseTransientBottomBar.BaseCallback<Snackbar>(){

			override fun onShown(transientBottomBar: Snackbar?) {
				super.onShown(transientBottomBar)
				textView.text = "SnackBar가 나타났습니다"
			}

			override fun onDismissed(transientBottomBar: Snackbar?, event: Int) {
				super.onDismissed(transientBottomBar, event)
				textView.text = "SnackBar가 사라졌습니다"
			}
		})

		// 메시지 색상
		snackBar1.setTextColor(Color.RED)
		// 배경색
		snackBar1.setBackgroundTint(Color.BLUE)
		// 애니메이션
		// snackBar1.animationMode = Snackbar.ANIMATION_MODE_FADE
		snackBar1.animationMode = Snackbar.ANIMATION_MODE_SLIDE

		// Action 설정
		snackBar1.setAction("Action1"){
			activityMainBinding.textView2.text = "Action1을 눌렀습니다"
		}

		snackBar1.setAction("Action2"){
			activityMainBinding.textView2.text = "Action2를 눌렀습니다."
		}
		snackBar1.show()
	}
}

button4.run{
	setOnClickListener {
		
		if(::snackBar1.isInitialized){
			
			if(snackBar1.isShown == true){
				
				snackBar1.dismiss()
			}
		}
	}
}

• button3
  • Snackbar.make() : view, text, 보여질 시간에 대해 정의하여 Snackbar 객체를 생성한다.
    • LENGTH_INDEFINITE : 사라지지 않고 계속 보여진다. 코드를 이용해 사라지게 해야 한다.
    • LENGTH_SHORT : 짧은 시간동안 유지된다.
    • LENGTH_LONG : 긴 시간동안 유지된다.
  • addCallback
    • onShown() : SnackBar가 나타날 때 동작하는 메서드
    • onDismissed() : SnackBar가 사라질때 동작하는 메서드
  • Snackbar.ANIMATION_MODE_FADE : 기본 애니메이션
  • Snackbar.ANIMATION_MODE_SLIDE : 아래에서 올라오는 듯한 애니메이션

 

• button4
  • if(::snackBar1.isInitialized){ ... } : snackBar1이 초기화 되어있는지 확인한다. 초기화 되어있을 때(button3)을 눌렀을 때만 동작한다.
  • if(snackBar1.isShown == true){ ... } : 현재 Snackbar가 보여지고 있는 상태인지 확인한다.
  • snackBar1.dismiss() : Snackbar를 사라지게 한다.

 

 

 

커스텀 SnackBar - snackbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageViewSnackBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textViewSnackBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />
</LinearLayout>

 

 

 

MainActivity.kt - 커스텀 SnackBar 구현

button5.setOnClickListener {
	// SnackBar를 생성한다
	val snackBar2 = Snackbar.make(it, "Custom SnackBar", Snackbar.LENGTH_SHORT)
	// ViewBinding
	val snackbarBinding = SnackbarBinding.inflate(layoutInflater)

	// View 설정
	snackbarBinding.run {
		imageViewSnackBar.setImageResource(R.drawable.img_android)
		textViewSnackBar.text = "새로 추가된 View"
		textViewSnackBar.setTextColor(Color.WHITE)
	}

	val snackBarLayout = snackBar2.view as Snackbar.SnackbarLayout
	snackBarLayout.addView(snackbarBinding.root)

	val t1 = snackBarLayout.findViewById<TextView>(com.google.android.material.R.id.snackbar_text)
	t1.visibility = View.INVISIBLE

	snackBar2.show()
}

• SnackBar를 ViewBinding을 통해 커스텀 한다.
  • val snackBarLayout = snackBar2.view as Snackbar.SnackbarLayout
    • 커스텀한 결과를 반영하기 위해 SnackBar의 Layout을 추출하여 새로운 View를 추가한다.
  • t1.visibility = View.INVISIBLE
    • SnackBar가 가지고 있는 TextView를 보이지 않게 한다.

 

 

 

결과

ANIMATION_MODE_FADE와 ANIMATION_MODE_SLIDE 비교

• SnackBar 없애기 버튼을 눌러야 사라진다.

ANIMATION_MODE_FADE	ANIMATION_MODE_SLIDE
ANIMATION_MODE_FADE	ANIMATION_MODE_SLIDE

 

 

 

커스텀 SnackBar