安卓ViewFlipper及左右滑动图片

最新推荐文章于 2021-05-27 11:17:44 发布

置顶叶子一哥

最新推荐文章于 2021-05-27 11:17:44 发布

阅读量2.4k

点赞数

分类专栏：安卓开发文章标签：安卓 viewflipper

本文链接：https://blog.csdn.net/abc5382334/article/details/12943243

版权

安卓开发专栏收录该内容

68 篇文章 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文件中代码：

<? xml version="1.0" encoding="utf-8" ?>

　　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" ?>