当前位置: 代码迷 >> Android >> 安卓ViewFlipper及上下滑动图片
  详细解决方案

安卓ViewFlipper及上下滑动图片

热度:41   发布时间:2016-04-28 07:38:09.0
安卓ViewFlipper及左右滑动图片

关于滑动效果,在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文件中代码:

复制代码
<?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>

复制代码

 

 

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

</set>  

复制代码

 

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

复制代码

 

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

</set>  

 

具体源码在我的资源啊