【Android】 리플 이펙트와 이벤트 지연을 병용한 탭시의 연출

개요



Android 앱에서 목록의 요소나 버튼 등을 탭했을 때 누른 것을 보고 알고 싶습니다.
안드로이드에는 리플 효과 이라는 파문 같은 효과가 있으므로 그것을 설정하기로 합니다.
아래에서는 CardView버튼에 대해 설명합니다.

요소에 리플 효과 설정



CardView



CardView 에 리플 효과를 붙이는 경우, ?android:attr/selectableItemBackground 를 설정하는 것이 간단합니다.

card.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:foreground="?android:attr/selectableItemBackground">
        <View
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:background="#EEEEEE" />
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>


background로 설정하면 다음과 같이 리플이 View 아래에 숨겨집니다.


버튼



Button에는 표준으로 리플 이펙트가 붙어 있습니다만, background (을)를 설정했을 경우는, 리플이 붙지 않은 것으로 덧쓰기되어 버립니다.<ripple>를 사용하여 리플이있는 background를 설정할 수 있습니다.
아래에서는 리플이있는 둥근 배경을 만듭니다 (배경을 둥글게하면 foreground로 리플을 붙이면 리플이 모서리에서 튀어 나옵니다).

res/drawable/button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item>
        <shape>
            <solid android:color="#AABEFF"/>
            <corners android:radius="28dp"/>
        </shape>
    </item>
</ripple>

리플 효과를 붙일 요소의 background에 방금 전의 drawable를 지정합니다.

fragment.xml
<LinearLayout ...(略)>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/button_background" />
</LinearLayout>

이벤트 지연



예를 들어 카드나 버튼을 누르면 화면 천이를 할 때, OS의 버전이나 디바이스에 따라서는, 리플 이펙트의 발생과 동시에 화면이 천이해 리플이 보이지 않는 경우가 있습니다.
탭 이벤트의 실행을 지연시켜 리플을 볼 수 있습니다.
처리 지연에는 Handler()를 사용하고 있습니다.

Fragment.kt
item.setOnClickListener {
    Handler().postDelayed(object : Runnable {
        override fun run() {
            // タップした時の処理
        }
    }, 100) // 遅延させたい時間をミリ秒で指定
}

요약


  • 카드나 버튼을 눌렀을 때 리플 이펙트가 발생하도록 했습니다.
  • 리플이 보이도록 탭했을 때의 처리의 실행을 지연했습니다.

  • 참고



    htps : // 이 m / Nishi y / ms / bf2742 fb990 3c8f875
    htps : // m / h kus / ms / 32b96 예 f9

    좋은 웹페이지 즐겨찾기