Android UI设计：ViewFlipper使图片循环滑动

一、使用ViewFlipper实现图片的循环滑动　　

　　这里我们使用ViewFlipper实现图片的循环滑动，跟ViewPager相同我们都需要在布局中先进行添加ViewFlipper，再通过动态加载图片的方式将图片载入。

1、布局

<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"
    tools:context=".MainActivity"

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

</RelativeLayout>

2、动画进出效果

①left_right_in.xml(从左向右进入屏幕，这里给图片设置了透明度)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   <translate
        android:duration="3000"
        android:fromXDelta="-100%p"
        android:toXDelta="0"
   <alpha
         android:duration="3000"
        android:fromAlpha="0.5"
        android:toAlpha="1"</alpha>

</set>

②left_right_out.xml(从左向右滑出屏幕，这里给图片设置了透明度)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="100%p"
      <alpha
         android:duration="3000"
        android:fromAlpha="1"
        android:toAlpha="0.5"</alpha>
</set>

③right_left_in.xml(从右向左进入屏幕，这里给图片设置了透明度)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="-100%p"
   <alpha
         android:duration="3000"
        android:fromAlpha="1"
        android:toAlpha="0.5"</alpha>

</set>

④right_left_out.xml(从右向左滑出屏幕，这里给图片设置了透明度)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="-100%p"
   <alpha
         android:duration="3000"
        android:fromAlpha="1"
        android:toAlpha="0.5"</alpha>

</set>

3、MainActivity

package com.example.myviewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity
    private ViewFlipper mviewflipper;
    private int[] mImageId={R.drawable.guide_image3_i,R.drawable.guide_image4,R.drawable.guide_image5,R.drawable.image};
   private float startX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mviewflipper=(ViewFlipper) findViewById(R.id.myviewflipper);
        for (int i = 0; i < mImageId.length; i++){
             mviewflipper.addView(ImageView(mImageId[i]));
        }
        //mviewflipper.setInAnimation(this, R.layout.left_right_out);
    //  mviewflipper.setOutAnimation(this, R.layout.left_right_in);
        mviewflipper.setInAnimation(this, R.layout.right_left_in);
        mviewflipper.setOutAnimation(this, R.layout.right_left_out);
   //   设置滑动间隔时间
        mviewflipper.setFlipInterval(2000);
    //  开始播放
        mviewflipper.startFlipping();
    }
    //viewflipper支持手势

    private View ImageView(int mImageId) {

            ImageView imageview=new ImageView(this);
        //  imageview.setImageResource(mImageId);//该语句不能去显示imageview的原宽高
            //为了显示原宽高，我们使用下面的语句。
            imageview.setBackgroundResource(mImageId);
            return imageview;
    }

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

}

二、支持屏幕的手势滑动

　　为支持屏幕滑动，这里我们将flipper自动循环滑动效果先去掉，添加onTouchEvent()方法，来获得屏幕手势的滑动。

package com.example.myviewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity
    private ViewFlipper mviewflipper;
    private int[] mImageId={R.drawable.guide_image3_i,R.drawable.guide_image4,R.drawable.guide_image5,R.drawable.image};
   private float startX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mviewflipper=(ViewFlipper) findViewById(R.id.myviewflipper);
        for (int i = 0; i < mImageId.length; i++){
             mviewflipper.addView(ImageView(mImageId[i]));
        }
//      mviewflipper.setInAnimation(this, R.layout.left_right_out);
//      mviewflipper.setOutAnimation(this, R.layout.left_right_in);
//      mviewflipper.setInAnimation(this, R.layout.right_left_in);
//      mviewflipper.setOutAnimation(this, R.layout.right_left_out);
//      //设置滑动间隔时间
//        mviewflipper.setFlipInterval(3000);
//      //开始播放
//        mviewflipper.startFlipping();
    }
    //viewflipper支持手势
    @Override
    public boolean onTouchEvent(MotionEvent event) {
          switch (event.getAction()) {
          //手指落下
        case MotionEvent.ACTION_DOWN:{
            startX=event.getX();
            break;
            }   
            //手指滑动
        case MotionEvent.ACTION_MOVE:{
            //向右滑动
            if(event.getX()-startX>100){

                mviewflipper.setInAnimation(this, R.layout.left_right_in);
                mviewflipper.setOutAnimation(this, R.layout.left_right_out);
                mviewflipper.showPrevious();
            }
            //向左滑动
            if(startX-event.getX()>100){
                mviewflipper.setInAnimation(this, R.layout.right_left_in);
                mviewflipper.setOutAnimation(this, R.layout.right_left_out);
                mviewflipper.showNext();
            }
            break;
            }
        case MotionEvent.ACTION_UP:{break;}
        }
        return super.onTouchEvent(event);
    }
    private View ImageView(int mImageId) {

            ImageView imageview=new ImageView(this);
            //imageview.setImageResource(mImageId);//该语句不能去显示imageview的原宽高
            //为了显示原宽高，我们使用下面的语句。
            imageview.setBackgroundResource(mImageId);
            return imageview;
    }

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

}