ViewFlipper基本是实现及上下左右滑动

最新推荐文章于 2024-05-24 16:17:42 发布

Vincent__Lee

最新推荐文章于 2024-05-24 16:17:42 发布

阅读量3.1k

点赞数

分类专栏： android工具类

本文链接：https://blog.csdn.net/li15225271052/article/details/54893132

版权

android工具类专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近遇到了一些奇葩需求需要轮播上下左右滑动，原来的viewpage就不好用了，所有我就用了viewfipper控件

一步一步来，先熟悉下这个控件

一、基本实现

先写个最简单的例子

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="recycleapplication.yundong.com.viewflipper.MainActivity">
    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:flipInterval="2000" >
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_control_normal"/>
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_play_lan"/>
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_dd"/>
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher"/>
    </ViewFlipper>
</RelativeLayout>

然后是代码简单的几行

flipper = (ViewFlipper) findViewById(R.id.flipper);
flipper.setFlipInterval(2000);//设置切换的间隔时间
flipper.startFlipping();

二、高级实现——实现手势滑动

然后是手动实现的代码

核心方法

flipper.showNext();//显示下一个视图
flipper.showPrevious();//显示上一个视图

public class Main2Activity extends AppCompatActivity implements View.OnTouchListener {
    ViewFlipper flipper;
    private GestureDetector mDetector; //手势检测
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);


        flipper = (ViewFlipper) findViewById(R.id.flipper);
        flipper.setFlipInterval(2000);//设置切换的间隔时间
        flipper.startFlipping();

        flipper.setOnTouchListener(this);

    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        return mDetector.onTouchEvent(motionEvent);
    }

    private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{
        final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;

        //不知道为什么，不加上onDown函数的话，onFling就不会响应
        @Override
        public boolean onDown(MotionEvent e) {
            // TODO Auto-generated method stub
            Toast.makeText(Main2Activity.this, "ondown", Toast.LENGTH_SHORT).show();
            return true;//这里需要返回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) {

                flipper.showNext();//显示下一个视图
                Toast.makeText(Main2Activity.this, "Fling Left", Toast.LENGTH_SHORT).show();
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
                // Fling right

                flipper.showPrevious();//显示上一个视图

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

三、动态添加图片及设置其它的方向和动效

先贴出动效写在了anim文件中

push_down_in

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="1000"
        android:fromYDelta="-100%p"
        android:toYDelta="0" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

push_down_out

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="100%p" />
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

push_up_in

<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate 
      android:fromYDelta="100%p" 
      android:toYDelta="0"
      android:duration="1000"/>
   <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0" 
      android:duration="1000" />
</set>

push_up_down

<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate android:fromYDelta="0" 
      android:toYDelta="-100%p" 
      android:duration="1000"/>
   <alpha android:fromAlpha="1.0"
      android:toAlpha="0.0" 
      android:duration="1000" />
</set>

其它两个方向我就不贴了

public class Main4Activity extends AppCompatActivity implements View.OnTouchListener{
    ViewFlipper flipper;
    private GestureDetector mDetector; //手势检测
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);

        flipper = (ViewFlipper) findViewById(R.id.flipper);
//        flipper.setFlipInterval(2000);//设置切换的间隔时间
//        flipper.startFlipping();
        flipper.addView(getImageView(R.drawable.ic_launcher));
        flipper.addView(getImageView(R.drawable.img_control_normal));
        flipper.addView(getImageView(R.drawable.img_dd));
        flipper.addView(getImageView(R.drawable.img_play_lan));

        flipper.setOnTouchListener(this);
        mDetector = new GestureDetector(new Main4Activity.simpleGestureListener());

    }
    //生成imageview
    private ImageView getImageView(int id){
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(id);
        return imageView;
    }
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        return mDetector.onTouchEvent(motionEvent);
    }

    private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{
        final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;

        //不知道为什么，不加上onDown函数的话，onFling就不会响应
        @Override
        public boolean onDown(MotionEvent e) {
            // TODO Auto-generated method stub
            Toast.makeText(Main4Activity.this, "ondown", Toast.LENGTH_SHORT).show();

            return true;//这里需要返回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) {
                flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_left_out));
                flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_left_in));
                flipper.showNext();//显示下一个视图

                Toast.makeText(Main4Activity.this, "Fling Left", Toast.LENGTH_SHORT).show();
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
                // Fling right 从左向右划
                flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_right_out));
                flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_right_in));
                flipper.showPrevious();//显示上一个视图

                Toast.makeText(Main4Activity.this, "Fling Right", Toast.LENGTH_SHORT).show();
            }else if (e1.getY()-e2.getY()>FLING_MIN_DISTANCE&& Math.abs(velocityY) > FLING_MIN_VELOCITY){
                //从下向上划
                flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_up_out));
                flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_up_in));
                flipper.showNext();//显示下一个视图
            }else if (e2.getY()-e1.getY()>FLING_MIN_DISTANCE&& Math.abs(velocityY) > FLING_MIN_VELOCITY){
                //从上向下划
                flipper.setOutAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_down_out));
                flipper.setInAnimation(AnimationUtils.loadAnimation(Main4Activity.this,
                        R.anim.push_down_in));
                flipper.showPrevious();//显示上一个视图
            }
            flipper.setEnabled(true);
            return true;
        }
    }
}

Vincent__Lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ViewFlipper基本是实现及上下左右滑动

最近遇到了一些奇葩需求需要轮播上下左右滑动，原来的viewpage就不好用了，所有我就用了viewfipper控件一步一步来，先熟悉下这个控件一、基本实现先写个最简单的例子xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"
复制链接

扫一扫

专栏目录