Android ViewFlipper触摸动画

简介:
 今天给大家介绍一下如何实现androd主页面的左右拖动效果。实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个View,手指向右快速滑动时跳转到下一个View,本例中使用图片作为各个View的页面,实现左右快速滑动显示不同的图片。
  
  首先来看看我们的layout,如下所示:
  
  <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android=" http://schemas.android.com/apk/res/android">
        <viewflipper android:id="@+id/flipper" android:layout_below="@+id/CockpitLayout" android:layout_height="fill_parent" android:layout_width="fill_parent">
                <include android:id="@+id/firstlayout" layout="@layout/first">
                <include android:id="@+id/secondlayout" layout="@layout/second">
                <include android:id="@+id/thirdlayout" layout="@layout/third">
                <include android:id="@+id/fourthlayout" layout="@layout/fourth">
        </include></include></include></include></viewflipper>
</linearlayout>

  如上所示,在ViewFlipper中放置多个layout(接下来会在不同的layout中来回滑动),ViewFlipper在同一个页面就显示其中一个layout。ViewFlipper中的四个layout很简单,我们就放置一张图片,如下所示:

<linearlayout android:gravity="center_vertical" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
  <imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/v1">
</imageview></linearlayout>

  接下来我们来看看Activity,我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。具体的代码如下所示,代码中都有相应的注释,这里就不再详述。

package com.ideasandroid.demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnTouchListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ViewFlipper;
public class ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{
        private ViewFlipper mFlipper;
        GestureDetector mGestureDetector;
        private int mCurrentLayoutState;
        private static final int FLING_MIN_DISTANCE = 100;
        private static final int FLING_MIN_VELOCITY = 200;

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                mFlipper = (ViewFlipper) findViewById(R.id.flipper);
                //注册一个用于手势识别的类
                mGestureDetector = new GestureDetector(this);
                //给mFlipper设置一个listener
                mFlipper.setOnTouchListener(this);
                mCurrentLayoutState = 0;
                //允许长按住ViewFlipper,这样才能识别拖动等手势
                mFlipper.setLongClickable(true);
        }

        /**
         * 此方法在本例中未用到,可以指定跳转到某个页面
         * @param switchTo
         */
        public void switchLayoutStateTo(int switchTo) {
                while (mCurrentLayoutState != switchTo) {
                        if (mCurrentLayoutState > switchTo) {
                                mCurrentLayoutState--;
                                mFlipper.setInAnimation(inFromLeftAnimation());
                                mFlipper.setOutAnimation(outToRightAnimation());
                                mFlipper.showPrevious();
                        } else {
                                mCurrentLayoutState++;
                                mFlipper.setInAnimation(inFromRightAnimation());
                                mFlipper.setOutAnimation(outToLeftAnimation());
                                mFlipper.showNext();
                        }

                }
                ;
        }

        /**
         * 定义从右侧进入的动画效果
         * @return
         */
        protected Animation inFromRightAnimation() {
                Animation inFromRight = new TranslateAnimation(
                                Animation.RELATIVE_TO_PARENT, +1.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f);
                inFromRight.setDuration(500);
                inFromRight.setInterpolator(new AccelerateInterpolator());
                return inFromRight;
        }

        /**
         * 定义从左侧退出的动画效果
         * @return
         */
        protected Animation outToLeftAnimation() {
                Animation outtoLeft = new TranslateAnimation(
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, -1.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f);
                outtoLeft.setDuration(500);
                outtoLeft.setInterpolator(new AccelerateInterpolator());
                return outtoLeft;
        }

        /**
         * 定义从左侧进入的动画效果
         * @return
         */
        protected Animation inFromLeftAnimation() {
                Animation inFromLeft = new TranslateAnimation(
                                Animation.RELATIVE_TO_PARENT, -1.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f);
                inFromLeft.setDuration(500);
                inFromLeft.setInterpolator(new AccelerateInterpolator());
                return inFromLeft;
        }

        /**
         * 定义从右侧退出时的动画效果
         * @return
         */
        protected Animation outToRightAnimation() {
                Animation outtoRight = new TranslateAnimation(
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, +1.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f,
                                Animation.RELATIVE_TO_PARENT, 0.0f);
                outtoRight.setDuration(500);
                outtoRight.setInterpolator(new AccelerateInterpolator());
                return outtoRight;
        }

        public boolean onDown(MotionEvent e) {
                // TODO Auto-generated method stub
                return false;
        }

        /*
         * 用户按下触摸屏、快速移动后松开即触发这个事件
         * e1:第1个ACTION_DOWN MotionEvent
         * e2:最后一个ACTION_MOVE MotionEvent
         * velocityX:X轴上的移动速度,像素/秒
         * velocityY:Y轴上的移动速度,像素/秒
         * 触发条件 :
         * X轴的坐标位移大于FLING_MIN_DISTANCE,且移动速度大于FLING_MIN_VELOCITY个像素/秒
         */
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                        float velocityY) {
                if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
                // 当像左侧滑动的时候
                        //设置View进入屏幕时候使用的动画
                        mFlipper.setInAnimation(inFromRightAnimation());
                        //设置View退出屏幕时候使用的动画
                        mFlipper.setOutAnimation(outToLeftAnimation());
                        mFlipper.showNext();
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
                    // 当像右侧滑动的时候
                        mFlipper.setInAnimation(inFromLeftAnimation());
                        mFlipper.setOutAnimation(outToRightAnimation());
                        mFlipper.showPrevious();
            }
                return false;
        }

        public void onLongPress(MotionEvent e) {
                // TODO Auto-generated method stub

        }

        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
                        float distanceY) {
                return false;
        }

        public void onShowPress(MotionEvent e) {
                // TODO Auto-generated method stub

        }

        public boolean onSingleTapUp(MotionEvent e) {
                // TODO Auto-generated method stub
                return false;
        }
        public boolean onTouch(View v, MotionEvent event) {
                // 一定要将触屏事件交给手势识别类去处理(自己处理会很麻烦的)
                return mGestureDetector.onTouchEvent(event);
        }
}

