ViewFlipper人工切换页面+系统自动切换页面

最新推荐文章于 2019-07-20 00:08:02 发布

qqazl001

最新推荐文章于 2019-07-20 00:08:02 发布

阅读量314

点赞数 1

CC 4.0 BY-SA版权

文章标签： Android

本文链接：https://blog.youkuaiyun.com/qqazl001/article/details/79710286

本文介绍如何使用ViewFlipper实现Android应用中的图片轮播效果，并详细解释了如何通过自定义动画实现图片的淡入淡出过渡。

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

此文，仅做为个人学习Android，记录成长以及方便复习！

通过ViewFlipper实现图片轮播和手工切换图片效果

首先写布局文件

activity_main.xml

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

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></ViewFlipper>

</RelativeLayout>

接着在资源目录新增动画的文件夹“anim”和动画文件xml，效果为左右的淡入淡出

left_in.xml 左边淡入效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- duration 持续时间-->
    <!-- fromXDelta 属性为动画起始时 X坐标上的位置  -->
    <!-- toXDelta 属性为动画起始时 X坐标上的位置  -->
    <translate
        android:duration="1000"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
    <!--
    fromAlpha:开始时透明度
    toAlpha： 结束时透明度
    duration：动画持续时间
     -->
    <alpha 
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:duration="1000"
        />

</set>

left_out.xml 左边淡出效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:toXDelta="100%p" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

right_in.xml 右边淡入效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="1000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

right_out.xml 右边淡出效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

配置完那些文件之后，接下来就是Activyt的配置了！

package com.rui.viewflipperdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;//声明ViewFlipper
    //声明ViewFlipper加载的图片数组
    private int res[] = {R.drawable.img1,R.drawable.img2,R.drawable.img3};
    private float startX;//记录手指点击的初始坐标

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化viewFilpper
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        //动态导入getImg的图片到ViewFlipper
        for(int i = 0;i<res.length;i++){
            //图片依次加入ViewFlipper
            viewFlipper.addView(getImg(res[i]));
        }
        //设置动画
        //参数1，上下文对象
        //参数2，动画效果
        viewFlipper.setInAnimation(this,R.anim.left_in);
        viewFlipper.setOutAnimation(this,R.anim.left_out);
        viewFlipper.setFlipInterval(3000);//设置自动切换时间
        viewFlipper.startFlipping();//开始轮播
    }
    //手势控制上一页和下一页
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取触屏操作
        switch(event.getAction()){
            //手指触摸到屏幕
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                break;
            //手指移动
            case MotionEvent.ACTION_MOVE:
                //判断手指向右滑动
                if(startX-event.getX()>100){
                    //设置动画
                    viewFlipper.setInAnimation(this,R.anim.right_in);
                    viewFlipper.setOutAnimation(this,R.anim.right_out);
                    viewFlipper.showPrevious();//显示上一页
                }
                //判断手指向左移动
                if(event.getX()-startX>100){
                    viewFlipper.setInAnimation(this,R.anim.left_in);
                    viewFlipper.setOutAnimation(this,R.anim.left_out);
                    viewFlipper.showNext();
                }
                break;
            //手指离开
            case MotionEvent.ACTION_UP:
                break;
        }
        return super.onTouchEvent(event);
    }

    //图片加入ImageView
    public ImageView getImg(int res){
         ImageView imageView = new ImageView(MainActivity.this);
         imageView.setImageResource(res);
         return imageView;
    }
}