登录
当前位置： 首页 > 编程笔记 >

Android实现一个比相册更高大上的左右滑动特效（附源码）

太叔岳
2023-03-14
本文向大家介绍Android实现一个比相册更高大上的左右滑动特效（附源码），包括了Android实现一个比相册更高大上的左右滑动特效（附源码）的使用技巧和注意事项，需要的朋友参考一下

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

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

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

实现思路

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

源码如下：

1、主Activity

// import语句省略
public class ViewFlipperDemo extends Activity {
  private static final String TAG = "ViewFlipperDemo";

  private ViewFlipper mViewFlipper;
  private float mOldTouchValue;

  @Override
  protected void onCreate(Bundle onSavedInstance) {
    super.onCreate(onSavedInstance);

    // 设置为全屏
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.view_flipper_demo);
    mViewFlipper = findViewById(R.id.viewFlipper1);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        mOldTouchValue = event.getX();
        break;

        case MotionEvent.ACTION_UP:
          float currentX = event.getX();

          // 手指向右滑动: 手指向右滑动时横坐标 X 的值会变大，因此 currentX 的值更大
          if (mOldTouchValue < currentX) {

            // 进入屏幕的动效
            mViewFlipper.setInAnimation(AnimationHelper.inFromLeftAnimation());

            // 退出屏幕的动效
            mViewFlipper.setOutAnimation(AnimationHelper.outToRightAnimation());
            mViewFlipper.showNext();
          }

          // 横坐标的值变小，说明是左滑
          if (mOldTouchValue > currentX) {

            // 进入屏幕的动效
            mViewFlipper.setInAnimation(AnimationHelper.inFromRightAnimation());

            // 退出屏幕的动效
            mViewFlipper.setOutAnimation(AnimationHelper.outToLeftAnimation());
            mViewFlipper.showPrevious();
          }
          break;

        default:
          break;
    }
    return super.onTouchEvent(event);
  }
}

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

  <TextView android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/colorBlack"
       android:gravity="center"
       android:text="这是一个ViewFlipper样例"
       android:paddingTop="20dp"/>

  <ViewFlipper android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:id="@+id/viewFlipper1">

    <LinearLayout android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical"
           android:gravity="center">

      <TextView android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textColor="@color/colorBlue"
           android:gravity="center"
           android:text="这是第一个ViewFlipper页面"/>

      <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/avasterdr"/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical"
           android:gravity="center" >

      <TextView android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textColor="@color/colorBlue"
           android:gravity="center"
           android:text="这是第二个ViewFlipper页面"/>

      <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/avastertony"/>

    </LinearLayout>

  </ViewFlipper>

</LinearLayout>

3、动画辅助类 AnimationHelper.java

public class AnimationHelper {

  // 左滑的进入动画
  public static 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;
  }

  // 左滑的退出动画
  public static 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;
  }

  // 右滑的进入动画
  public static 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;
  }

  // 右滑的退出动画
  public static 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;
  }
}

4、对应的效果图如下

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

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

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

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

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

Animation.ABSOLUTEAnimation.RELATIVE_TO_SELFAnimation.RELATIVE_TO_PARENT

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

2、fromXValue：起点的横坐标值

3、toXValue：终点的横坐标值

4、fromYValue：起点的纵坐标值

5、toYValue：终点的纵坐标值

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

// 左滑的进入动画
public static Animation inFromRightAnimation() {
  Animation inFromRight = new TranslateAnimation(
      Animation.RELATIVE_TO_PARENT,
      1.0f,
      Animation.RELATIVE_TO_PARENT,
      0.0f,
      Animation.RELATIVE_TO_PARENT,
      -1.0f,
      Animation.RELATIVE_TO_PARENT,
      0.0f);
  inFromRight.setDuration(500);
  inFromRight.setInterpolator(new AccelerateInterpolator());
  return inFromRight;
}

// 左滑的退出动画
public static 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,
      1.0f);
  outToLeft.setDuration(500);
  outToLeft.setInterpolator(new AccelerateInterpolator());
  return outToLeft;
}

