Android实现图片轮播切换

1、设置布局文件，其内容如下：

activity_image_flipper_shade.xml

<?xml version="1.0" encoding="utf-8"?>

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

    android:background="@drawable/background"

    android:paddingBottom="@dimen/activity_optopns_vertical_margin"

    android:paddingLeft="@dimen/activity_options_horizontal_margin"

    android:paddingRight="@dimen/activity_options_horizontal_margin"

    android:paddingTop="@dimen/activity_optopns_vertical_margin"

    tools:context=".ImageFlipperActivity" >

    <RelativeLayout

        android:id="@id/rl_image_flipper_shade_title"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/btn_image_flipper_shade_back"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentLeft="true"

            android:layout_marginBottom="10dp"

            android:background="@drawable/custom_button"

            android:text="@string/back"

            android:textColor="@color/textColor"

            android:textSize="16sp"

            android:visibility="visible" />

        <TextView

            android:id="@id/tv_image_flipper_shade_title"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerInParent="true"

            android:text="@string/image_flipper_shade"

            android:textColor="@color/textColor"

            android:textSize="30sp"

            android:textStyle="bold" />

    </RelativeLayout>

    <LinearLayout

        android:id="@id/ll_image_flipper_shade_content"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@id/rl_image_flipper_shade_title"

        android:layout_marginBottom="20dp"

        android:layout_marginTop="20dp"

        android:gravity="center"

        android:orientation="vertical" >

        <ViewFlipper

            android:id="@id/vf_image_flipper_shade"

            android:layout_width="match_parent"

            android:layout_height="match_parent" />

    </LinearLayout>

</RelativeLayout>

2、动画效果配置文件，其内容如下：

A.push_left_in.xml（从左边进入屏幕）

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- translate：画面转换位置移动动画效果 -->

    <translate

        android:duration="500"

        android:fromXDelta="100%p"

        android:toXDelta="0" />

    <!-- alpha：渐变透明度动画效果 -->

    <alpha

        android:duration="500"

        android:fromAlpha="0.1"

        android:toAlpha="1.0" />

    <!-- scale：渐变尺寸伸缩动画效果 -->

    <!-- rotate：画面转换位置移动动画效果 -->

</set>

B.push_left_out.xml（从左边退出屏幕）

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate

        android:duration="500"

        android:fromXDelta="0"

        android:toXDelta="-100%p" />

    <alpha

        android:duration="500"

        android:fromAlpha="1.0"

        android:toAlpha="0.1" />

</set>

C.push_right_in.xml（从右边进入屏幕）

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate

        android:duration="500"

        android:fromXDelta="-100%p"

        android:toXDelta="0" />

    <alpha

        android:duration="500"

        android:fromAlpha="0.1"

        android:toAlpha="1.0" />

</set>

D.push_right_out.xml（从右边退出屏幕）

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate

        android:duration="500"

        android:fromXDelta="0"

        android:toXDelta="100%p" />

    <alpha

        android:duration="500"

        android:fromAlpha="1.0"

        android:toAlpha="0.1" />

</set>

3、实现图片轮播切换的类为ImageFlipperShadeActivity.java，其内容为：

/**

 * 

 */

package com.i114gbox.aglieguy;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.PixelFormat;

import android.os.Bundle;

import android.os.Handler;

import android.view.Gravity;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.WindowManager;

import android.view.WindowManager.LayoutParams;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.ViewFlipper;

import com.i114gbox.sdk.activity.I114gBoxActivity;

import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;

import com.i114gbox.sdk.utils.I114gBoxLogUtils;

import com.i114gbox.sdk.utils.I114gBoxResourceUtils;

/**

 * 图片滑动渐变Activity

 * 

 * @author SJC

 * 

 */

public class ImageFlipperShadeActivity extends I114gBoxActivity {

private static String TAG = "ImageFlipperShadeActivity";

private Context ctx = null;

private ViewFlipper viewFlipper;// 视图轮播

private WindowManager windowManager;// 窗口管理器

private WindowManager.LayoutParams layoutParams;// 布局参数

private boolean isHide;

private int mAlpha = 0;

// 左边图片视图

private ImageView leftImageView;

// 右边图片视图

private ImageView rightImageView;

private int WHAT_HIDE = 0;

private int WHAT_SHOW = 1;

@Override

protected void onCreate(Bundle savedInstanceState) {

I114gBoxLogUtils.d(TAG, "The onCreate method execute.");

super.onCreate(savedInstanceState);

I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activity

ctx = this;

setContentView(I114gBoxResourceUtils.getLayoutId(ctx,

"activity_image_flipper_shade"));

viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(

ctx, "vf_image_flipper_shade"));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_01")));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_02")));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_03")));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_04")));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_05")));

viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_06")));

Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(

ctx, "btn_image_flipper_shade_back"));

backButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

initImageButtonView();// 初始化ImageButton视图

}

/** 添加ImageView控件 **/

