ViewFilpper 是Android官方提供的一个 View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。
又ViewAnimator继承至于FrameLayout的,所以ViewFilpper的Layout里面可以放置多个View。
下面就直接上代码
public class ViewFlipperActivity extends Activity implements View.OnTouchListener { @Bind(R.id.view_flipper) ViewFlipper viewFlipper; private int[] imgs = {R.drawable.bbb, R.drawable.ddd, R.drawable.aaa, R.drawable.ccc}; private GestureDetector mDetector; //手势检测 private Activity mActivity = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mActivity = this; setContentView(R.layout.activity_view_flipper); ButterKnife.bind(this); //两种方法添加都可以。下面的那种在现实使用中比较实用。 // viewFlipper.addView(getImageView(R.drawable.bbb)); // viewFlipper.addView(getImageView(R.drawable.ddd)); // viewFlipper.addView(getImageView(R.drawable.aaa)); // viewFlipper.addView(getImageView(R.drawable.ccc)); for (int i = 0; i < imgs.length; i++) { // 添加图片源 ImageView iv = new ImageView(this); iv.setImageResource(imgs[i]); viewFlipper.addView(iv, new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)); } viewFlipper.setOnTouchListener(this); mDetector = new GestureDetector(new simpleGestureListener()); viewFlipper.setAutoStart(true); // 设置自动播放功能(点击事件,前自动播放) viewFlipper.setFlipInterval(3000); if (viewFlipper.isAutoStart() && !viewFlipper.isFlipping()) { viewFlipper.startFlipping(); } } private ImageView getImageView(int id) { ImageView imageView = new ImageView(this); imageView.setImageResource(id); return imageView; } @Override public boolean onTouch(View v, MotionEvent event) { viewFlipper.stopFlipping(); // 点击事件后,停止自动播放 viewFlipper.setAutoStart(false); return mDetector.onTouchEvent(event); } private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener { final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200; //不知道为什么,不加上onDown函数的话,onFling就不会响应,真是奇怪 @Override public boolean onDown(MotionEvent e) { return true; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { 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(); viewFlipper.startFlipping(); } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { 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(); viewFlipper.startFlipping(); } return true; } } }
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ViewFlipper android:id="@+id/view_flipper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:flipInterval="2000" /> </RelativeLayout>
下面是我家的加的几个淡入淡出的效果:
push_left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1500" android:fromXDelta="100%p" android:toXDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> </set>push_left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1500" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>push_right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1500" android:fromXDelta="-100%p" android:toXDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> </set>push_right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1500" android:fromXDelta="0" android:toXDelta="100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>
fromAlpha 表示的是开始不透明 toAlpha 表示的是最后的透明度 duration 表示的渐变持续时间。