android ViewFlipper

转载 2015年07月06日 22:47:01
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4.jar的支持),自定义实现Viewgroup,gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

以下会会用到的技术有:
1、ViewFlipper
2、GestureDetector
3、Animation
主要是这三个类再起作用。

原理:向左向右滑动主要是依赖手势来控制,手势向右滑动就调用 viewFlipper.showNext();方法,同理,向左滑动就会去调用viewFlipper.showPrevious();方法。

接下来直接上代码:

首先在布局文件中添加ViewFlipper的标签:
复制内容到剪贴板
代码:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

</RelativeLayout>
编写代码:
复制内容到剪贴板
代码:
package com.xzw.ui;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
/**
* 左右滑动demo
@author xzw
*
*/
public class MainActivity extends Activity implements OnGestureListener {
        
        private static final String TAG = "MainActivity";
        
        private ViewFlipper viewFlipper;
        private GestureDetector detector; //手势检测

        Animation leftInAnimation;
        Animation leftOutAnimation;
        Animation rightInAnimation;
        Animation rightOutAnimation;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
        detector = new GestureDetector(this);
        
        //往viewFlipper添加View
        viewFlipper.addView(getImageView(R.drawable.new_feature_1));
        viewFlipper.addView(getImageView(R.drawable.new_feature_2));
        viewFlipper.addView(getImageView(R.drawable.new_feature_3));
        viewFlipper.addView(getImageView(R.drawable.new_feature_4));
        viewFlipper.addView(getImageView(R.drawable.new_feature_5));
        viewFlipper.addView(getImageView(R.drawable.new_feature_6));
        
        //动画效果
            leftInAnimation = AnimationUtils.loadAnimation(this, R.anim.left_in);
                leftOutAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out);
                rightInAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in);
                rightOutAnimation = AnimationUtils.loadAnimation(this, R.anim.right_out);
    }

    private ImageView getImageView(int id){
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(id);
            return imageView;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
     
            return this.detector.onTouchEvent(event); //touch事件交给手势处理。
    }
    
        @Override
        public boolean onDown(MotionEvent e) {
                // TODO Auto-generated method stub
                return false;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                        float velocityY) {
                Log.i(TAG, "e1="+e1.getX()+" e2="+e2.getX()+" e1-e2="+(e1.getX()-e2.getX()));
                
        
                
                if(e1.getX()-e2.getX()>120){
                        viewFlipper.setInAnimation(leftInAnimation);
                        viewFlipper.setOutAnimation(leftOutAnimation);
                    viewFlipper.showNext();//向右滑动
                    return true;
                }else if(e1.getX()-e2.getY()<-120){
                        viewFlipper.setInAnimation(rightInAnimation);
                        viewFlipper.setOutAnimation(rightOutAnimation);
                        viewFlipper.showPrevious();//向左滑动
                        return true;
                }
                return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {
                // TODO Auto-generated method stub
                
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
                        float distanceY) {
                // TODO Auto-generated method stub
                return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {
                // TODO Auto-generated method stub
                
        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {
                // TODO Auto-generated method stub
                return false;
        }
    
    
}
接下来我们编写动画效果的xml文件,你也可以通过代码实现,这里使用xml配置,个人感觉比较简单。

left_in.xml
复制内容到剪贴板
代码:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />

</set>
left_out.xml
复制内容到剪贴板
代码:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />

</set>
right_in.xml
复制内容到剪贴板
代码:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="-100%p"
        android:toXDelta="0"
        android:duration="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />

</set>
right_out.xml
复制内容到剪贴板
代码:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />

</set>
以上就是完整的代码,看起来很简单吧。
看下面的效果图吧,秋天到了,图片也选择的有秋意点儿哈。
附上源代码:http://down.51cto.com/data/579206

 1.jpg (18.52 KB)

2012-11-1 11:00

1.jpg

Android ViewFlipper 使用

ViewFlipper 与 ViewPager类似,也是实现视图之间切换的控件。与ViewPager的不同在于,他可以按时间自动切换,但是他本身不支持手势滑动。...
  • tyzlmjj
  • tyzlmjj
  • 2015年09月19日 16:35
  • 1470

Android中ViewFlipper实现动态加载view

前面已经讲过ImageSwitcher和TextSwitcher。ImageSwitcher用来切换ImageView的,TextSwitcher是用来切换TextView的。 但是我们现在要切换自...
  • YUZHIBOYI
  • YUZHIBOYI
  • 2012年06月29日 16:21
  • 10514

ViewFlipper锁屏后工作异常的解决方法

ViewFlipper一般被用作指定的多个View对象的动态切换,当
  • angusing
  • angusing
  • 2014年08月16日 09:25
  • 610

android 开发零起步学习笔记(十四):Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://smallwoniu.blog.51cto.com/3911954/1308959...
  • ingener
  • ingener
  • 2016年11月17日 18:09
  • 632

深入了解ViewFlipper工作机制

平时我们在使用ViewFlipper的时候一方面感叹ViewFlipper的使用很简单,另一方面,我们时常感叹ViewFlipper给我们的接口方法太少,很多常用的效果都不好做,很难施展拳脚,这篇文章...
  • ff20081528
  • ff20081528
  • 2014年01月10日 17:52
  • 8638

Android循环滚动控件——ViewFlipper的使用

假设现在让你实现一个垂直循环滚动的效果,你的第一反应是什么?如果是立马想找第三方或者想着自定义(嘿!真不嫌麻烦),那么你对ViewFlipper是陌生的,说明这篇博客对你是有价值的。请往下看:   V...
  • u011150924
  • u011150924
  • 2017年03月08日 11:10
  • 3140

Android中的ViewFlipper的简单使用------自动轮播

哈哈,请尊重原创哦,转载请链接:http://blog.csdn.net/elvira_mx/article/details/45334645 简单说一下,ViewFlipper是Andr...
  • Elvira_mx
  • Elvira_mx
  • 2015年04月28日 13:14
  • 1405

Android ViewFlipper的动画

首先熟悉四种动画 anim/push_up_in.xml。进入的动画 android:fromYDelta="100%p" android:toYDelta="0" 到达的view百...
  • Android_Xiaoqi
  • Android_Xiaoqi
  • 2012年07月19日 16:20
  • 3471

ViewFlipper基本是实现及上下左右滑动

最近遇到了一些奇葩需求需要轮播上下左右滑动,原来的viewpage就不好用了,所有我就用了viewfipper控件 一步一步来,先熟悉下这个控件 一、基本实现 先写个最简单的例子 ...
  • li15225271052
  • li15225271052
  • 2017年02月06日 15:02
  • 1091

Android-ViewFlipper(图片轮播 和 手势控制 实例)

1.回顾    上篇 学习了 ViewPager 的 使用的三种方式,分别通过 PagerAdapter , FragmentPagerAdapter 和 FragmentStatePagerAdap...
  • LABLENET
  • LABLENET
  • 2015年08月25日 11:10
  • 2313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android ViewFlipper
举报原因:
原因补充:

(最多只允许输入30个字)