ViewFlipper使用详解

来源：互联网发布：全知之眼纹身手腕编辑：程序博客网时间：2024/06/09 16:12

一.概述

ViewFlipper是一个切换控件，一般用于图片的切换，当然它是可以添加View的，而不限定只用于ImageView，当然我们也可以自定义View，只是我们经常利用ViewFlipper来实现的是ImageView的切换，如果切换自定义的View，倒还不如使用ViewPager来做。

二.基本实现

先看一下效果图：
这里写图片描述
1.xml布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.viewfliperdemo.MainActivity" >    <ViewFlipper            android:id="@+id/flipper"        android:layout_width="match_parent"        android:layout_height="400dp"        android:flipInterval="2000"        >        <ImageView             android:scaleType="fitXY"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ym1"            />        <ImageView             android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ym2"              android:scaleType="fitXY"            />        <ImageView             android:layout_width="match_parent"            android:layout_height="match_parent"              android:scaleType="fitXY"            android:src="@drawable/ym3"            />        <ImageView             android:layout_width="match_parent"              android:scaleType="fitXY"            android:layout_height="match_parent"            android:src="@drawable/ym4"            />    </ViewFlipper></RelativeLayout>

在ViewFlipper中，加入四个ImageView控件，其中flipInterval属性是用来设置多少毫秒自动显示下一个示图;

2.JAVA代码

public class MainActivity extends ActionBarActivity {    private ViewFlipper flipper;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        flipper = (ViewFlipper) findViewById(R.id.flipper);        flipper.startFlipping();    }}

通过startFlipping让ViewFlipper自动切换图片。

三.高级实现—–通过手势切换

根据手向左还是向右滑动，切换上一张和下一张图片
布局文件不变。

这里写图片描述
2.Java代码

public class MainActivity extends Activity {    private ViewFlipper flipper;    private GestureDetector detector;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        flipper = (ViewFlipper) findViewById(R.id.flipper);        detector = new GestureDetector(this,listener);    }    SimpleOnGestureListener listener = new SimpleOnGestureListener(){        @Override        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,                float velocityY) {            //向右划动            if(e1.getRawX()<e2.getRawX()&&Math.abs(velocityX)>50){                //显示上一张图片                flipper.showPrevious();            }else if(e1.getRawX()>e2.getRawX()&&Math.abs(velocityX)>50){                flipper.showNext();            }            return super.onFling(e1, e2, velocityX, velocityY);        }    };    /**     * 拦截触摸事件，交给GestureDetector处理     */    @Override    public boolean onTouchEvent(MotionEvent event) {        detector.onTouchEvent(event);        return super.onTouchEvent(event);    }}

四.动态添加图片

上面我们都是把图片写死到ViewFlipper里面的，下面我们看看怎样动态添加图片，此时要用到ViewFlipper的addView方法：

1.xml布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.viewfliperdemo.MainActivity" >    <ViewFlipper            android:id="@+id/flipper"        android:layout_width="match_parent"        android:layout_height="400dp"        android:flipInterval="2000"        >    </ViewFlipper></RelativeLayout>

2.Java代码

public class MainActivity extends Activity {    private ViewFlipper flipper;    private GestureDetector detector;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        flipper = (ViewFlipper) findViewById(R.id.flipper);        detector = new GestureDetector(this,listener);        flipper.addView(getImageView(R.drawable.ym1));        flipper.addView(getImageView(R.drawable.ym2));        flipper.addView(getImageView(R.drawable.ym3));        flipper.addView(getImageView(R.drawable.ym4));    }    private ImageView getImageView(int resId){        ImageView imageView = new ImageView(this);        imageView.setImageResource(resId);        return imageView;    }    SimpleOnGestureListener listener = new SimpleOnGestureListener(){        @Override        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,                float velocityY) {            //向右划动            if(e1.getRawX()<e2.getRawX()&&Math.abs(velocityX)>50){                //显示上一张图片                flipper.showPrevious();            }else if(e1.getRawX()>e2.getRawX()&&Math.abs(velocityX)>50){                flipper.showNext();            }            return super.onFling(e1, e2, velocityX, velocityY);        }    };    /**     * 拦截触摸事件，交给GestureDetector处理     */    @Override    public boolean onTouchEvent(MotionEvent event) {        detector.onTouchEvent(event);        return super.onTouchEvent(event);    }}

0 0