Ripple Animation

안드로이드 5.0(API 21)의 머트리얼 디자인에서 물결 터치 효과가 처음 소개 되었습니다. 터치 피드백에 대해 UI요소와 사용자간의 상호작용을 비주얼 하게 머트리얼 디자인에서는 제공합니다. 예를 들어 버튼을 터치하면 즉각 물결 효과가 표시 됩니다. 이것은 안드로이드 5.0에서 기본으로 제공됩니다.

Ripple 애니메이션은 새롭게 생긴 RippleDrawable을 이용합니다. 물결 효과는 뷰 경계에서 끝나거나 경제를 넘어 확장 할 수 있도록 구성 할 수 있습니다. 아래 스크린 샷은 터치한 위치에서 점점 퍼지면서 잔물결 효과가 버튼의 가장자리로 퍼지는 것을 보여 주고 있습니다. 터치를 끝마치게 되면 뷰는 다시 원래 모양으로 돌아갑니다. 이 모든것이 1초 내로 이루어 지지만 애니메이션 시간은 더 길거나 짧게 변경 할 수 있습니다.

 

View 클릭처리

이런 물결 효과는 안드로이드 5.0에서 기본적으로 제공하며, 아래와 같이 정의된 attr를 사용하면 된다.

 

버튼 처리

대부분의 버튼은 Drawable를 사용합니다. 일반적으로 selector에서 몇가지 상태에 맞는 리소스를 설정합니다.

안드로이드 5.0부터는 더 이상 selector를 사용하지 않아도 됩니다. ripple를 사용하면됩니다.

물결을 적용할 색을 선택하기만 하면됩니다. 안드로이드에 정의된 attr/colorControlHighlight의 기본 값이 마음에 들지 않는 경우 직접 다른색으로 변경하는것 보다 테마 스타일을 통해서 색상을 변경하면 됩니다. 테마 스타일을 변경하게 되면 colorControlHighlight가 사용되는 모든 색상들을 한번에 변경 할 수 있습니다.

처음 설명에서 가장자리로 퍼질때 경계 끝이 아닌 경계를 넘어서 확장 할 수 있다고 설명했다. 경계를 넘도록 물결 효과를 적용 하고 싶다면 attr/selectableItemBackgroundBorderless를 사용하면 된다. 큰뷰 내에 일부분의 View에서 더 잘작동 합니다.

 

One thought on “Ripple Animation”

  1. 안녕하세요. 유익한 글 남겨주셔서 감사합니다. 혹시 질문 하나만 드려도 괜찮을까요?
    1. 개발 과정에서 Ripple Effect가 1회만 정의하면 앱 내 전체 적용되는지(res<drawable<ripple.xml 등에 정의 시 앱 전체 적용)
    2. 각 xml – Linear Layout 내 텍스트뷰, 이미지뷰, 버튼 등 각 컴포넌트 별 Ripple Effect 값을 정의해야 하는지 궁금합니다.

    답변주시면…감사하겠습니다 (_ _)

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다