Snackbars

안드로이드 5.0(롤리팝)을 발표하면서 머트리얼 디자인 가이드도 함께 발표되었다. 머트리얼 디자인 가이드 사이트의 컴포넌트 부분을 보면 안드로이드에 사용되는 위젯을 사용할때 지켜야 할 목록이 정렬되어있다. 여기에 몇몇 눈에 익지 않은것이 있는데 Snackbars라는 것이다.

Toasts와 같이 묶여 있긴 하지만 전혀 생소한 컴포넌트이다. 스낵바는 토스트와 비슷할 알림성 컴포넌트로 사용자의 액션을 할 수 있는 기능을 가진다. 예를 들면 구글 Gmail 앱에서 메일을 삭제후 아래에 다시 되돌릴지에 대한 스낵바가 표시 된다. 사용자가 3초간 액션을 하지 않으면 자동으로 사라진다. 구글에서는 이런 컨포넌트를 제공하지도 않는데 왜 디자인 가이드에 포함 시켰는지 의문이다.

어쨌든 nispok라는 아이디를 가진 개발자가 디자인 가이드를 바탕으로 Snackbar를 개발하여 공개 해두었다. 어떻게 구현 되었는지 하나씩 살펴 보자.

https://github.com/nispok/snackbar

Snackbar는 크게 레이아웃부분과 액션에 대한 리스너로 구분된다.

Layout

Snackbar.show(Activity activity) 메서드를 통해 액티비티에 종속적으로 레이아웃을 추가하게 되는 방식이다.  Activity는 FrameLayout을 기반으로 화면을 그리게 되는데 이 레이아웃은 android.R.id.content 아이디를 가지고 있다. 그렇기 때문에  최상단에 뷰를 추가할 수있다.

FrameLayout.LayoutParams params = init(targetActivity);

ViewGroup root = (ViewGroup) targetActivity.findViewById(android.R.id.content);

root.addView(this, params);

이렇게 모든 액티비티에 뷰를 동적으로 특정 상황에 추가가 가능하다.  이외 레이아웃 관련된 속성들로 싱글라인, 멀티라인을 설정 할수 있으며 자동으로 사라질 Duraion을 지정할 수있다.

attachToAbsListView(AbsListView absListView)를 통해 리스트뷰 스크롤시 숨기는 기능을 제공한다.  또한 attachToRecyclerView(RecyclerView recyclerView)를 통해 RecyclerView도 지원한다.

Snackbar.finish()를 통해 Snackbar는 화면에서 완전히 제거 되며, 최상단의 레이아웃에서 removeView(View view)를 통제 제거된다. Add될때 특별히 Finish되는 코드가 없어 보이므로 Snackbar가 여러번 호출하면 쌓이게 된다.

Listener

ActionClickListenr를 통해 사용자가 터치 액션에 대해 콜백 받을 수 있다. SwipeDismissTouchListener는 스와이프를 통해 사용자가 Snackbar를 삭제 하는 기능으로 swipeToDismiss(boolean)을 통해 사용여부를 설정할 수 있다. SwipeDismissTouchListener는 RomanNurik의 Swip-to-Dismiss 라이브러리를 사용하였다.

https://github.com/romannurik/android-swipetodismiss

SwipeDismissTouchListener를 잠시 보면 onTouch()에서 터치이벤트를 통해 움직이면 View의 setTranslationX()를 이용해서 뷰가 터치하는 위치로 따라오게끔 구현되어 있으며, 손을 때면 다시 원래 위치로 돌려놓는다.

액티비티에 종속적이기 때문에 백그라운드 상태에서 스냅백을 띄우기는 무리가 있지만 구글의 디자인 가이드에 맞게 쉽게 사용할 수 있다.

 

댓글 남기기