安卓ViewFlipper及左右滑动图片

雨点打透心脏的1/2处 2022-09-17 13:13 203阅读 0赞

关于滑动效果，在Android中用得比较多，本示例实现的滑动效果是使用ViewFlipper来实现的，当然也可以使用其它的View来实现。

package com.example.viewflipper;

import android.os.Bundle;  
import android.app.Activity;  
import android.view.GestureDetector;  
import android.view.Menu;  
import android.view.MotionEvent;  
import android.view.ViewGroup.LayoutParams;  
import android.view.animation.Animation;  
import android.view.animation.AnimationUtils;  
import android.widget.ImageView;  
import android.widget.ViewFlipper;

public class ViewFlipperActivity extends Activity implements android.view.GestureDetector.OnGestureListener \{

private int\[\] imgs = \{ R.drawable.image1, R.drawable.image2,   
            R.drawable.image3, R.drawable.image4, R.drawable.image5 \};

private GestureDetector gestureDetector = null;   
 private ViewFlipper viewFlipper = null;   
 private Activity mActivity = null;

@Override  
 protected void onCreate(Bundle savedInstanceState) \{  
  super.onCreate(savedInstanceState);  
  setContentView(R.layout.activity\_view\_flipper);  
    
  mActivity = this;   
     
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper1);   
        gestureDetector = new GestureDetector(this);    // 声明检测手势事件    
   
        for (int i = 0; i < imgs.length; i++) \{          // 添加图片源    
            ImageView iv = new ImageView(this);   
            iv.setImageResource(imgs\[i\]);   
            iv.setScaleType(ImageView.ScaleType.FIT\_XY);   
            viewFlipper.addView(iv, new LayoutParams(LayoutParams.FILL\_PARENT, LayoutParams.FILL\_PARENT));   
        \}   
           
        viewFlipper.setAutoStart(true);         // 设置自动播放功能（点击事件，前自动播放）    
        viewFlipper.setFlipInterval(3000);   
        if(viewFlipper.isAutoStart() && !viewFlipper.isFlipping())\{   
            viewFlipper.startFlipping();   
        \}   
    \}   
   
    @Override   
    public boolean onTouchEvent(MotionEvent event) \{   
        viewFlipper.stopFlipping();              // 点击事件后，停止自动播放    
        viewFlipper.setAutoStart(false);       
        return gestureDetector.onTouchEvent(event);         // 注册手势事件    
    \}  
    @Override  
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) \{   
        if (e2.getX() - e1.getX() > 120) \{            // 从左向右滑动（左进右出）    
            Animation rInAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push\_right\_in);  // 向右滑动左侧进入的渐变效果（alpha  0.1 -> 1.0）    
            Animation rOutAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push\_right\_out); // 向右滑动右侧滑出的渐变效果（alpha 1.0  -> 0.1）    
   
            viewFlipper.setInAnimation(rInAnim);   
            viewFlipper.setOutAnimation(rOutAnim);   
            viewFlipper.showPrevious();   
            return true;   
        \} else if (e2.getX() - e1.getX() < -120) \{        // 从右向左滑动（右进左出）    
            Animation lInAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push\_left\_in);       // 向左滑动左侧进入的渐变效果（alpha 0.1  -> 1.0）    
            Animation lOutAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push\_left\_out);     // 向左滑动右侧滑出的渐变效果（alpha 1.0  -> 0.1）    
   
            viewFlipper.setInAnimation(lInAnim);   
            viewFlipper.setOutAnimation(lOutAnim);   
            viewFlipper.showNext();   
            return true;   
        \}   
        return true;   
    \}   
    @Override  
    public boolean onDown(MotionEvent e) \{   
        return false;   
    \}   
    @Override  
    public void onLongPress(MotionEvent e) \{   
    \}   
    @Override  
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) \{   
        return false;   
    \}   
    @Override  
    public void onShowPress(MotionEvent e) \{   
    \}   
    @Override  
    public boolean onSingleTapUp(MotionEvent e) \{   
        return false;   
    \}

@Override  
 public boolean onCreateOptionsMenu(Menu menu) \{  
  // Inflate the menu; this adds items to the action bar if it is present.  
  getMenuInflater().inflate(R.menu.view\_flipper, menu);  
  return true;  
 \}

布局界面相对比较简单，我们只需要加入ViewFlipper就可以，代码如下：

<? xml version="1.0" encoding="utf-8" ?>   
< LinearLayout  xmlns:android ="http://schemas.android.com/apk/res/android"   
    android:orientation ="vertical"   
    android:layout\_width ="fill\_parent"   
    android:layout\_height ="fill\_parent"   
     >

< ViewFlipper  android:id ="@+id/ViewFlipper1"   
        android:layout\_width ="fill\_parent"    
        android:layout\_height ="fill\_parent" >  
     </ ViewFlipper >

</LinearLayout>

四种动画类型

push\_left\_in.xml文件中代码：

![复制代码][copycode.gif]

<? 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="500" />  
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"  
        android:duration="500" />  
</set>

![复制代码][copycode.gif]

push\_left\_out.xml文件中代码：

![复制代码][copycode.gif]

<? 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 ="500"   />  
     < alpha  android:fromAlpha ="1.0"  android:toAlpha ="0.1"   
        android:duration ="500"   />

</set>

![复制代码][copycode.gif]

push\_right\_in.xml文件中代码：

![复制代码][copycode.gif]

<? 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="500" />  
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"  
        android:duration="500" />  
</set>

![复制代码][copycode.gif]

push\_right\_out.xml文件中代码：

![复制代码][copycode.gif]

<? 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="500" />  
    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"  
        android:duration="500" />

</set>

具体源码在我的资源啊

[copycode.gif]: /images/20220828/46353d533005457b994e71b4fd07b1f6.png