经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
【Android初级】如何实现一个比相册更高大上的左右滑动特效（附源码）
来源：cnblogs　　作者：snowyeti　　时间：2021/2/18 14:52:03　　对本文有异议

在Android里面，想要实现一个类似相册的左右滑动效果，我们除了可以用Gallery、HorizontalScrollView、ViewPager等控件，还可以用一个叫做 ViewFlipper 的类来代替实现，它继承于 ViewAnimator。如见其名，这个类是跟动画有关，会将添加到它里面的两个或者多个View做一个动画，然后每次只显示一个子View，通过在 View 之间切换时执行动画，最终达到一个类似相册能左右滑动的效果。

本次功能要实现的两个基本效果

  1. 最基本的左右滑动效果
  2. 从屏幕的45度方向进入和退出的效果

实现思路

  1. 按照 ViewFlipper 的源码说明，它是将两个或多个View用动画展示出来。那么我就在 ViewFlipper 内放入两个布局，每个布局都包含一个 TextView 和 ImageView，分别用于显示文字和图片
  2. 既然要有动画效果，我准备使用Android的位移动画类 TranslateAnimation，设置起始的横纵坐标值
  3. 为了让效果明显，我会设置 ViewFlipper 的进入和退出屏幕的动画，并且在左滑时呈现一个动画、右滑时呈现另一个动画（需要判断是左滑还是右滑：重写 onTouchEvent 方法，比较横坐标X的值的变化）

源码如下：

1、主Activity

  1. // import语句省略
  2. public class ViewFlipperDemo extends Activity {
  3.     private static final String TAG = "ViewFlipperDemo";
  5.     private ViewFlipper mViewFlipper;
  6.     private float mOldTouchValue;
  8.     @Override
  9.     protected void onCreate(Bundle onSavedInstance) {
  10.         super.onCreate(onSavedInstance);
  12.         // 设置为全屏
  13.         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
  14.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  15.         setContentView(R.layout.view_flipper_demo);
  16.         mViewFlipper = findViewById(R.id.viewFlipper1);
  17.     }
  19.     @Override
  20.     public boolean onTouchEvent(MotionEvent event) {
  21.         switch (event.getAction()) {
  22.             case MotionEvent.ACTION_DOWN:
  23.                 mOldTouchValue = event.getX();
  24.                 break;
  26.                 case MotionEvent.ACTION_UP:
  27.                     float currentX = event.getX();
  29.                     // 手指向右滑动: 手指向右滑动时横坐标 X 的值会变大，因此 currentX 的值更大
  30.                     if (mOldTouchValue < currentX) {
  32.                         // 进入屏幕的动效
  33.                         mViewFlipper.setInAnimation(AnimationHelper.inFromLeftAnimation());
  35.                         // 退出屏幕的动效
  36.                         mViewFlipper.setOutAnimation(AnimationHelper.outToRightAnimation());
  37.                         mViewFlipper.showNext();
  38.                     }
  40.                     // 横坐标的值变小，说明是左滑
  41.                     if (mOldTouchValue > currentX) {
  43.                         // 进入屏幕的动效
  44.                         mViewFlipper.setInAnimation(AnimationHelper.inFromRightAnimation());
  46.                         // 退出屏幕的动效
  47.                         mViewFlipper.setOutAnimation(AnimationHelper.outToLeftAnimation());
  48.                         mViewFlipper.showPrevious();
  49.                     }
  50.                     break;
  52.                 default:
  53.                     break;
  54.         }
  55.         return super.onTouchEvent(event);
  56.     }
  57. }

