[Android Core] Snackbar 파해치기 3편

안녕하세요!

허접샴푸입니다~!

Snackbar에 대해 알아보겠습니다. 대망의 마지막편인 3편입니다.

 

이번 3편에서는 

- SnackBar 과 Coorindatorlayout관의 관계

에 대해서 알아보도록 하겠습니다.

 

왜 CoordinatorLayout?

Material Design 공식 사이트에서 아래와 같이 기술해 놓았습니다.

NOTE: Snackbars work best if they are displayed inside of a CoordinatorLayout. CoordinatorLayout allows the snackbar to enable behavior like swipe-to-dismiss, as well as automatically moving widgets like FloatingActionButton. (출처: https://material.io/develop/android/components/snackbar/)   즉, Snackbar은 CoordinatorLayout 안에서 표시될 때 제일 잘 작동한다는 뜻입니다.  CoordinatorLayout은  (1) swipe-to-dismiss 스와이프를 통해 Snackbar을 없앨 수 있으며 (2) FloatingActionButton을 움직이게 할 수 있다는 것입니다.

그럼 여기서 정확히 알아볼 것은

(1) 일반 LinearLayout이나 RelativeLayout, 혹은 ConstraintLayout 에서는 swipe-to-dismiss가 안되는지? CoordinatorLayout에서는 제대로 동작하는지?

(2) FloatingActionButton이 움직인다는 것은 무슨 말인지, 혹은 다른 레이아웃에서도 움직이는지 확인해보도록 하겠습니다.

 

 

[알아보자]

(1) 일반 LinearLayout이나 RelativeLayout, 혹은 ConstraintLayout 에서는 swipe-to-dismiss가 안되는지? CoordinatorLayout에서는 제대로 동작하는지?

 

(시나리오 :  FloatingActionButton 을 클릭하면 SnackBar가 표시되며 Swipe-To-Dismiss를 테스트해보도록 하겠습니다.)

<LinearLayout>

(결과 : 실패 --> 스와이프를 아무리해도 아무 동작을 하지 않습니다.)

마우스 커서를 잘 보면 좌우로 스와이프 하지만 아무 동작도 일어나지 않습니다.

 

<RelativeLayout>

(결과 : 또 실패 --> 스와이프를 아무리해도 아무 동작을 하지 않습니다.)

마우스 커서를 잘 보면 좌우로 스와이프 하지만 아무 동작도 일어나지 않습니다.

 

<ConstraintLayout>

(결과 : 또또또 실패 --> 스와이프를 아무리해도 아무 동작을 하지 않습니다.)

마우스 커서를 잘 보면 좌우로 스와이프 하지만 아무 동작도 일어나지 않습니다.

 

<대망의 CoordinatorLayout>

(결과 : 오 성공!!! 오른쪽으로 스와이프하면 Snackbar가 사라집니다!)

잘 보면 마우스 커서를 오른쪽으로 swipe하니 snackbar가 사라집니다.

 

 

[비교]

LinearLayout(좌) vs RelativeLayout(중간) vs ConstraintLayout(우)

CoordinatorLayout: swipe-to-dismiss 가 제대로 작동합니다.

결론

1. CoordinatorLayout에서 Snackbar은 Swipe-to-dismiss가 잘 동작한다. 

2. 그리고 눈치를 채셨겠지만, CoordinatorLayout을 제외한 Layout에서는 FloatingActionButton 이 위아래로 움직이지 않습니다. CoordinatorLayout에서만 Snackbar가 나올때 FloatingActionBar이 자동으로 SnackBar 공간만큼 위로 움직입니다. 이래서 CoordinatorLayout과 Snackbar는 찰떡이라는가 봅니다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(보너스 Tip)

Snackbar을 사용하기 위해 Snackbar과 찰떡 관계인 CoordinatorLayout을 사용한다고 가정할 시,

BottomNavigationView를 사용할 때 Snackbar을 화면에 띄우면 Snackbar가 BottomNavigationView를 가리게 됩니다(아래 예시 참조).

(결과화면)

Snackbar가 화면에 표시되면 FloatingActionButtton은 움직이지만, BottomNavigationView를 가려버립니다.

 

위 문제를 해결하기 위해서는 아래 아래 코드 한줄을 집어 넣으면 됩니다.

app:layout_dodgeInsetEdges="bottom"

- 설명: 즉 올라가게 하고 싶은 View에다가 저 위 한줄을 집어넣으면 그 View는 모두 Snackbar 가 차지하는 공간만큼 위로 올라가게 됩니다. 지금은 ImageView를 품고 있는 LinearLayout에 추가하여 LinearLayout이 위로 올라가면서 자식 View인 ImageView 또한 같이 올라가게 됩니다.

 

(결과화면)

Snackbar가 나올 때 모든 View가 위로 올라갑니다.

 

[비교화면]

app:layout_dodgeInsetEdges="bottom"  유무 차이(왼쪽은 없으며, 오른쪽은 있음)

 

오늘은 여기까지입니다~! 

이번 계기로 저도 스낵바에 대해서 많이 배워 갑니다.

Coordinatorlayot과 잘 맞추면 이쁜 UI UX를 유저에게 선사할 수 있을 것 같습니다 ㅎㅎ

 

궁금한 점이 있으면 댓글로 남겨주세요~!

혹시 만들고 싶으신 뷰, 기능 등 아니면 궁금한 부분이 있으면, 그 어떤 무엇이라도 있으시면 댓글로 남겨주십쇼.

제가 만들어서 리뷰할 수 있도록 하겠습니다!