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

2019-11-09 18:44:36

字体：大中小

来源：转载

供稿：网友

最近遇到了一些奇葩需求需要轮播上下左右滑动，原来的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;        }    }}