ANDROID中使用VIEWFLIPPER类实现屏幕切换(关于坐标轴的问题已补充更改)

屏幕切换指的是在同一个Activity内屏幕间的切换,ViewFlipper继承了Framelayout类,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。如下动图:

该类有如下几个和动画相关的函数:

  • setInAnimation:设置View进入屏幕时候使用的动画,该函数有两个版本,一个接受单个参数,类型为android.view.animation.Animation;一个接受两个参数,类型为Context和int,分别为Context对象和定义Animation的resourceID。
  • setOutAnimation: 设置View退出屏幕时候使用的动画,参数setInAnimation函数一样。
  • showNext: 调用该函数来显示FrameLayout里面的下一个View。
  • showPrevious: 调用该函数来显示FrameLayout里面的上一个View。

下面通过坐标轴的形式为大家演示动画实现方式:

由上图可知,以屏幕左下角为数学坐标轴的原点,屏幕下边框为X轴,左边框为Y轴,当前屏幕显示为图二,如果要看图一,则需要图一由左至右(相对屏幕而言)进入屏幕,图一X轴初始坐标为-100%p,移动到屏幕位置时图一X轴变为0(因为本次演示为横向滑动,所以不涉及Y轴);同理图三要进入屏幕,则需由右至左,X轴由100%p变为0.清楚了坐标位置,我们要实现四种动画效果,就会很简单,下面代码(需建立在res目录下自建的anim文件夹下)演示四种动画效果:

in_leftright.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"/>
</set>
out_leftright.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"/>
</set>

in_rightleft.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"/>

</set>

out_rightleft.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"/>
</set>

动画效果建立完成,建立

Layout中view_layout.xml布局文件(本次直接将定义动画的三张图片直接通过LinearLayOut布局到ViewFlipper中):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ViewFlipper
    android:id="@+id/vf"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/sample_1" />
    </LinearLayout>
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/sample_2" />
    </LinearLayout>
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/sample_3" />
    </LinearLayout>
  </ViewFlipper>
</LinearLayout>

Activity中Java功能实现代码:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ViewFlipper;
/**
 * Created by panchengjia on 2016/11/28.
 */
public class FlipperActivity extends AppCompatActivity implements View.OnTouchListener{
  private ViewFlipper vf;
  float startX;//声明手指按下时X的坐标
  float endX;//声明手指松开后X的坐标
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.viewflipper_layout);
    vf= (ViewFlipper) findViewById(R.id.vf);
    vf.setOnTouchListener(this);
  }
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    //判断捕捉到的动作为按下,则设置按下点的X坐标starX
    if(event.getAction()==MotionEvent.ACTION_DOWN){
      startX=event.getX();
      //判断捕捉到的动作为抬起,则设置松开点X坐标endX
    }else if(event.getAction()==MotionEvent.ACTION_UP){
      endX=event.getX();
      //由右到左滑动屏幕,X值会减小,图片由屏幕右侧进入屏幕
      if(startX>endX){
        //进出动画成对
        vf.setInAnimation(this,R.anim.in_rightleft);
        vf.setOutAnimation(this,R.anim.out_rightleft);
        vf.showNext();//显示下个view
        //由左到右滑动屏幕,X值会增大,图片由屏幕左侧进入屏幕
      }else if(startX<endX){
        vf.setInAnimation(this,R.anim.in_leftright);
        vf.setOutAnimation(this,R.anim.out_leftright);
        vf.showPrevious();//显示上个view
      }
    }
    return true;
  }
}

在练习这里时,动画的显示效果方式困扰了我好久,这才想到了通过坐标轴的形式体现动画实现原理,画成的那一瞬间,整个人顿似醍醐灌顶,忍不住想要写成博文分享给大家,共勉!

