ViewFlipper实现上下翻滚轮播效果

一种可以设置滑动动画的控件,只显示一行布局,在布局文件中的ViewFlipper控件中顺序写好每一行的布局

(1).MainActivity.java:

ViewFlipper mFlipper = ((ViewFlipper) this.findViewById(R.id.flipper));
mFlipper.startFlipping();
// 设置进入动画
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
// 设置滚出动画
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_out)); 

(2).activity_main.xml:

<ViewFlipper
  android:id="@+id/flipper"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginBottom="20dip"
  android:flipInterval="3000" > // 设置滑动间隔时间(毫秒)

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/animation_2_text_1"
    android:textSize="26sp" />

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/animation_2_text_2"
    android:textSize="26sp" />

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/animation_2_text_3"
    android:textSize="26sp" />
</ViewFlipper>

(3).push_up_in.xml:(动画资源文件)

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
  <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>

push_up_out.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
  <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>

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

(0)

相关推荐

  • ViewFlipper实现文字轮播效果

    ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告),供大家参考,具体内容如下 广告条目可以单独写成布局文件,然后在布局文件或者代码中添加到总布局中 从源码可以看出,其实ViewFlipper间接的继承了FrameLayout,也可以说ViewFlipper其实就是个FrameLayout,只不过在内部封装了动画实现和Handler实现一个循环而已. 布局文件 <?xml version="1.0" encoding="utf-8"?> <

  • ViewFlipper实现上下翻滚轮播效果

    一种可以设置滑动动画的控件,只显示一行布局,在布局文件中的ViewFlipper控件中顺序写好每一行的布局 (1).MainActivity.java: ViewFlipper mFlipper = ((ViewFlipper) this.findViewById(R.id.flipper)); mFlipper.startFlipping(); // 设置进入动画 mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim

  • Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法

    本文实例讲述了Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法.分享给大家供大家参考,具体如下: 前看过网易云阅读客户端,里面的文章可以实现上下拉动实现上下翻页的效果,感觉体验效果很不错. 公司新版本项目的开发中也要求实现类似的效果,不过还好项目需求里面可以提前知道需要实现上下拉动翻页的总的页数.如果像网易那种不提前知道总的页数感觉控制好LinearLayout里面的childView应该也可以达到效果. 好记性不如烂笔头,先写下我提前知道总页

  • 利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&

  • js+css实现上下翻页相册代码分享

    这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码.  先为大家展示效果图: 效果演示 源码下载 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js+css实现上下翻页相册</title>

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

    之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie

  • BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • jQuery实现图片轮播效果代码

    整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播  2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来  3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片  4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • Jquery代码实现图片轮播效果(一)

    文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示         下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

随机推荐