【页面切换】ViewFlipper页面自动切换

最新推荐文章于 2024-09-29 15:49:41 发布

原创最新推荐文章于 2024-09-29 15:49:41 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #布局

android 专栏收录该内容

32 篇文章

订阅专栏

本文介绍ViewFlipper的使用方法，包括如何添加图片、设置动画效果及自动切换功能，并实现手势滑动切换页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、为ViewFlipper加入View
(1) 静态导入：在layout布局文件中直接导入（不灵活）,在ViewFlipper控件中加入一个一个的ImageView.
(2) 动态导入：flipper.addView(getImageView(R.drawable.pic));

Ps：ViewPager：人工切换页面；ViewFlipper：人工切换页面+系统自动切换页面

2、实现页面自动切换功能

flipper.setInAnimation(this,R.anim.left_in); 
//进入动画，R.anim.left_in自定义进入动画效果
flipper.setOutAnimation(this,R.anim.left_out);//切换出去的动画，
flipper.setFlipInterval(3000);//视图切换的时间间隔
flipper.startFlipping();//开始播放

setInAnimation：设置View进入屏幕时候使用的动画
setOutAnimation：设置View退出屏幕时候使用的动画
showNext：调用该函数来显示ViewFlipper里面的上一个View
showPrevious：调用该函数来显示ViewFlipper里面的下一个View
setFilpInterval：设置View之间切换的时间间隔
startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
stopFlipping：停止View切换

动画属性.XML

duration ：动画持续时间（单位：毫秒）
fromXDelta ：动画起始时 X坐标上的位置
toXDelta ：动画结束时 X坐标上的位置
fromAlpha ：动画起始时透明度
toAlpha ：动画结束时透明度

手势滑动

第一步：加入onTouchEvent(MotionEvent event)方法
        ，通过switch(event.getAction()){}设置手指各种活动时的程序运行的方式。
第二步：通过ACTION_Down获取的起始位置startX=event.getX()
        ，与ACTION_MOVE获取的位置做比较，判断手指是向左划还是向右划。
第三步：为滑动方式设置flipper常用方法，看显示前一页还是显示后一页
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
支持手势滑动的ViewFlipper

private float startX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    // TODO 自动生成的方法存根
    switch (event.getAction()) {

    // 手指落下
    case MotionEvent.ACTION_DOWN:
        startX = event.getX();
        break;

    // 手指滑动
    case MotionEvent.ACTION_MOVE:
        // 向右滑动且看上一页
        if (event.getX() - startX > 100) {
            vf.setInAnimation(this, R.anim.left_in);
            vf.setOutAnimation(this, R.anim.left_out);
            vf.showPrevious();
        }
        // 向左滑动且看下一页
        if (startX - event.getX() > 100) {
            vf.setInAnimation(this, R.anim.right_in);
            vf.setOutAnimation(this, R.anim.right_out);
            vf.showNext();
        }
    break;

    // 手指离开
    case MotionEvent.ACTION_UP:
    break;
    }
    return super.onTouchEvent(event);
}

源代码

package com.example.viewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

    private ViewFlipper flipper;
    private int[] resId = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
            R.drawable.pic4 };
    private float startX;// 记录手指横坐标

    // PS：由于是左右滑动，所以不考虑竖坐标

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

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

        // 动态导入的方式为ViewFlipper加入子View
        for (int i = 0; i < resId.length; i++) {// 添加图片
            flipper.addView(getImageView(resId[i]));
        }

        // 为ViewFlipper去添加动画效果
        flipper.setInAnimation(this, R.anim.left_in);// 进来动画
        flipper.setOutAnimation(this, R.anim.left_out);// 出去动画
        flipper.setFlipInterval(3000);// 毫秒|视图切换的时间间隔
        flipper.startFlipping();// 开始播放
    }

    private ImageView getImageView(int resId) {
        ImageView image = new ImageView(this);
        // image.setImageResource(resId);
        image.setBackgroundResource(resId);
        return image;
    }

    // 对手势滑动时间的处理
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {// 手指落下
            startX = event.getX();// 获取到手指初始横坐标
            break;
        }

        case MotionEvent.ACTION_UP:// 手指滑动
        {    // 下面的100是以像素为单位
            // 向右滑动看前一页
            if (event.getX() - startX > 50) {
                flipper.setInAnimation(this, R.anim.left_in);
                flipper.setOutAnimation(this, R.anim.left_out);
                flipper.showPrevious();// 显示前一页
            }
            // 向左滑动看后一页
            if (startX - event.getX() > 50) {
                flipper.setInAnimation(this, R.anim.right_in);
                flipper.setOutAnimation(this, R.anim.right_out);
                flipper.showNext();// 显示后一页
            }
            break;
        }
        }
        return super.onTouchEvent(event);
    }
}

XML文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ViewFlipper>
</LinearLayout>

动画结构

<!-- 动画属性
     duration    动画持续时间（单位：毫秒）
     fromXDelta  动画起始时 X坐标上的位置
     toXDelta    动画结束时 X坐标上的位置
     fromAlpha   动画起始时透明度
     toAlpha     动画结束时透明度
 -->


<!-- left_in -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="2000"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
    <alpha 
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:duration="2000"
        />
</set>


<!-- left_out -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
    <alpha
        android:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />
</set>

<!-- right_in -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
    <alpha
        android:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />
</set>


<!-- right_out -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
    <alpha
        android:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />
</set>