code

이미지 버튼에 재료 디자인 터치 리플 적용?

starcafe 2023. 9. 10. 12:27
반응형

이미지 버튼에 재료 디자인 터치 리플 적용?

리플 효과가 내장된 막대사탕의 일반 버튼과 달리 정적인 이미지여서 클릭 시 터치 애니메이션으로 반응하지 않는 이미지 버튼이 있습니다.소재 디자인 리플 터치 효과를 이미지에 추가하고 싶은데 구현 방법을 찾을 수 없는 것 같습니다.이미지 위에 컬러 필터를 설정할 수는 있지만 리플 효과는 없습니다.예를 들어 Google Play Music에서 앨범 커버 이미지를 잡고 있으면 그림자 리플이 이미지 전체로 이동합니다.

더 나은 결과를 위해:

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

다음과 같이 이미지 버튼에 배경을 추가할 수 있습니다.

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

I.shadrin(여기)과 Nicolars(여기)로부터 좋은 답변을 받았습니다.

그들의 대답의 차이점은?attr/selectableItemBackgroundBorderless줄 수 있습니다android.view.InflateException, 그래서.?android:attr/selectableItemBackground해결책입니다.

FWIW, 이전 프로젝트에서는 첫 번째 답변이 잘 작동했지만 최근 프로젝트에서는 그렇지 않았기 때문에 왜 예외가 발생하는지 모르겠습니다(앱 테마 = 때문일 수도 있습니다).android:Theme.Material?).

이상한 일이 발생한 것은 파급 효과가 이미지 버튼을 초과하는 것으로 나타났지만 해결책은 다음과 같습니다.

  • 사용방법android:foreground="?android:attr/selectableItemBackgroundBorderless"대신에android:background="?android:attr/selectableItemBackgroundBorderless"

당신도 똑같이 마주하고 있다면 도움이 되기를 바랍니다.

이미 배경이 있고 변경을 원하지 않는 경우 포그라운드를 사용합니다.

<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"/>

Material Button (com.google.android.material)을 사용할 수 있습니다.단추.이 속성을 가진 ImageButton 대신 MaterialButton).소재 성분을 사용하는 경우.

 <style name="IconOnlyButton">
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>
 </style>

<com.google.android.material.button.MaterialButton
    style="@style/IconOnlyButton"
    app:icon="@drawable/ic_refresh"/>

저는 i.shadin에서 제공한 솔루션이 이미지 때문에 작동하지 않았고, 드로잉 가능을 전경으로 설정하는 것이 작동했지만 API 23 이후에 지원됩니다.

내 솔루션은 다음과 같습니다.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/men_img" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnMale"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        app:backgroundTint="@android:color/transparent"
        app:cornerRadius="0dp"
        app:elevation="0dp"
        app:strokeWidth="0dp" />
</FrameLayout>

언급URL : https://stackoverflow.com/questions/30959610/apply-material-design-touch-ripple-to-imagebutton

반응형