Android实现左右滑动效果

最新推荐文章于 2024-05-29 20:56:23 发布
最新推荐文章于 2024-05-29 20:56:23 发布
阅读量1.6k 收藏
点赞数
分类专栏： Android 文章标签： android 左右滑动 切换图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i114gbox/article/details/21658967
版权

利用Android的ViewFlapper和OnGestureListener实现图片的左右滑动功能，其中当图片播放到最后一张时，会切换到第一张图片，效果图如下：


1、设置布局文件activity_image_flipper.xml，其中使用到ViewFlipper控件，内容如下：

<?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_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_image_flipper_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_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/image_flipper"
            android:textColor="@color/textColor"
            android:textSize="30sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <LinearLayout
        android:id="@id/ll_image_flipper_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/rl_image_flipper_title"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:orientation="vertical" >

        <ViewFlipper
            android:id="@id/vf_image_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

</RelativeLayout>

2、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>

3、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>

4、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>

5、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>

6、 加载布局文件和动画文件的类ImageFlipperActivity.java，其源码内容为： 

/**
 * 
 */
package com.i114gbox.aglieguy;

import android.content.Context;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
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 ImageFlipperActivity extends I114gBoxActivity implements
		OnGestureListener {
	private static String TAG = "ImageFlipperActivity";
	private Context ctx = null;

	private GestureDetector gestureDetector;// 手势监听
	private ViewFlipper viewFlipper;// 视图轮播

	@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"));
		gestureDetector = new GestureDetector(this);
		viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(
				ctx, "vf_image_flipper"));
		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")));

		// viewFlipper.addView(addImageView(R.drawable.one));
		// viewFlipper.addView(addImageView(R.drawable.two));
		// viewFlipper.addView(addImageView(R.drawable.three));
		// viewFlipper.addView(addImageView(R.drawable.four));
		// viewFlipper.addView(addImageView(R.drawable.five));

		Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(
				ctx, "btn_image_flipper_back"));
		backButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				finish();
			}
		});
	}

	/** 添加ImageView控件 **/
	private View addImageView(int id) {
		ImageView imageView = new ImageView(this);
		imageView.setImageResource(id);
		return imageView;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		I114gBoxLogUtils.d(TAG, "The onTouchEvent method execute.");
		return gestureDetector.onTouchEvent(event);
	}

	@Override
	public boolean onDown(MotionEvent e) {
		I114gBoxLogUtils.d(TAG, "The onDown method execute.");
		return false;
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		I114gBoxLogUtils.d(TAG, "The onFling method execute.");
		I114gBoxLogUtils.i(TAG, "e1.x:" + e1.getX() + "|" + "e2.x:" + e2.getX()
				+ "|" + "velocityX:" + velocityX + "|" + "velocityY:"
				+ velocityY);
		if (e1.getX() - e2.getX() > 120) {
			this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,
					R.anim.push_left_in));// 进入屏幕的动画
			this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,
					R.anim.push_left_out));// 离开屏幕的动画
			this.viewFlipper.showNext();// 手动显示下一个视图
			return true;
		} else if (e1.getX() - e2.getX() < -120) {
			this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,
					R.anim.push_right_in));
			this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,
					R.anim.push_right_out));
			this.viewFlipper.showPrevious();// 手动显示前一个视图
			return true;
		}

		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
		I114gBoxLogUtils.d(TAG, "The onLongPress method execute.");
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		I114gBoxLogUtils.d(TAG, "The onScroll method execute.");
		I114gBoxLogUtils.i(TAG, "e1.X:" + e1.getX() + "|" + "e2.X:" + e2.getX()
				+ "|" + "distanceX:" + distanceX + "|" + "distanceY:"
				+ distanceY);
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
		I114gBoxLogUtils.d(TAG, "The onShowPress method execute.");
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		I114gBoxLogUtils.d(TAG, "The onSingleTapUp method execute.");
		return false;
	}

}
注意：

scale：渐变尺寸的动画效果；

rotate：画面转换位置移动动画效果；

alpha：渐变透明度动画效果；

translate：画面转换位置动画效果

