Wischen zwischen gefilterten Bildern für Android

Im Wesentlichen bin ich wieder fragen, diese Frage, sondern für die Umsetzung auf Android.

Ich versuche, den Benutzern zu erlauben, zwischen den Filtern auf einem statischen Bild zu wechseln. Die Idee ist, dass das Bild an Ort und Stelle bleibt, während der Filter darüber rollt. Snapchat hat vor kurzem eine Version veröffentlicht, die diese Funktion implementiert. Dieses Video zeigt genau das, was ich versuche, um 1:05 zu erreichen .

Ich habe versucht, eine Liste mit den Overlays und Paging durch sie mit dem onFling und Zeichnung mit onDraw, aber ich verliere die Animationen. Gibt es eine Möglichkeit, dies kann mit ViewPager getan werden?

EDIT: Wie ich gefordert habe, habe ich meine Implementierung für Overlay View Paging zur Verfügung gestellt. Es füllt den Viewpager mit transparenten png-Bildern, die auf einer Bildansicht sitzen. Auch dieser Code ist in C #, wie ich bin mit Xamarin Android. Es ist ziemlich ähnlich zu Java für diejenigen, die nicht vertraut mit C #

... static List<ImageView> overlayList = new List<ImageView>(); ... public class OverlayFragmentAdapter : FragmentPagerAdapter { public OverlayFragmentAdapter(Android.Support.V4.App.FragmentManager fm) : base(fm) { } public override int Count { get { return 5; } //hardcoded temporarily } public override Android.Support.V4.App.Fragment GetItem(int position) { return new OverlayFragment (); } } public class OverlayFragment : Android.Support.V4.App.Fragment { public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.Inflate (Resource.Layout.fragment_overlay, container, false); LinearLayout l1 = view.FindViewById<LinearLayout> (Resource.Id.overlay_container); ImageView im = new ImageView (Activity); im.SetImageResource (Resource.Drawable.Overlay); //Resource.Drawable.Overlay is a simple png transparency I created. R l1.AddView (im); overlayList.AddElement (im); return view; } } 

Aktivitätslayout XML:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="bottom"> <ImageView android:id="@+id/background_image" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout <!-- This second layout is for buttons which I have omitted from this code --> android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/edit_layout"> <android.support.v4.view.ViewPager android:id="@+id/overlay_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> </RelativeLayout> 

Fragment Overlay XML

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/overlay_container" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" /> 

Kurz zusammengefasst: Der viewpager sitzt auf der ersten Bildansicht, die als Hintergrund wirkt. Die OnCreateView-Methode erstellt ein Overlay-Fragment und eine Overlay-Imageansicht aus einer Ressource, die sie in das Layout des overlay_containers einfügt. Sichern des Bildes (das ich nicht gepostet habe, wie es außerhalb des Umfangs dieser Frage ist) ist einfach, alles, was es tut, ist eine Hintergrund-Bitmap, eine Overlay-Bitmap und verwendet eine Leinwand, um die Overlay auf den Hintergrund zu zeichnen, dann schreibt sie Datei.

  • Zerstöre den Artikel aus dem ViewPager-Adapter, nachdem die Bildschirmausrichtung geändert wurde
  • Android-Ansicht Pager mit Seitenanzeige
  • Speichern / Wiederherstellen Fragmente Staat Android
  • Animation im Viewpager-Tab ändern Fadein / Fadeout wie Linkedin Einführungsbildschirm
  • (R.dimen.padding_medium) Kann nicht gelöst werden oder ist kein Feld?
  • Wie implementiere ich den Button in ViewPager?
  • Entfernen von Fragment-Seite aus ViewPager in Android
  • Nicht-Scrolling-Fragment in einem ViewPager in CoordinatorLayout
  • 3 Solutions collect form web for “Wischen zwischen gefilterten Bildern für Android”

    Ich habe an etwas Ähnliches gearbeitet.

    Für Ihren speziellen Anwendungsfall würde ich nur eine Leinwand und Alpha-Blend die Filter über, auf Fling, als das Top-Bild.

    Um das Alpha-Blending zu machen, setze den Alpha-Lack des ersten Bildes (das Original) auf 255 und das Alpha des zweiten (der Filter) auf etwas wie 128.

    Sie brauchen nur einen Filter mit der Größe des Bildes und dann verschieben Sie die Position des zweiten Bildes, während Sie es zeichnen. Das ist es.

    Es ist extrem schnell und arbeitet ein Vergnügen auf sehr, sehr alten Geräten.

    Hier ist eine Beispielimplementierung:

      Bitmap filter, // the filter original, // our original tempBitmap; // the bitmap which holds the canvas results // and is then drawn to the imageView Canvas mCanvas; // our canvas int x = 0; // The x coordinate of the filter. This variable will be manipulated // in either onFling or onScroll. void draw() { // clear canvas mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); // setup paint paint0.setAlpha(255); // the original needs to be fully visible paint1.setAlpha(128); // the filter should be alpha blended into the original. // enable AA for paint // filter image paint1.setAntiAlias(true); paint1.setFlags(Paint.ANTI_ALIAS_FLAG); // Apply AA to the image. Optional. paint1.setFlags(Paint.FILTER_BITMAP_FLAG); // In case you scale your image, apple // bilinear filtering. Optional. // original image paint0.setAntiAlias(true); paint0.setFlags(Paint.ANTI_ALIAS_FLAG); paint0.setFlags(Paint.FILTER_BITMAP_FLAG); // draw onto the canvas mCanvas.save(); mCanvas.drawBitmap(original, 0,0,paint0); mCanvas.drawBitmap(filter, x,0,paint1); mCanvas.restore(); // set the new image imageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap)); } 

    Und hier sind grundlegende onFling und onScroll Implementierungen.

     private static final int SWIPE_DISTANCE_THRESHOLD = 125; private static final int SWIPE_VELOCITY_THRESHOLD = 75; // make sure to have implemented GestureDetector.OnGestureListener for these to work. @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { float distanceX = e2.getX() - e1.getX(); float distanceY = e2.getY() - e1.getY(); if (Math.abs(distanceX) > Math.abs(distanceY) && Math.abs(distanceX) > SWIPE_DISTANCE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) { // change picture to if (distanceX > 0) { // start left increment } else { // the left // start right increment } } } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // checks if we're touching for more than 2f. I like to have this implemented, to prevent // jerky image motion, when not really moving my finger, but still touching. Optional. if (Math.abs(distanceY) > 2 || Math.abs(distanceX) > 2) { if(Math.abs(distanceX) > Math.abs(distanceY)) { // move the filter left or right } } } 

    Hinweis: Die OnScroll / OnFling-Implementierungen haben einen Pseudocode für die x-Einstellungen, da diese Funktionen getestet werden müssen. Jemand, der damit endet, dies in der Zukunft umzusetzen, kann sich frei fühlen, die Antwort zu bearbeiten und diese Funktionen bereitzustellen.

    onDraw Sie einen Blick auf die Implementierung der Methode onDraw für die Standard-Kalender-App: DayView . Es gibt onFling Implementierung und Neuzeichnung des Inhalts (zB Kalender-Gitter) nach den Bewegungsänderungen, die das Fling imitieren.

    Dann können Sie ColorFilter in onDraw entsprechend den Bewegungsänderungen verwenden. Es ist sehr schnell.

    Alternativ können Sie ViewSwitcher mit einer Liste gefilterter Bilder verwenden (oder irgendwie einen gefilterten Bilder-Cache erstellt haben). Um die Möglichkeit zu erreichen, "das Bild zu zeichnen", kannst du ImageView und ViewSwitcher in RelativeLayout übereinander verwenden und das neue gefilterte Bild in ImageView nach dem Ende des Scrollens setzen.

    Für diese Anwendung fühle ich, dass es am einfachsten wäre, Androide Animationsfunktionen zu verwenden und den Animationswert auf den gewünschten Filter zu setzen. So würden Sie Ihre eigene Animation machen die geänderten Filter iterating über Ihr Array.

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.