Android实现图片轮播切换实例代码

利用android的viewflipper和animationutils实现图片带有动画的轮播切换，其中当点击“上一张”图片时，切换到上一张图片；当点击“下一张”图片时，切换到下一张图片。其效果图如下：

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

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>

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

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>

实现图片轮播切换的类为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);
};
}

友情提醒大家需要注意事项如下：

需要设置windowmanager的属性，包含type、format和flags等等创建左右边图片动画加载效果，并实现ontouchevent事件，其中motionevent.action_down为按下监听事件，motionevent.action_up为按下后松开事件

以上是本文给大家叙述的android实现图片轮播切换实例代码，希望可以帮助到大家。