Android 中的图像幻灯片示例？

Question

我想在 android 中创建图像幻灯片。

我现在在 android GridView 中有很多图像，如果单击任何图像，我想打开手动幻灯片放映，以便我可以通过向左或向右移动手指来查看下一张和上一张图像 就像安卓内置的画廊一样。

有人指导我如何实现这一目标吗？

任何帮助将不胜感激。

Answer 1

如果您正在使用 ViewFlipper 显示图像，请尝试此代码

slideShowBtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                runnable = new Runnable() {

                    @Override
                    public void run() {
                        handler.postDelayed(runnable, 3000);
                        imageFrame.showNext();

                    }
                };
                handler.postDelayed(runnable, 500);
            }
        });

要停止它，请使用 handler.removeCallbacks(runnable);

public class PhotoSlideShowActivity extends Activity implements OnClickListener {

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;
    private GestureDetector gestureDetector;
    View.OnTouchListener gestureListener;
    ViewFlipper imageFrame;
    RelativeLayout slideShowBtn;
    Handler handler;
    Runnable runnable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.photo_slideshow_main);
        imageFrame = (ViewFlipper) findViewById(R.id.imageFrames);

                //get sd card path for images

        File parentFolder = new
         File(Environment.getExternalStorageDirectory()
         .getAbsolutePath()
         + "/images");

        addFlipperImages(imageFrame, parentFolder);
        // Gesture detection
        gestureDetector = new GestureDetector(new MyGestureDetector());
        gestureListener = new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if (gestureDetector.onTouchEvent(event))
                    return true;
                else
                    return false;
            }
        };
        handler = new Handler();
        imageFrame.setOnClickListener(PhotoSlideShowActivity.this);
        imageFrame.setOnTouchListener(gestureListener);
        slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
        slideShowBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {

                runnable = new Runnable() {

                    @Override
                    public void run() {
                        handler.postDelayed(runnable, 3000);
                        imageFrame.showNext();

                    }
                };
                handler.postDelayed(runnable, 500);
            }
        });

    }

    private void addFlipperImages(ViewFlipper flipper, File parent) {
        int imageCount = parent.listFiles().length;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.FILL_PARENT,
                RelativeLayout.LayoutParams.FILL_PARENT);
        for (int count = 0; count < imageCount - 1; count++) {
            ImageView imageView = new ImageView(this);
            Bitmap imbm = BitmapFactory.decodeFile(parent.listFiles()[count]
                    .getAbsolutePath());
            imageView.setImageBitmap(imbm);
            imageView.setLayoutParams(params);
            flipper.addView(imageView);
        }

    }
    class MyGestureDetector extends SimpleOnGestureListener {
        @SuppressWarnings("static-access")
        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            // TODO Auto-generated method stub
            slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
            slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
            handler.removeCallbacks(runnable);
            runnable = new Runnable() {

                @Override
                public void run() {
                    slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
                }
            };
            handler.postDelayed(runnable, 2000);
            return true;
        }
        @SuppressWarnings("static-access")
        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            // TODO Auto-generated method stub
            slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
            slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
            handler.removeCallbacks(runnable);
            runnable = new Runnable() {

                @Override
                public void run() {
                    slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
                }
            };
            handler.postDelayed(runnable, 2000);
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            try {
                if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                    return false;
                // right to left swipe
                if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                    handler.removeCallbacks(runnable);
                    imageFrame.setInAnimation(inFromRightAnimation());
                    imageFrame.setOutAnimation(outToLeftAnimation());
                    imageFrame.showNext();
                } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                    handler.removeCallbacks(runnable);
                    imageFrame.setInAnimation(inFromLeftAnimation());
                    imageFrame.setOutAnimation(outToRightAnimation());
                    imageFrame.showPrevious();
                }
            } catch (Exception e) {
                // nothing
            }
            return false;
        }

    }

    @Override
    public void onClick(View view) {

    }

    private Animation inFromRightAnimation() {

        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, +1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromRight.setDuration(500);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }
    private Animation outToLeftAnimation() {
        Animation outtoLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoLeft.setDuration(500);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
    }
    private Animation inFromLeftAnimation() {
        Animation inFromLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, -1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromLeft.setDuration(500);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
    }
    private Animation outToRightAnimation() {
        Animation outtoRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, +1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoRight.setDuration(500);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
    }

}

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/imageFrames"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:drawable/screen_background_dark" >
    </ViewFlipper>

    <RelativeLayout
        android:id="@+id/slideShowBtn"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:gravity="center" android:visibility="invisible">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#33FFFFFF"
            android:gravity="center"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:paddingTop="1dp" >

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="#66000000"
                android:gravity="center" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:text="Slideshow"
                    android:textSize="18dp" />
            </RelativeLayout>
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

Answer 2

在android中使用ViewFlipper应用幻灯片放映非常容易。

将图像放入可绘制文件夹中并按照以下代码操作。

Slide_show.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/myflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >
    </ViewFlipper>

</LinearLayout>

SlideShowActivity.java

package com.example.viewpagerexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class SlideShowActivity extends Activity {

    private ViewFlipper myViewFlipper;
    private float initialXPoint;
    int[] image = { R.drawable.one_full, R.drawable.two_full,
        R.drawable.three_full, R.drawable.four_full, R.drawable.five_full,
        R.drawable.six_full, R.drawable.seven_full, R.drawable.eight_full,
        R.drawable.nine_full, R.drawable.ten_full };

    @Override
    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.slide_show);
    myViewFlipper = (ViewFlipper) findViewById(R.id.myflipper);

    for (int i = 0; i < image.length; i++) {
        ImageView imageView = new ImageView(SlideShowActivity.this);
        imageView.setImageResource(image[i]);
        myViewFlipper.addView(imageView);
    }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        initialXPoint = event.getX();
        break;
    case MotionEvent.ACTION_UP:
        float finalx = event.getX();
        if (initialXPoint > finalx) {
            if (myViewFlipper.getDisplayedChild() == image.length)
                break;
            myViewFlipper.showNext();
        } else {
            if (myViewFlipper.getDisplayedChild() == 0)
                break;
            myViewFlipper.showPrevious();
        }
        break;
    }
    return false;
    }
}

这里的图像仅在用户滑动时发生变化。

如果你想以一定的间隔自动滑动，请添加以下代码

myViewFlipper.setAutoStart(true);
myViewFlipper.setFlipInterval(3000);
myViewFlipper.startFlipping();

Answer 3

您可以在 ApiDemos 中找到 Gallery1 和 Gallery2 的示例：

c:\android-sdk-windows\samples\android-7\ApiDemos\src\com\example\android\apis\view\

Answer 4

尝试下面的完整源代码：

MainActivity.java:

package com.example.splashanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

    int mFlipping = 0 ; // Initially flipping is off
    Button mButton ; // Reference to button available in the layout to start and stop the flipper

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activtiy_main);

        /** Click event handler for button */


                ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper1);


                    /** Start Flipping */
                    flipper.startFlipping();
                    mFlipping=1;

            }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}  

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >



    <ViewFlipper
        android:id="@+id/flipper1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:flipInterval="3000"
        android:inAnimation="@anim/slide_in_right"
        android:outAnimation="@anim/slide_in_left"
        android:layout_centerInParent="true" >

        <ImageView
            android:src="@drawable/img1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img1"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img2"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img3"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/str_img4"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img5"
            android:layout_gravity="center_horizontal" />

    </ViewFlipper>

</RelativeLayout>

在 res/anim/slide_in_left.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="500"/>
</set>

在 res 中/anim/slide_in_right.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="500"/>
</set>