A “Before And After” Image Comparison Slide Control in Android

问题

Is there a possibility to build a image comparison slide control in Android as one that exists in HTML 5?

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

How can I achieve this thing?

回答1:

I have created library for this functionality, may be someone who steel need this feature,it will be good for them.

compile 'com.github.developer--:beforeafterslider:1.0.4'

回答2:

One way is using a seekbar and a framelayout that sits on top of the original Image. As you slide the seekbar the frames height adjusts which contains the 2nd image.

Code for top down reveal

    private SeekBar seekBar;

under protected void onCreate(Bundle savedInstanceState) {

add

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

            }
        });

the layout

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

来源：https://stackoverflow.com/questions/33413195/a-before-and-after-image-comparison-slide-control-in-android

标签

android

photo