web-dev-qa-db-ja.com

画像ビューにリップル効果を設定する

次の画像ビューを取得しました：

<ImageView
    Android:id="@+id/header"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    Android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    Android:clickable="true"
    Android:focusable="true"
    Android:background="?android:attr/selectableItemBackground"/>

画像ビューにビットマップを設定しない場合、リップルはうまく機能します。しかし、このようにビットマップを設定すると、波及効果はなくなります。

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

これは私のripple.xmlです：

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android" 
                  Android:color="?android:colorControlHighlight">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

ビットマップは波紋効果を隠していると思いますが、どうすればそれを可視化できますか？すでに試しました：

  1. Android：backgroundをAndroid：foregroundに変更すると、機能しませんでした。
  2. この上に別の透明なImageViewを構成しますが、透明であるためリップルは表示されませんでした。

何か案は？ Lollipop Contactsもこれを行っているのを見てきました。

javaandroidandroid-5.0-lollipopripple
18
Jjang

私は画像ギャラリーを持っています（RecyclerViewとGridLayoutManagerで構築されています）。画像はピカソを使用して設定されています。画像にリップルを追加するにはImageViewをFrameLayoutでラップしました。アイテムのレイアウトは次のとおりです。

<FrameLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="120dp"
    Android:foreground="@drawable/ripple"
    Android:clickable="true"
    Android:focusable="true"
    >
    <ImageView
        Android:id="@+id/grid_item_imageView"
        Android:layout_width="match_parent"
        Android:layout_height="120dp"
        Android:layout_gravity="center"
        Android:scaleType="centerInside"
        />
</FrameLayout>

Android:foregroundに注意してください。 Android:backgroundとは異なります。私は試してみましたなしAndroid:clickable="true"とAndroid:focusable="true"そしてそれも機能しますですが、害はありません。

次に、ripple.xmlドローアブルをres/drawableに追加します。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <solid Android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/transparent" />
        </shape>
    </item>
</selector>

アイテムを選択すると、画像の上に半透明の色が表示されることに注意してください（Android 5.0より前のバージョンのデバイスの場合）。不要な場合は削除できます。

次に、リップル付きのripple.xmlドローアブルをres/drawable-v21に追加します。

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/coral">
</ripple>

カスタムripple.xmlの代わりにデフォルトのリップルエフェクトを使用できますが、灰色であるため、画像の上に表示するのは非常に困難です。

Android:foreground="?android:attr/selectableItemBackground"
29
Albert Vila Calvo

ドローアブルをRippleDrawableでラップして、それを実現できます。

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;

5
Gabriele Mariotti

私のような怠惰な人々のために：

Android:foreground="?android:attr/selectableItemBackground"

そしてあなたのスタイルでリップルカラーをカスタマイズしてください。

values/styles.xml

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

次に、onCreateView（）でのインフレーション前のフラグメントで：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}
4
amalBit

円形の効果でこれを試してください：

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:color="@color/colorTema3"
tools:targetApi="Lollipop">
<item Android:id="@Android:id/mask">
    <shape Android:shape="rectangle">
        <solid Android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    Android:id="@Android:id/background"
    Android:drawable="@Android:color/transparent" />
1
Álvaro Agüero