2、对应的布局文件 view_flipper_demo.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.               android:layout_width="match_parent"
  3.               android:layout_height="match_parent"
  4.               android:orientation="vertical">
  6.     <TextView android:layout_width="match_parent"
  7.               android:layout_height="wrap_content"
  8.               android:textColor="@color/colorBlack"
  9.               android:gravity="center"
  10.               android:text="这是一个ViewFlipper样例"
  11.               android:paddingTop="20dp"/>
  13.     <ViewFlipper android:layout_width="match_parent"
  14.                  android:layout_height="match_parent"
  15.                  android:id="@+id/viewFlipper1">
  17.         <LinearLayout android:layout_width="match_parent"
  18.                       android:layout_height="match_parent"
  19.                       android:orientation="vertical"
  20.                       android:gravity="center">
  22.             <TextView android:layout_width="match_parent"
  23.                       android:layout_height="wrap_content"
  24.                       android:textColor="@color/colorBlue"
  25.                       android:gravity="center"
  26.                       android:text="这是第一个ViewFlipper页面"/>
  28.             <ImageView android:layout_width="wrap_content"
  29.                        android:layout_height="wrap_content"
  30.                        android:src="@drawable/avasterdr"/>
  32.         </LinearLayout>
  34.         <LinearLayout android:layout_width="match_parent"
  35.                       android:layout_height="match_parent"
  36.                       android:orientation="vertical"
  37.                       android:gravity="center" >
  39.             <TextView android:layout_width="match_parent"
  40.                       android:layout_height="wrap_content"
  41.                       android:textColor="@color/colorBlue"
  42.                       android:gravity="center"
  43.                       android:text="这是第二个ViewFlipper页面"/>
  45.             <ImageView android:layout_width="wrap_content"
  46.                        android:layout_height="wrap_content"
  47.                        android:src="@drawable/avastertony"/>
  49.         </LinearLayout>
  51.     </ViewFlipper>
  53. </LinearLayout>

3、动画辅助类 AnimationHelper.java

  1. public class AnimationHelper {
  3.     // 左滑的进入动画
  4.     public static Animation inFromRightAnimation() {
  5.         Animation inFromRight = new TranslateAnimation(
  6.                 Animation.RELATIVE_TO_PARENT,
  7.                 1.0f,
  8.                 Animation.RELATIVE_TO_PARENT,
  9.                 0.0f,
  10.                 Animation.RELATIVE_TO_PARENT,
  11.                 0.0f,
  12.                 Animation.RELATIVE_TO_PARENT,
  13.                 0.0f);
  14.         inFromRight.setDuration(500);
  15.         inFromRight.setInterpolator(new AccelerateInterpolator());
  16.         return inFromRight;
  17.     }
  19.     // 左滑的退出动画
  20.     public static Animation outToLeftAnimation() {
  21.         Animation outToLeft = new TranslateAnimation(
  22.                 Animation.RELATIVE_TO_PARENT,
  23.                 0.0f,
  24.                 Animation.RELATIVE_TO_PARENT,
  25.                 -1.0f,
  26.                 Animation.RELATIVE_TO_PARENT,
  27.                 0.0f,
  28.                 Animation.RELATIVE_TO_PARENT,
  29.                 0.0f);
  30.         outToLeft.setDuration(500);
  31.         outToLeft.setInterpolator(new AccelerateInterpolator());
  32.         return outToLeft;
  33.     }
  35.     // 右滑的进入动画
  36.     public static Animation inFromLeftAnimation() {
  37.         Animation inFromLeft = new TranslateAnimation(
  38.                 Animation.RELATIVE_TO_PARENT,
  39.                 -1.0f,
  40.                 Animation.RELATIVE_TO_PARENT,
  41.                 0.0f,
  42.                 Animation.RELATIVE_TO_PARENT,
  43.                 0.0f,
  44.                 Animation.RELATIVE_TO_PARENT,
  45.                 0.0f);
  46.         inFromLeft.setDuration(500);
  47.         inFromLeft.setInterpolator(new AccelerateInterpolator());
  48.         return inFromLeft;
  49.     }
  51.     // 右滑的退出动画
  52.     public static Animation outToRightAnimation() {
  53.         Animation outToRight = new TranslateAnimation(
  54.                 Animation.RELATIVE_TO_PARENT,
  55.                 0.0f,
  56.                 Animation.RELATIVE_TO_PARENT,
  57.                 1.0f,
  58.                 Animation.RELATIVE_TO_PARENT,
  59.                 0.0f,
  60.                 Animation.RELATIVE_TO_PARENT,
  61.                 0.0f);
  62.         outToRight.setDuration(500);
  63.         outToRight.setInterpolator(new AccelerateInterpolator());
  64.         return outToRight;
  65.     }
  66. }

4、对应的效果图如下

