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通过view复用优化ViewFlipper用法

  • 2017年05月01日 19:39
  • 36.87MB
  • 下载

Android 滑动效果入门篇(一)—— ViewFlipper

ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。又ViewAnimator继承至于Frame...

Android使用ViewFlipper做页面切换,与手势滑动切换的使用。

Android系统自带有一个多页面管理的控件:ViewFlipper.它可以简单实现子页面的切换,,,它只需使用addView方法添加几个View,每个View对应的是一个页面,即可完成对于多页面的管...
  • Yao_GUET
  • Yao_GUET
  • 2011年04月18日 15:32
  • 11308

Android ViewFlipper Animation 使用

  • 2011年04月01日 10:48
  • 143KB
  • 下载

android之viewFlipper简介及简单应用--滑动翻页功能

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android ViewFlipper
举报原因:
原因补充:

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