app背景轮换，viewflipper详细实现方法（两种）（食人牙慧，备忘）

kim5659

已于 2022-11-13 01:14:29 修改

阅读量636

点赞数 1

于 2021-12-04 19:50:53 首次发布

本文链接：https://blog.csdn.net/kim5659/article/details/121719802

版权

android studio 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

本文通过一个名为ViewFlipperDemo的项目，详细介绍了如何在Android Studio中使用ViewFlipper实现背景定期轮换。步骤包括创建布局文件、动画文件，并在MainActivity中添加相关代码，实现背景图片或颜色的切换。文章适合初学者，提供了完整代码示例，但作者发现原始方法在实际项目中效果不佳，最终采用添加ImageView并动态加载图片的方式实现了更稳定的效果。

摘要由CSDN通过智能技术生成

android studio版本：Android Studio Chipmunk | 2021.2.1 Patch 2

项目名称：ViewFlipperDemo（项目ViewFlipper实现方法不同，使用的是数据的方法，哪个好用我也不知道）

最近在做一个小东西，需要用到背景定期轮换，上网找了一些，有几种方法，我也不知道哪个好，今天做的是其中一种。关键网上的很多人写东西对我这种小白不太友好，因为我啥也不会，所以今天把我实现的过程贴出来，一方面是方便复习，一方面是给像我一样的小白一个实现的简单方法，基本复制粘贴改名就行了。

先建立一个空的项目，就是这个，使用默认项目名，这样代码干扰少：

一、所要改的文件、位置及添加方法：

1.layout下面新建4个布局文件。item_view1.xml、item_view2.xml、item_view3.xml、item_view4.xml

做完这样：

2.在res下新建：anim文件夹，

再新建两个文件：right_in.xml、right_out.xml.

完成后这样。

二、相关增加或修改文件内容：

1、布局文件：

item_view1.xml，其他文件可以此文件复制直接粘贴，改文件名，然后改颜色就行，我就直接贴出来了，这四个文件就名件名不同，颜色不同，其他都一样。

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

item_view2.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:background="#2196F3"
    android:orientation="vertical">

</LinearLayout>

item_view3.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:background="#009688"
    android:orientation="vertical">

</LinearLayout>

item_view4.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:background="#FFEB3B"
    android:orientation="vertical">

</LinearLayout>

activity_main.xml文件增加，添加位置跟效果有关，注意前后位置。flipInterval="3000"为切换时时3秒：

<ViewFlipper
        android:id="@+id/vflp_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">
        <include layout="@layout/item_view1" />
        <include layout="@layout/item_view2" />
        <include layout="@layout/item_view3" />
        <include layout="@layout/item_view4" />
    </ViewFlipper>

完全代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <ViewFlipper
        android:id="@+id/vflp_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">
        <include layout="@layout/item_view1" />
        <include layout="@layout/item_view2" />
        <include layout="@layout/item_view3" />
        <include layout="@layout/item_view4" />
    </ViewFlipper>

</androidx.constraintlayout.widget.ConstraintLayout>

2、动画文件：right_in.xml、right_out.xml.

right_in.xml

<?xml version ="1.0" encoding ="utf-8"?><!--  Learn More about how to use App Actions: https://developer.android.com/guide/actions/index.html -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

right_out.xml.

<?xml version ="1.0" encoding ="utf-8"?><!--  Learn More about how to use App Actions: https://developer.android.com/guide/actions/index.html -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />

</set>

上面是右进的动画，如果左进，代码如下：

left_in.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration="500"
            android:fromXDelta="-100%p"
            android:toXDelta="0"/>
    </set>

left_out.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration="500"
            android:fromXDelta="0"
            android:toXDelta="-100%p"/>
    </set>

然后修改布局文件中下面两行就行了：

android:inAnimation="@anim/left_in"
android:outAnimation="@anim/right_out"
效果有点不同。有些地方要修改才能完美。没细研究。

注：如果要显示图片，将图片文件拷贝到\app\src\main\res\drawable文件夹下，注意图片大小，根据经验，一般较老手机只能显示3张图片，四张就可能oom.修改文件：item_view1.xml、item_view2.xml、item_view3.xml、item_view4.xml，分别是四个要显示的内容（图片或纯色）。

显示颜色：android:background="@android:color/holo_red_light"

显示图片：android:background="@drawable/a1" （a1为drawable文件夹下的图片文件）

3、mainactivity.java增加就三行，位置不同。

private ViewFlipper vflp_help;
vflp_help = (ViewFlipper) findViewById(R.id.vflp_help);
vflp_help.startFlipping();

完全代码：

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
    private ViewFlipper vflp_help;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vflp_help = (ViewFlipper) findViewById(R.id.vflp_help);
        vflp_help.startFlipping();
    }

}

动图展示：

感谢：https://blog.csdn.net/w690333243/article/details/73559268

2022.11.13补充：

上面的方法在实际项目中使用时效果不好，图片不动，也不知道什么原因。所以又改回了好用的方法如下：

1、保留right_in.xml、right_out.xml文件。

2、不需要item_view1.xml、item_view2.xml、item_view3.xml、item_view4.xml四个框架。

3、删除翻转视图中的下面四行，其实这个删除了上面那四个框架就不起作用了。

代码如下：

<ViewFlipper
        android:id="@+id/vflp_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">
        
    </ViewFlipper>

4、在activity里增加一个数组变量，其实也就是图片的位置数组(我这里用的是三张图片）。

private int[] images = new int[]{R.drawable.a1, R.drawable.a2, R.drawable.a3};

5、在activity的oncreate里面增加下面代码后就可以完美显示了：

vflp_help = (ViewFlipper) findViewById(R.id.vflp_help);
        vflp_help.startFlipping();
        for (int i = 0; i < images.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(images[i]);
            vflp_help.addView(iv);
        }
        vflp_help.setAutoStart(true);
        vflp_help.setFlipInterval(4000);

上面代码有setFlipInterval，也是设置图片切换时间，有了这个在xml文件中的flipinterval设置无效，也可以删除。

动图展示：