可以看到，这个左右滑动效果没有任何酷炫的地方。我们不妨先来看看跟动画相关的几个重点地方：

（1）函数 setInAnimation：是指 View 进入屏幕的动效

（2）函数 setOutAnimation：是指 View 退出屏幕的动效

（3）TranslateAnimation的构造函数的参数解释：

1、fromXType/toXType/fromYType/toYType，取值共有三个：

  • Animation.ABSOLUTE
  • Animation.RELATIVE_TO_SELF
  • Animation.RELATIVE_TO_PARENT

我这里用的是 Animation.RELATIVE_TO_PARENT，当传入该参数时，其余几个坐标值需要传入百分比参数（1.0表示100%）；如果传入 Animation.ABSOLUTE，坐标值需要传入屏幕上的绝对位置（比如1000,1000）

2、fromXValue：起点的横坐标值

3、toXValue：终点的横坐标值

4、fromYValue：起点的纵坐标值

5、toYValue：终点的纵坐标值

如果我们想让这个效果变成45度从屏幕的四个角进入和退出，那代码就应该这么写（注意代码中传入的 4 个横纵坐标值）：

  1. // 左滑的进入动画
  2. public static Animation inFromRightAnimation() {
  3.     Animation inFromRight = new TranslateAnimation(
  4.             Animation.RELATIVE_TO_PARENT,
  5.             1.0f,
  6.             Animation.RELATIVE_TO_PARENT,
  7.             0.0f,
  8.             Animation.RELATIVE_TO_PARENT,
  9.             -1.0f,
  10.             Animation.RELATIVE_TO_PARENT,
  11.             0.0f);
  12.     inFromRight.setDuration(500);
  13.     inFromRight.setInterpolator(new AccelerateInterpolator());
  14.     return inFromRight;
  15. }
  17. // 左滑的退出动画
  18. public static Animation outToLeftAnimation() {
  19.     Animation outToLeft = new TranslateAnimation(
  20.             Animation.RELATIVE_TO_PARENT,
  21.             0.0f,
  22.             Animation.RELATIVE_TO_PARENT,
  23.             -1.0f,
  24.             Animation.RELATIVE_TO_PARENT,
  25.             0.0f,
  26.             Animation.RELATIVE_TO_PARENT,
  27.             1.0f);
  28.     outToLeft.setDuration(500);
  29.     outToLeft.setInterpolator(new AccelerateInterpolator());
  30.     return outToLeft;
  31. }
  33. // 右滑的进入动画
  34. public static Animation inFromLeftAnimation() {
  35.     Animation inFromLeft = new TranslateAnimation(
  36.             Animation.RELATIVE_TO_PARENT,
  37.             -1.0f,
  38.             Animation.RELATIVE_TO_PARENT,
  39.             0.0f,
  40.             Animation.RELATIVE_TO_PARENT,
  41.             -1.0f,
  42.             Animation.RELATIVE_TO_PARENT,
  43.             0.0f);
  44.     inFromLeft.setDuration(500);
  45.     inFromLeft.setInterpolator(new AccelerateInterpolator());
  46.     return inFromLeft;
  47. }
  49. // 右滑的退出动画
  50. public static Animation outToRightAnimation() {
  51.     Animation outToRight = new TranslateAnimation(
  52.             Animation.RELATIVE_TO_PARENT,
  53.             0.0f,
  54.             Animation.RELATIVE_TO_PARENT,
  55.             1.0f,
  56.             Animation.RELATIVE_TO_PARENT,
  57.             0.0f,
  58.             Animation.RELATIVE_TO_PARENT,
  59.             1.0f);
  60.     outToRight.setDuration(500);
  61.     outToRight.setInterpolator(new AccelerateInterpolator());
  62.     return outToRight;
  63. }

对应的效果如下：

之所以有 -1.0f 这个值，是因为屏幕上的横纵坐标值的分布可以用如下象限来表示：

ViewFlipper中的 View 就位于象限的中心位置。因此，如果动画从左上角进入，那么它的起始横纵坐标就是（-1，-1）。大家可以按照这个思路去实现自己想要的动效。

欢迎交流~

原文链接：http://www.cnblogs.com/snowyeti/p/14364658.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号