转自 http://blog.csdn.net/loongggdroid/article/details/18262543
说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。
会用到以下的技术:
1、ViewFlipper
2、GestureDetector
3、Animation
主要是这三个类在起作用。
ViewFlipper,不妨把它看做一个容器吧,你可以把许多的View放在这个容器中,让它展示给用户,虽然它每次只展示一个view,我感觉它的用途更好是作为广告展示,比如类似购物网站那样的广告滚动展示。比如可以设置自动播放功能,就可以滚动广告了!
原理:向左向右滑动主要是依赖手势来控制,手势向右滑动就调用 viewFlipper.showNext()方法,同理,向左滑动就会去调用viewFlipper.showPrevious()方法。
效果图如下:
首先在布局文件中添加ViewFlipper的标签:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/pattern1" >
- <Button
- android:id="@+id/treasure_chest_btn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:background="@drawable/treasure" />
- <ViewFlipper
- android:id="@+id/viewflipper"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/treasure_chest_btn" >
- </ViewFlipper>
- <Button
- android:id="@+id/garbage_btn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_below="@id/viewflipper"
- android:background="@drawable/garbage" />
- </RelativeLayout>
slide_left_in.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <!--
- 画面转换位置移动动画效果
- 开始向左动画
- fromXDelta : 动画开始时 X坐标位置
- toXDelta :动画结束时 X坐标位置
- duration :动画持续时间
- -->
- <translate
- android:duration="800"
- android:fromXDelta="100%p"
- android:toXDelta="0" />
- </set>
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <translate
- android:duration="800"
- android:fromXDelta="0"
- android:toXDelta="-100%p" />
- </set>
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <translate
- android:duration="800"
- android:fromXDelta="-100%p"
- android:toXDelta="0" />
- </set>
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <translate
- android:duration="800"
- android:fromXDelta="0"
- android:toXDelta="100%p" />
- </set>
- package net.loonggg.demo.slider;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.GestureDetector;
- import android.view.GestureDetector.OnGestureListener;
- import android.view.LayoutInflater;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.View.OnTouchListener;
- import android.view.Window;
- import android.view.animation.Animation;
- import android.view.animation.Animation.AnimationListener;
- import android.view.animation.AnimationSet;
- import android.view.animation.AnimationUtils;
- import android.widget.Button;
- import android.widget.ImageView;
- import android.widget.TextView;
- import android.widget.ViewFlipper;
- public class MainActivity extends Activity implements OnGestureListener,
- OnTouchListener {
- private GestureDetector detector;
- private ViewFlipper myViewFlipper;
- private int[] imgs = { R.drawable.img0, R.drawable.img1, R.drawable.img2,
- R.drawable.img3, R.drawable.img4, R.drawable.img5 };
- private int displayedChildIndex = 0;
- private Button treasure_btn;
- private Button garbage_btn;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.main);
- myViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
- treasure_btn = (Button) findViewById(R.id.treasure_chest_btn);
- garbage_btn = (Button) findViewById(R.id.garbage_btn);
- myViewFlipper.setOnTouchListener(this);
- myViewFlipper.setLongClickable(true);// 设置长按事件
- // myViewFlipper.setAutoStart(true);// 设置是否自动播放,默认不自动播放
- detector = new GestureDetector(this);
- addFlipperView();
- }
- /**
- * 向FlipperView中动态添加View
- */
- private void addFlipperView() {
- for (int i = 0; i < imgs.length; i++) {
- View view = LayoutInflater.from(this).inflate(
- R.layout.myviewflipper, null);
- TextView title = (TextView) view.findViewById(R.id.view_title);
- title.setText("头像");
- ImageView iv = (ImageView) view.findViewById(R.id.view_image);
- iv.setBackgroundResource(imgs[i]);
- myViewFlipper.addView(view);
- }
- }
- @Override
- public boolean onDown(MotionEvent e) {
- return false;
- }
- @Override
- public void onShowPress(MotionEvent e) {
- }
- @Override
- public boolean onSingleTapUp(MotionEvent e) {
- return false;
- }
- @Override
- public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
- float distanceY) {
- return false;
- }
- @Override
- public void onLongPress(MotionEvent e) {
- }
- @Override
- public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
- float velocityY) {
- // 返回当前正在显示的子视图的索引
- displayedChildIndex = myViewFlipper.getDisplayedChild();
- final ImageView iv = (ImageView) myViewFlipper.getChildAt(
- displayedChildIndex).findViewById(R.id.view_image);
- if (e2.getX() - e1.getX() >= 100 && e1.getY() - e2.getY() >= 100) {
- AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(
- this, R.anim.collect_treasure);
- iv.startAnimation(outAnim);
- outAnim.setAnimationListener(new AnimationListener() {
- public void onAnimationStart(Animation animation) {
- }
- public void onAnimationRepeat(Animation animation) {
- }
- public void onAnimationEnd(Animation animation) {
- showNextView();
- AnimationSet downAnim = (AnimationSet) AnimationUtils
- .loadAnimation(MainActivity.this, R.anim.up_or_down);
- treasure_btn.setAnimation(downAnim);
- iv.clearAnimation();
- }
- });
- } else if (e1.getX() - e2.getX() >= 100 && e2.getY() - e1.getY() >= 100) {
- AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(
- this, R.anim.throw_garbage);
- iv.startAnimation(outAnim);
- outAnim.setAnimationListener(new AnimationListener() {
- public void onAnimationStart(Animation animation) {
- }
- public void onAnimationRepeat(Animation animation) {
- }
- public void onAnimationEnd(Animation animation) {
- showNextView();
- AnimationSet leftAnim = (AnimationSet) AnimationUtils
- .loadAnimation(MainActivity.this,
- R.anim.left_or_right);
- garbage_btn.setAnimation(leftAnim);
- iv.clearAnimation();
- }
- });
- } else if (e1.getX() - e2.getX() >= 100) {
- showNextView();
- } else if (e2.getX() - e1.getX() >= 100) {
- showPreviousView();
- }
- return false;
- }
- private void showPreviousView() {
- myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
- R.anim.slide_right_in));
- myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
- R.anim.slide_right_out));
- myViewFlipper.showPrevious();
- }
- private void showNextView() {
- myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
- R.anim.slide_left_in));
- myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
- R.anim.slide_left_out));
- myViewFlipper.showNext();
- }
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- return detector.onTouchEvent(event);
- }
- }