后续更改补充:发文后,好友提醒在安卓开发中Android屏幕坐标系统,不同于一般数学模型,原点应该位于左上角且Y轴向下递增,经过查阅资料,确实如此,现更改坐标轴如下: 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android ViewFlipper用法实例分析

    本文实例讲述了Android ViewFlipper用法.分享给大家供大家参考,具体如下: 这里实现的效果是当手动滑动手机屏幕时会一个一个地显示图片,一次显示一张图片 package com.my.viewflippertest; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.GestureDetector.OnGest

  • 解析Android中实现滑动翻页之ViewFlipper的使用详解

    1)View切换的控件-ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类.而ViewAnimator类继承于FrameLayout. 查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果.该类有如下几个和动画相关的方法. setInAnimation:设置View进入屏幕时候使用的动画.该方法有两个重载方法,即可以直接传入Animation对象,也可以传入定义的Animation文件的resourceID. setOut

  • Android中利用viewflipper动画切换屏幕效果

    整个项目的 package com.example.viewflipper; import android.R.integer; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.GestureDetector.OnDoubleTapListener; import android.view.Menu; import android.view.Me

  • Android使用ViewFlipper实现图片切换功能

    今天给大家简单的讲一下Android手势,目前市场上的App中手势的运用比较少. Android提供了两种手势: ①.Android提供了手势检测,并为手势检测提供了相应的监听器 ②.Android允许开发者添加手势,并提供了相应的API识别用户手势 在之前的一片博客我讲过如何使用ViewPager实现图片滑动切换 地址:Android使用ViewPager实现图片滑动预览效果 但是ViewPager拥有自带的手势识别,意思就是它会自动识别手势是右滑还是左滑. 今天我讲一下如何使用ViewFli

  • Android中使用ViewFlipper进行手势切换实例

    本文实例讲述了Android中使用ViewFlipper进行手势切换的方法,分享给大家供大家参考.具体实现步骤如下: 首先在layout的xml文件中定义一个ViewFlipper: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android" 

  • Android ViewFlipper翻转视图使用详解

    简介 ViewFlipper是Android自带的一个多页面管理控件且可以自动播放!它和ViewPager有所不同,ViewPager继承自ViewGroup,是一页一页的,可以带动画效果,可以兼容低版本:而ViewFlipper继承ViewAnimator,是一层一层的,切换View的时候可以设置动画效果,是Android 4.0才引入的新控件.使用场景和ViewPager基本一样,在很多时候都是用来实现进入应用后的引导页或者用于图片轮播显示. 常用方法 setInAnimation:View

  • Android中ViewFlipper的使用及设置动画效果实例详解

    本文实例讲述了Android中ViewFlipper的使用及设置动画效果.分享给大家供大家参考,具体如下: 说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果.这里做下ViewFliper实现左右滑动的效果. 会用到以下的技术: 1.ViewFlipper 2.GestureDetector 3.Animation 主要是这三个类在起作用. ViewFlipper,不妨把它看做一个容器吧,你可以把许多的View放在这个容

  • Android ViewFlipper简单用法解析

    ViewFlipper和ViewPager挺像的,都是一个view容器.内部可以添加多个view,只是viewpager可以通过左右滑动来切换view,而viewFlipper则没有这个功能,所以需要在它上面监听手势.比较方便的是它不用使用适配器就能添加view,所以比较方便. 首先在布局文件中定义这个控件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&qu

  • Android TextSwitcher文本切换器和ViewFlipper使用详解

    本文为大家分享了Android TextSwitcher文本切换器的使用,供大家参考,具体内容如下 1.TextSwitcher 使用: 应用分为三步: 1.得到 TextSwitcher 实例对象   TextSwitcher switcher = (TextSwitcher) findViewById(R.id.textSwitcher); 2.为switcher指定ViewSwitcher.ViewFactory工厂,该工厂会产生出转换时需要的View   switcher.setFact

  • Android仿淘宝头条向上滚动广告条ViewFlipper

    所谓前人栽树,后人乘凉,在此感谢博主的贡献. 参考博文: 仿淘宝首页的淘宝头条View垂直滚动 欢迎关注我的微信公众号 不只是原创技术文章,更多的是对生活的思考总结 我在博主的基础上做了如下工作: 修复了滚动条第二条点击事件无法触发这个bug: 充分简化了自定义ViewFlipper类的代码: 添加了直接使用ViewFlipper控件实现同样效果: 先上效果图: 这里使用了一个比较少用的控件:ViewFlipper 学习一个未知的东西,第一步就是要搞懂what:学的这个东西是什么以及能够实现什么

随机推荐