【Android】Ripple Effect 구현에 대해

7967 단어 안드로이드animation안드로이드 개발

소개



Android에서 터치 피드백이라고하면 Ripple입니다
발표되고 나서 시간도 서 있습니다만, Lolipop ~ Oreo까지(Pie에서도 아마 OK)로 움직이도록(듯이) 대응했으므로 정리합니다. CardView를 사용한 구현, 색상 지정에 대해 설명합니다.

Ripple



  • 클릭 후 회색 파문처럼 퍼지는 터치 피드백은 Ripple입니다.

    샘플 코드



  • 앞으로 소개하는 디자인을 구현한 코드입니다. 이 기사에 기재되지 않은 자세한 내용은 여기에서 확인할 수 있습니다.

    • 운영 환경


  • compileSdkVersion 25
  • minSdkVersion 19
  • targetSdkVersion 25
  • supportLibraryVersion 25.4.0

    • 대상 OS


  • Lolipop ~ Oreo (Pie도 아마 괜찮아)

    • 구현 정보



    디자인




  • ①: 이미지. 클릭하면 전체에 Ripple이 표시됩니다
  • ② : 제목과 설명문. 클릭시의 움직임은 ①과 동일합니다
  • ③, ④: Read 버튼, Trial 버튼. 클릭하면 버튼 안에 Ripple이 표시됩니다

    • RippleDrawable 생성



    ripple.xml
    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/red">
    <item
        android:id="@android:id/mask" 
        android:drawable="@android:color/white"/>
</ripple>
  • 위와 같이 XML로 RippleDrawable을 만듭니다.
  • item는 화면을 터치 한 손가락을 놓은 타이밍에서 Ripple을 표시하도록 지정합니다.

    레이아웃 XML(기술을 생략하기 위해 클래스만 기재)



    layout.xml
    <android.support.v7.widget.CardView
    android:clickable="true"
    android:foreground="@drawable/ripple"
    >
    <RelativeLayout>
        <ImageView/>
        <RelativeLayout>
           <RelativeLayout>
                <TextView/>
                <TextView/>
           </RelativeLayout>
            <LinearLayout>
                <android.support.v7.widget.CardView
                    android:clickable="true"
                    android:foreground="@drawable/foreground_ripple">
                    <TextView
                        android:id="@+id/read_button_text"/>
               </android.support.v7.widget.CardView>
               <android.support.v7.widget.CardView
                    android:clickable="true"
                    android:foreground="@drawable/foreground_ripple">
                   <TextView/>
               </android.support.v7.widget.CardView>
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>
  • CardView에 android:clickable="true"　　android:foreground="@drawable/foreground_ripple"를 지정하면 Ripple이 표시됩니다. 빨간색 터치 피드백이 표시되어야 합니다.

    • Ripple에 색상 지정


  • 빨간색 이외의 색을 지정합니다.

    • MainActivity.kt
    
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {　//①
    val rippleColors = intArrayOf(R.color.colorAccent, R.color.colorPrimary, R.color.colorPrimaryDark,
            R.color.medium_turquoise, R.color.eclipse, R.color.malibu
    )

    val i = Random().nextInt(rippleColors.size)
    val mask = ContextCompat.getDrawable(context, R.drawable.mask)
    val color = ContextCompat.getColor(context, rippleColors[i])
    holder.root.foreground = RippleDrawable(ColorStateList.valueOf(color), null, mask).mutate()
}
  • ①: Lolipop 이상일 때 RippleDrawable의 색을 랜덤하게 지정하고 있습니다.

    • 끝에


  • 새롭게 Ripple에 대해 설명했습니다, Lolipop 이후에서 Ripple를 표시하려면 ,CardView나 FrameLayout를 이용해 레이아웃을 생각할 필요가 있을 것 같습니다. 도움이되면 기쁩니다.

    • 추가


  • Pixel3(Pie)에서는 아무것도 설정하지 않아도 colorPrimary의 Ripple이 표시되는 것 같습니다. 기회가 있으면 확인해보십시오.
    • [Flutter] animation을 사용하여 시도했습니다. 그 2
    [Flutter] 화면 전체에서 아무 곳이나 누르면 이벤트 (주로 애니메이션)를 실행하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage