多语言展示
当前在线:351今日阅读:113今日分享:31

Android实现图片轮播切换

利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击“上一张”图片时,切换到上一张图片;当点击“下一张”图片时,切换到下一张图片。其效果图如下:
工具/原料
1

ViewFlipper类和WindowManager类

2

animation动画效果translate和alpha

方法/步骤
1

设置布局文件,其内容如下:activity_image_flipper_shade.xml                                       

2

动画效果配置文件,其内容如下:A.push_left_in.xml(从左边进入屏幕)                        B.push_left_out.xml(从左边退出屏幕)        C.push_right_in.xml(从右边进入屏幕)        D.push_right_out.xml(从右边退出屏幕)       

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); };}

注意事项
1

需要设置WindowManager的属性,包含type、format和flags等等

2

创建左右边图片动画加载效果,并实现onTouchEvent事件,其中MotionEvent.ACTION_DOWN为按下监听事件,MotionEvent.ACTION_UP为按下后松开事件

推荐信息