相关文章
|
Android开发 开发者
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
604 30
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
704 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
API Android开发 开发者
Android颜色渐变动画效果的实现
本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。
390 3
|
Android开发 开发者
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
573 65
|
XML Java Maven
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation &#39;com.github.Yufseven:JMWorkProgress:v1.0&#39;`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
383 26
|
XML Android开发 数据格式
Android中SlidingDrawer利用透明动画提示效果
本文介绍了在Android中使用`SlidingDrawer`实现带有透明动画提示效果的方法。通过XML布局配置`SlidingDrawer`的把手(handle)和内容(content),结合Activity中的代码实现动态动画效果。最终实现了交互性强、视觉效果良好的滑动抽屉功能。
172 1
Android中SlidingDrawer利用透明动画提示效果
|
XML Java Android开发
Android 动画之帧动画 + 补间动画 + 属性动画
本文介绍了Android开发中的三种动画类型:帧动画、补间动画和属性动画。帧动画通过依次播放一系列静态图片实现动态效果,支持Java代码与XML两种实现方式。补间动画基于起始和结束位置自动生成过渡效果,涵盖透明度、位移、旋转、缩放及组合动画等多种形式,并可搭配插值器优化动画过程。属性动画则通过改变对象属性实现动画,支持透明度、位移、旋转、缩放及组合动画,灵活性更高且适用于更复杂的场景。文中提供了详细的代码示例,帮助开发者快速上手。
585 15
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
228 0
Android自定义view之围棋动画(化繁为简)
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
280 0
|
XML Java API
Android翻转动画(卡片翻转效果)
本文介绍了如何实现卡片翻转动画效果,通过Android中的ObjectAnimator结合不同插值器(LinearInterpolator、AccelerateInterpolator、DecelerateInterpolator)完成平滑过渡。示例中以按钮点击触发动画,核心逻辑包括判断视图可见性、设置旋转角度及处理初始Bug(如第一次点击异常)。最终提供完整代码(Java与XML布局),并指出将按钮事件替换为屏幕监听即可满足右滑触发需求。适合初学者学习动画实现原理。
471 0

热门文章

最新文章