2015-10-29 4 views
5

Gibt es eine Möglichkeit, ein Bildvergleichs-Schieberegler in Android als eine, die in HTML 5 existiert zu erstellen?Ein Vorher-Nachher-Bildvergleich Schieberegler in Android

http://thenewcode.com/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

Wie ich dieses Ding erreichen kann?

+0

Es scheint, Sie müssen nur den Alpha-Wert eines Bildes ändern. –

+0

Es scheint, Sie sollten 2 Bitmaps (vorher und nachher) haben. Ich würde eine benutzerdefinierte Ansicht erstellen, die diese 2 Bitmaps enthält/handhabt und sie entsprechend mit 'drawBitmap (Bitmap-Bitmap, Rect src, Rect dst, Farbe malen)' zeichnet. –

Antwort

4

Eine Möglichkeit besteht darin, eine Suchleiste und ein Framelayout zu verwenden, das auf dem Originalbild sitzt. Wenn Sie die Suchleiste verschieben, wird die Rahmenhöhe angepasst, die das zweite Bild enthält.

-Code für oben zeigen nach unten

private SeekBar seekBar; 

unter protected void onCreate(Bundle savedInstanceState) {

seekBar = (SeekBar) findViewById(R.id.seekBar1); 

     seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { 

      int progress = 0; 

      @Override 

      public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) { 
       FrameLayout target = (FrameLayout) findViewById(R.id.target); 

       progress = progresValue; 

       ViewGroup.LayoutParams lp = target.getLayoutParams(); 
       lp.height = progress; 
       target.setLayoutParams(lp); 

      } 

      @Override 
      public void onStartTrackingTouch(SeekBar seekBar) { 

      } 

      @Override 
      public void onStopTrackingTouch(SeekBar seekBar) { 

      } 
     }); 

das Layout hinzufügen

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" 
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:showIn="@layout/activity_main" tools:context=".MainActivity"> 

    <ImageView 
     android:id="@+id/image" 
     android:layout_width="600dp" 
     android:layout_height="300dp" 
     android:src="@drawable/pug_color"/> 
    <FrameLayout 
     android:id="@+id/target" 
     android:layout_width="600dp" 
     android:layout_height="150dp"> 
     <ImageView 
      android:id="@+id/imageb" 
      android:layout_width="600dp" 
      android:layout_height="300dp" 
      android:layout_gravity="center_horizontal" 
      android:src="@drawable/pug_bw"/> 
    </FrameLayout> 

    <SeekBar 
     android:id="@+id/seekBar1" 
     android:layout_below="@+id/image" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:progress="300" 
     android:max="600" /> 
</RelativeLayout> 
auf einem Slider Wertänderung
5

I library für diese Funktion geschaffen haben, jemand, der diese Funktion Stahl benötigen, wird für sie

gut
compile 'com.github.developer--:beforeafterslider:1.0.4' 
+1

Jemo, gute Arbeit! Ich habe versucht, deinen Slider zu benutzen, es ist wirklich großartig. Ich habe jedoch einen Fehler gefunden - wenn ich für beide Teile des Sliders dasselbe Bild anlege (das Vorher und Nachher), scheint eines der Bilder verzerrt zu sein, so als ob es leicht gezoomt wäre (Entschuldigung, hier zu schreiben, ich habe kein Github-Konto). – Lelik

+0

danke, ich werde so schnell wie möglich überprüfen –

+0

Es ist die Linie val tmpBitmap = getScaledBitmap (theBitmap) in ClipDrawableProcessorTask.kt Wahrscheinlich, Sie legen es dort, um zu zeigen, dass die Bilder unterschiedlich sind, wenn man beide Teile setzt der Schieberegler auf das gleiche Bild. Also habe ich es kommentiert und jetzt funktioniert alles gut. Das "Vorher" -Bild ist rechts, das "Nachher" ist links. Nochmals vielen Dank für Ihre Arbeit, hat mir sehr geholfen einige Bildbearbeitungseffekte zu demonstrieren. – Lelik

Verwandte Themen