private View addImageView(int id) {

ImageView imageView = new ImageView(this);

imageView.setImageResource(id);

return imageView;

}

/** 初始化ImageButton视图 **/

private void initImageButtonView() {

windowManager = (WindowManager) ctx

.getSystemService(Context.WINDOW_SERVICE);

layoutParams = new WindowManager.LayoutParams();

// 设置窗口类型

layoutParams.type = LayoutParams.TYPE_PHONE;

// 设置图片格式，效果为背景透明

layoutParams.format = PixelFormat.RGBA_8888;

// 设置FLAG参数，触摸失效或无法获取焦点

layoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL

| LayoutParams.FLAG_NOT_FOCUSABLE;

// 初始化话坐标值

layoutParams.x = 0;

layoutParams.y = 0;

// 设置窗口的宽度和高度

layoutParams.width = 50;

layoutParams.height = 50;

// 创建左边和右边按钮

createLeftButtonView();

createRightButtonView();

}

/** 创建左边按钮 **/

private void createLeftButtonView() {

leftImageView = new ImageView(ctx);

leftImageView.setBackgroundResource(I114gBoxResourceUtils

.getDrawableId(ctx, "flipper_left"));

leftImageView.setAlpha(0);// 完全透明

// 添加点击监听事件

leftImageView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 设置进入屏幕的动画

viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,

I114gBoxResourceUtils.getAnimId(ctx, "push_left_in")));

// 设置退出屏幕的动画

viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,

I114gBoxResourceUtils.getAnimId(ctx, "push_left_out")));

// 显示下一个图层

viewFlipper.showNext();

}

});

// 设置布局为左边垂直居中

layoutParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;

// 将左边按钮添加到窗口中

windowManager.addView(leftImageView, layoutParams);

}

/** 创建右边按钮 **/

private void createRightButtonView() {

rightImageView = new ImageView(ctx);

rightImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(

ctx, "flipper_right"));

rightImageView.setAlpha(0);// 完全透明

// 添加点击监听事件

rightImageView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 设置进入屏幕的动画

viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,

I114gBoxResourceUtils.getAnimId(ctx, "push_right_in")));

// 设置退出屏幕的动画

viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,

I114gBoxResourceUtils.getAnimId(ctx, "push_right_out")));

// 显示上一个图层

viewFlipper.showPrevious();

}

});

// 设置布局为右边垂直居中

layoutParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;

// 将右边按钮添加到窗口中

windowManager.addView(rightImageView, layoutParams);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

I114gBoxLogUtils.d(TAG, "The onTouchEvent method execute.");

switch (event.getAction()) {

// 移动事件

case MotionEvent.ACTION_MOVE:

break;

// 按下事件

case MotionEvent.ACTION_DOWN:

// 显示ImageButton视图

showImageButtonView();

break;

// 按下后松开事件

case MotionEvent.ACTION_UP:

// 隐藏ImageButton视图

hideImageButtonView();

break;

default:

break;

}

return true;

}

/** 显示ImageButton视图 **/

private void showImageButtonView() {

isHide = true;

mHandler.sendEmptyMessage(WHAT_SHOW);

}

/** 隐藏ImageButton视图 **/

private void hideImageButtonView() {

new Thread() {

@Override

public void run() {

try {

Thread.sleep(1500);

isHide = false;

mHandler.sendEmptyMessage(WHAT_HIDE);

} catch (InterruptedException e) {

I114gBoxLogUtils.e(TAG, e.getMessage());

}

};

}.start();

}

/** 处理异步消息 **/

@SuppressLint("HandlerLeak")

private Handler mHandler = new Handler() {

@Override

public void handleMessage(android.os.Message msg) {

// 当接收到显示左右图片的消息时

if (msg.what == 1 && mAlpha < 255) {

mAlpha += 50;

if (mAlpha > 255)

mAlpha = 255;

// 设置透明度

leftImageView.setAlpha(mAlpha);

// 刷新视图

leftImageView.invalidate();

rightImageView.setAlpha(mAlpha);

rightImageView.invalidate();

if (!isHide && mAlpha < 255)

mHandler.sendEmptyMessageDelayed(WHAT_SHOW, 100);

}

// 当接收到隐藏左右图片的消息时

else if (msg.what == 0 && mAlpha > 0) {

mAlpha -= 10;

if (mAlpha < 0)

mAlpha = 0;

// 设置透明度

leftImageView.setAlpha(mAlpha);

// 刷新视图

leftImageView.invalidate();

rightImageView.setAlpha(mAlpha);

rightImageView.invalidate();

if (isHide && mAlpha > 0)

mHandler.sendEmptyMessageDelayed(WHAT_HIDE, 100);

}

};

};

@Override

protected void onDestroy() {

I114gBoxLogUtils.d(TAG, "The onDestory method execute.");

super.onDestroy();

// 移除ImageView控件

windowManager.removeView(leftImageView);

windowManager.removeView(rightImageView);

};

}