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

前端技术 2023/09/01 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);
};
}

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

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

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

本文地址：https://www.stayed.cn/item/2126

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)