// 右滑的进入动画
public static Animation inFromLeftAnimation() {
  Animation inFromLeft = new TranslateAnimation(
      Animation.RELATIVE_TO_PARENT,
      -1.0f,
      Animation.RELATIVE_TO_PARENT,
      0.0f,
      Animation.RELATIVE_TO_PARENT,
      -1.0f,
      Animation.RELATIVE_TO_PARENT,
      0.0f);
  inFromLeft.setDuration(500);
  inFromLeft.setInterpolator(new AccelerateInterpolator());
  return inFromLeft;
}

// 右滑的退出动画
public static 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,
      1.0f);
  outToRight.setDuration(500);
  outToRight.setInterpolator(new AccelerateInterpolator());
  return outToRight;
}

对应的效果如下：

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

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

到此这篇关于Android实现一个比相册更高大上的左右滑动特效（附源码）的文章就介绍到这了,更多相关android 实现左右滑动特效内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！

 类似资料：
  • Android ViewPager实现左右滑动翻页效果

    本文向大家介绍Android ViewPager实现左右滑动翻页效果，包括了Android ViewPager实现左右滑动翻页效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码，供大家参考，具体内容如下 代码如下： 布局文件： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • Android手势左右滑动效果

    本文向大家介绍Android手势左右滑动效果，包括了Android手势左右滑动效果的使用技巧和注意事项，需要的朋友参考一下 最近想实现Android左滑弹出菜单框，右滑消失菜单这个个功能。了解了一下Android 的滑动事件，必须是在view组件或者Activity上实现，同时必须实现OnTouchListener, OnGestureListener这个两个接口。 以上就是本文的全部内容，希望对

  • Android组件banner实现左右滑屏效果

    本文向大家介绍Android组件banner实现左右滑屏效果，包括了Android组件banner实现左右滑屏效果的使用技巧和注意事项，需要的朋友参考一下 什么是banner组件？在许多Android应用上，比如爱奇艺客户端、百度美拍、应用宝等上面，都有一个可以手动滑动的小广告条，这就是banner，实际应用中的banner，其信息（图片和点击行为）是后台可配置的，是需要通过网络从后台拉取的。网上

  • Android实现微信首页左右滑动切换效果

    本文向大家介绍Android实现微信首页左右滑动切换效果，包括了Android实现微信首页左右滑动切换效果的使用技巧和注意事项，需要的朋友参考一下 大家看到微信首页切换效果有没有觉得很炫，滑动切换，点击底部bar瞬间切换，滑动切换渐变效果，线上效果图： 之前也在博客上看到别人的实现，再次基础上，我做了些优化。首先说下实现原理，大神略过，o(╯□╰)o 页面上看到的三个页面是三个Fragment,

  • jquery实现左右滑动菜单效果代码

    本文向大家介绍jquery实现左右滑动菜单效果代码，包括了jquery实现左右滑动菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下： 这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候

  • Android使用ViewPager实现左右无限滑动

    本文向大家介绍Android使用ViewPager实现左右无限滑动，包括了Android使用ViewPager实现左右无限滑动的使用技巧和注意事项，需要的朋友参考一下 前言         网上有很多使用ViewPager实现左右滑动这一效果的资料，这些资料大多数都是将PagerAdapter中getCount()方法的返回值设为Integer.MAX_VALUE使用户看不到边界，然后在insta

相关阅读

jquery实现左右滑动菜单效果代码Android使用ViewPager实现左右无限滑动小程序实现日历左右滑动效果Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载jQuery简单实现上下,左右滑动的方法

相关文章

UE4添加人物动画之前后左右移动分享一个后端实习最近比较高频的面试题比特大陆嵌入式软件实习面经深信服前端一面9-23（70min左右）比特大陆 后端开发一二面面经

相关问答

如何从右向左滑动菜单如何从右向左滑动视图？Android“向左向右滑动删除”，列表项上的手势，ICS样式滑动ExandableListView在DrawerLayout表单从右到左从右向左方向按钮大小的不相关更改

相关工具

手指滑动特效具有视差效果的右滑返回左右菜单Demo选项卡滑动效果ScrollView滑动固定效果

相关文档

大数据实验手册常见 Web 特效实践开源世界旅行手册CoffeeScript 实用手册比特币开发者指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.