其中实现OnGestureListener接口中的方法，执行顺序为：onTouchEvent()->onDown()->onTouchEvent()->onScroll()->onTouchEvent()->onScroll()->onFling()

因项目正在完善中，故源码还没上传，一旦完成会立马上传！微笑

请大家多多关注

https://play.google.com/store/apps/details?id=com.i114gbox.aglieguy&hl=zh-CN

3Q


shenjichao2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
android左右滑动
07-25
android页面左右滑动效果,很不错的其中一种
Android实现左右滑动效果的方法详解
09-05
在Android开发中，实现左右滑动效果是一种常见的交互方式，特别是在设计滑动浏览图片或页面切换的场景下。本文将详细解析如何在Android应用中创建一个简单的左右滑动功能，这里我们将使用`ViewFlipper`组件来实现这...
（转载）Android工具类：实现左右滑动页面
最新发布
X154150的博客
05-29 178
ViewGroup 左右滑动页面
Android实现左右滑动指引效果
weixin_34062329的博客
04-07 179
　　本文介绍Android中实现左右滑动的指引效果。   　　关于左右滑动效果，我在以前的一篇博文中提到过，有兴趣的朋友可以查看：http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html    　　如果想实现带渐显按钮的左右滑动效果，请访问博文：http://www.cnblogs.com/hanyonglu/arch...
android之ViewFlipper实现左右滑动动画效果
fso918的专栏
03-13 851
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。 以下会会用到的技术有： 1、ViewFlipper 2、G
[Android]左右滑屏的实现
蚁人日记
04-19 869
本文出自:http://blog.csdn.net/sodino/article/details/7211049 先上效果图： 实现“左右滑屏”核心类是Scroller，将View中的内容左右滚动从而实现滑屏效果。关键方法有： scroller.scrollTo(x,y): 直接将View中的内容滚动到指定的(x,y)位置。 scroller.scrollTo
android实现切换日期左右无限滑动效果
08-28
Android 开发中，实现自定义的日期无限左右滑动效果是一种常见的需求。以下是 Android 实现切换日期左右无限滑动效果的知识点总结： 一、自定义日期控件 在 Android 中，可以使用自定义的日期控件来实现日期左右...
Android HorizontalScrollView左右滑动效果
08-31
在本文中，我们将深入探讨HorizontalScrollView的原理、使用方法以及如何实现左右滑动的效果。 一、HorizontalScrollView概述 HorizontalScrollView本质上是一个特殊的FrameLayout，它的主要特点是支持水平方向的...
Android实现图片左右滑动效果
09-01
【Android实现图片左右滑动效果】在移动应用开发中，滑动操作是非常常见的交互方式，尤其是在Android平台上。本文主要讲解如何在Android应用中实现在图片之间进行左右滑动的切换效果，为用户提供流畅的浏览体验。 ...
android 实现左右滑动
lujianfeiccie2009的专栏
06-12 787
效果概览： Circle indicator picture1 picture2 Title indicator: Picture1 Picture2 Different View: Picture1 Picture2 AsyncDataLoading Pictur
Android页面左右滑动
11-22
Android页面左右滑动，ViewPager的简单应用。Android页面左右滑动，ViewPager的简单应用。
Android左右菜单滑动
04-09
这是一个可以从左，或右端滑出菜单，菜单中可以添加ListView，并写了个公共控件来处理上下，左右手势处理，避免冲突。
Android实现界面左右滑动切换功能
08-31
相信大家一定都使用过手机QQ和微信之类的软件，当我们使用时不难发现其界面的切换不仅可以通过点击页标签来实现，还可以通过左右滑动来实现的，下面小编给大家介绍下如何实现这个功能
Android实现左右滑动页面
自我学习 自我整理
04-06 445
public class TestHD extends Activity implements OnGestureListener, OnDoubleTapListener   @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) ...
android 实现页面左右滑动
gmxstar的专栏
01-16 294
通过Button实现页面的左右滑动切换   public class jipiao extends Activity {    /** Called when the activity is first created. */            @Override    public void onCreate(Bundle savedInstanceState) {           ...
android 左右滑动效果实现
aieasy_rong的专栏
05-13 389
原文地址：http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html 主要用到了 android-support-v4.jar
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值