2015-07-13 16 views
11

ottenuto il seguente Visualizza immagine:Situato effetto a catena su Vista

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

Ripple grandi opere se non si imposta una bitmap per la visualizzazione dell'immagine. Ma una volta che ho impostato una bitmap come questo, effetto a catena è andato:

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

Questo è il mio 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> 

Credo che la bitmap nasconde l'effetto a catena, come posso farlo visibile? Già provato:

  1. Modifica Android: sfondo per Android: in primo piano, che non ha funzionato.
  2. Configurare un altro ImageView trasparente sopra questo, ma poiché non era visibile un'increspatura trasparente.

Qualche idea? Ho visto anche i contatti di Lollipop.

risposta

3

È possibile realizzarlo, avvolgendo il disegnabile in 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) 

;

+0

Ma richiede api 21+. C'è un modo, magari usando il supporto, per consentirgli di abbassare le API? – Jjang

+3

Ripple richiede api 21. Non puoi usarlo con la api inferiore. –

+0

Ok, questo funziona. Come posso applicare il seguente xml al ripple drawable via codice? non voglio creare RippleDrawable nel layout becuase I' d copiare copia incolla il layout due volte. – Jjang

22

Ho una galleria di immagini (costruita con un RecyclerView e un GridLayoutManager). L'immagine è impostata usando Picasso. Per aggiungere un'increspatura all'immagine Ho avvolto lo ImageView con uno FrameLayout. Il layout articolo è:

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

Annotare il android:foreground. Non è lo stesso di android:background. Ho provato senzaandroid:clickable="true" e android:focusable="true" e anche funziona, ma non fa male.

quindi aggiungere un disegnabile ripple.xml in 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> 

Si noti che questo presenta con un colore semi-trasparente sulla parte superiore dell'immagine quando si seleziona la voce (per i dispositivi con la versione più vecchi di Android 5.0). Puoi rimuoverlo se non lo vuoi.

quindi aggiungere il ripple.xml drawable con l'ondulazione in res/drawable-v21:

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

È possibile utilizzare l'effetto di default ondulazione al posto del costume ripple.xml, ma è davvero difficile da vedere in cima ad un'immagine, perché il cielo è grigio:

android:foreground="?android:attr/selectableItemBackground" 
+2

Funziona alla grande, grazie! –

+0

Che cos'è "@ color/coral"? Sto ottenendo errori per questo. – Paritosh

+0

@Paritosh È una risorsa di colore. In 'res/values ​​/ colors.xml' definisci un colore come questo:' # 3F51B5 '. Puoi cambiarlo in qualsiasi cosa tu voglia, ovviamente. –

0

per i più pigri come me:

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

E personalizzare il colore ondulazione nel tuo stile.

nei valori/styles.xml

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

Poi, nel frammento prima che l'inflazione in 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; 
} 
0

Con un effetto circolare provare questo:

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