Android ViewFlipper控件使用之——图片切换的实现「带手势检测」

最新推荐文章于 2025-04-18 11:46:25 发布

原创最新推荐文章于 2025-04-18 11:46:25 发布 · 431 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Android 专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍如何使用ViewFlipper控件实现图片自动切换及手势滑动切换效果，包括布局配置、代码实现及手势检测机制。

使用ViewFlipper控件实现图片切换

参考：ViewFlipper使用详解

前言

ViewFlipper是一个切换控件
1、一般用于图片的切换
2、也可以用来添加View，不限定只用于ImageView，也可以是自定义View；只是我们经常利用ViewFlipper来实现ImageView的切换，如果切换自定义的View，使用ViewPager做更方便吧。

一、使用ViewFlipper实现「图片切换」demo案例

ViewFlipper布局：

<ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:flipInterval="2000" />

代码实现：

ViewFlipper mFlipper = findViewById(R.id.flipper);

	mFlipper.addView(getImageView(R.mipmap.img_1));
    mFlipper.addView(getImageView(R.mipmap.img_2));
    mFlipper.addView(getImageView(R.mipmap.img_3));
    mFlipper.addView(getImageView(R.mipmap.img_4));
        
	if (mFlipper.getChildCount() > 1) {
        mFlipper.startFlipping();
    } else {
        mFlipper.stopFlipping();
    }

二、完整版demo「包含手势检测，可以手动滑动图片切换」

代码实现：

/**
 * 图片切换demo:手势切换
 */
public class TwoActivity extends Activity {

    private ViewFlipper mFlipper;
    private GestureDetector mDetector; //手势检测

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);

        initView();
        initData();
        initAction();
    }

    private void initView() {
        mFlipper = findViewById(R.id.flipper);
        mDetector = new GestureDetector(new simpleGestureListener());
    }

    private void initData() {
        mFlipper.addView(getImageView(R.mipmap.img_1));
        mFlipper.addView(getImageView(R.mipmap.img_2));
        mFlipper.addView(getImageView(R.mipmap.img_3));
        mFlipper.addView(getImageView(R.mipmap.img_4));
    }

    @SuppressLint("ClickableViewAccessibility")
    private void initAction() {
        mFlipper.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return mDetector.onTouchEvent(motionEvent);//手势监听
            }
        });
        if (mFlipper.getChildCount() > 1) {
            mFlipper.startFlipping();
        } else {
            mFlipper.stopFlipping();
        }
    }

    private ImageView getImageView(int id) {
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(id);
        return imageView;
    }

    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) {
            // Fling left
            if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {

                mFlipper.showNext();//展示下一张图片

                Toast.makeText(TwoActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
                // Fling right

                mFlipper.showPrevious();//展示上一张图片

                Toast.makeText(TwoActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    }
}