ใช้ Material Design Touch Ripple กับ ImageButton ไหม


96

ฉันมีปุ่มรูปภาพที่ไม่ตอบสนองด้วยภาพเคลื่อนไหวแบบสัมผัสเมื่อคลิกเพราะมันเป็นภาพนิ่งไม่เหมือนกับปุ่มทั่วไปบนอมยิ้มซึ่งมาพร้อมกับเอฟเฟกต์ระลอกคลื่นในตัว ฉันต้องการเพิ่มเอฟเฟกต์การสัมผัสระลอกคลื่นดีไซน์ Material ให้กับรูปภาพ แต่ดูเหมือนจะหาวิธีนำไปใช้ไม่ได้ ฉันสามารถตั้งค่าฟิลเตอร์สีบนรูปภาพได้ แต่นั่นไม่ใช่เอฟเฟกต์การกระเพื่อม ตัวอย่างของสิ่งที่ฉันพยายามทำคือเมื่อคุณถือภาพปกอัลบั้มใน Google Play Music และมีเงากระเพื่อมเคลื่อนผ่านรูปภาพ

คำตอบ:


266

เพื่อผลลัพธ์ที่ดียิ่งขึ้น:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

7
นี่คือคำตอบที่ดีกว่า - ให้ความรู้สึกเป็นวงกลมและเอฟเฟกต์ระลอกคลื่นขอบคุณ
ElliotM

3
สิ่งนี้ควรใช้กับ drawables สีด้วยหรือไม่? สำหรับฉันไม่สามารถมองเห็นเอฟเฟกต์การสัมผัสได้แม้ว่าจะใช้พื้นหลังก็ตาม ธีมของฉันขยายมาจาก Theme.AppCompat.Light.DarkActionBar อาจเป็นปัญหาได้หรือไม่?
ชื่อที่แสดง

12
พื้นหลังแทนใช้พื้นหน้าสำหรับมุมมองทั้งหมดที่ทำงานได้ดี
Gopi Cg

1
มีใครเจอวิธีทำและเปลี่ยนสีพื้นหลังบ้างมั้ยคะ? การเปลี่ยน BackgroundTint ไม่ทำงานและการตั้งค่า Foreground เป็น "? attr / selectableItemBackgroundBorderless" จะทำให้ปุ่มมีช่องว่างภายในที่น่ารังเกียจ
Sev

1
หากคุณใช้พื้นหลังสีเข้มอาจมองเห็นระลอกคลื่นได้ไม่เพียงพอ คุณเปลี่ยนเป็นระลอกคลื่นสีอ่อนโดยเพิ่มandroid:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(ใช้ได้กับ <API 21) โปรดดูstackoverflow.com/q/28605031/599535สำหรับโซลูชันอื่น ๆ
Lifes

28

คุณสามารถเพิ่มพื้นหลังให้กับ ImageButton ของคุณได้ดังนี้:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

2
ใช้ android: พื้นหน้า = "? attr / selectableItemBackgroundBorderless"
MFQ

@MFQ มันแตกต่างจาก? android: attr / selectableItemBackground
Killer

1
@killer selectableItemBackgroundBorderless = ให้ระลอกคลื่นเป็นวงกลมโดยไม่มีขอบเขตเช่นหากคุณคลิกที่ไอคอนในแถบเครื่องมือ แต่ selectableItemBackground ให้ระลอกสี่เหลี่ยมคุณจะเห็นความแตกต่างหากคุณคลิกนานที่ไอคอนที่ใช้ปุ่มหมุนนี้
MFQ

6

ฉันได้รับคำตอบที่ดีจาก i.shadrin ( ที่นี่ ) และ Nicolars ( ที่นี่ )

ความแตกต่างระหว่างคำตอบของพวกเขาคือ?attr/selectableItemBackgroundBorderlessสามารถให้คุณได้android.view.InflateExceptionดังนั้นคำตอบคือ?android:attr/selectableItemBackgroundทางออก

FWIW ฉันไม่รู้ว่าทำไมข้อยกเว้นจึงเกิดขึ้นเนื่องจากคำตอบแรกใช้งานได้ดีในโครงการเก่าทั้งหมดของฉัน แต่ในโครงการล่าสุดของฉันไม่ใช่ (อาจเป็นเพราะธีมแอป = android:Theme.Material?)

สิ่งที่แปลกประหลาดที่เกิดขึ้นคือแม้ว่าเอฟเฟกต์ระลอกคลื่นจะแสดงให้เห็นว่า ImageButton อยู่นอกขอบเขตดังนั้นวิธีแก้ปัญหาคือ:

  • เพื่อใช้android:foreground="?android:attr/selectableItemBackgroundBorderless"แทนandroid:background="?android:attr/selectableItemBackgroundBorderless"

หวังว่ามันจะช่วยคุณได้ถ้าคุณกำลังเผชิญอยู่


3

หากคุณมีพื้นหลังอยู่แล้วและไม่ต้องการเปลี่ยนแปลงให้ใช้พื้นหน้า

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.