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

 更新时间:2016年11月29日 08:24:40   作者:潘侯爷  
本篇文章主要介绍了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轴向下递增,经过查阅资料,确实如此,现更改坐标轴如下: 

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

相关文章

  • Android 布局中的android:onClick的使用方法总结

    Android 布局中的android:onClick的使用方法总结

    这篇文章主要介绍了Android 布局中的android:onClick的使用方法总结的相关资料,设置点击时从上下文中调用指定的方法,这里提供实例帮助大家理解这部分内容,需要的朋友可以参考下
    2017-08-08
  • Android Glide的简单使用

    Android Glide的简单使用

    本文主要介绍了Glide简单使用。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Android TabHost选项卡标签图标始终不出现的解决方法

    Android TabHost选项卡标签图标始终不出现的解决方法

    这篇文章主要介绍了Android TabHost选项卡标签图标始终不出现的解决方法,涉及Android界面布局相关属性与状态设置操作技巧,需要的朋友可以参考下
    2019-03-03
  • Android检测Cursor泄漏的原理以及使用方法

    Android检测Cursor泄漏的原理以及使用方法

    本文介绍如何在 Android 检测 Cursor 泄漏的原理以及使用方法,还指出几种常见的出错示例,同时该方法同样适合于其他需要检测资源泄露的情况,感兴趣的朋友可以了解下
    2013-01-01
  • Kotlin使用滚动控件RecyclerView实例教程

    Kotlin使用滚动控件RecyclerView实例教程

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
    2022-12-12
  • Android Flutter实现上拉加载组件的示例代码

    Android Flutter实现上拉加载组件的示例代码

    既然列表有下拉刷新外当然还有上拉加载更多操作了,本次就为大家详细介绍如何利用Flutter实现为列表增加上拉加载更多的交互,感兴趣的可以了解一下
    2022-08-08
  • Android自定义View实现带4圆角或者2圆角的效果

    Android自定义View实现带4圆角或者2圆角的效果

    这篇文章主要介绍了Android自定义View实现带4圆角或者2圆角的效果,本文通过实例代码截图给大家展示的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • mui.init()与mui.plusReady()区别和关系

    mui.init()与mui.plusReady()区别和关系

    给大家分享一下在使用MUI进行APP开发的时候,mui.init()与mui.plusReady()区别以及使用上不同之处。
    2017-11-11
  • Kotlin协程之Flow触发与消费示例解析

    Kotlin协程之Flow触发与消费示例解析

    Kotlin协程中,当需要消费流时,会调用collect方法,触发流的消费,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • Android中Binder IPC机制介绍

    Android中Binder IPC机制介绍

    大家好,本篇文章主要讲的是Android中Binder IPC机制介绍,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下,方便下次浏览
    2021-12-12

最新评论