Android 中的图像切换器示例

在某些情况下，您可能不希望图像突然出现在屏幕上，而是希望它通过某种动画从一张图像过渡到另一张图像。 Android 以 ImageSwitcher 的形式支持这一点。图像切换器允许您通过图像在屏幕上的显示方式向图像添加一些过渡。

我们将在本文中构建什么？

在本文中，我们将使用按钮从左向右滑动图像，反之亦然，同时 ImageSwithcer 执行其操作。这是我们将要构建的应用程序的示例视频。请注意，我们将用Java语言实现这个项目。

分步实施

步骤 1：创建一个新项目

• 打开一个新项目。
• 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
• 您可以在方便时更改项目的名称。
• 将有两个名为activity_main.xml和MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

第 2 步：在 drawable 中添加新的矢量资源

导航到可绘制 > 右键单击 > 新建 > 矢量资产，然后从剪贴画中选择以下资产。

1. 导航下一步：

2. 之前导航：

第 3 步：使用 XML 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml l 文件的代码。

按照路径app > res > 右键单击 > new > directory > 将其命名为“ anim ” 。在anim中新建一个动画资源文件，命名为from_left.xml。下面是from_left.xml文件的代码 -

在anim中新建一个动画资源文件，命名为from_right.xml。下面是from_right.xml文件的代码

在anim中新建一个动画资源文件，命名为to_right.xml。下面是to_right.xml文件的代码 -

在anim中新建一个动画资源文件，命名为to_left.xml。下面是to_left.xml文件的代码 -

第 4 步：使用 MainActivity。Java

转到MainActivity。 Java文件并参考以下代码。下面是 MainActivity 的代码。 Java文件。

Java

package com.example.imageswitcher;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewSwitcher;
  
public class MainActivity extends AppCompatActivity {
  
    // initialize variables
    ImageButton btPrevious,btNext;
    ImageSwitcher imageSwitcher;
  
    int imageList[]={R.drawable.android,R.drawable.java,R.drawable.js
    ,R.drawable.python,R.drawable.php};
    int count=imageList.length;
    int currentIndex=0;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // assign variables
        btPrevious=findViewById(R.id.bt_previous);
        btNext=findViewById(R.id.bt_next);
        imageSwitcher=findViewById(R.id.image_switcher);
  
        // implement the ViewFactory interface and implement
        // unimplemented method that returns an imageView
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory(){
            @Override
            public View makeView() {
                ImageView imageView= new ImageView(getApplicationContext());
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT
                        ,ViewGroup.LayoutParams.FILL_PARENT
                ));
                // returning imageview
                return imageView;
            }
        });
        imageSwitcher.setImageResource(imageList[0]);
        // set on click listener on left button
        btPrevious.setOnClickListener(new  View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // setting animation to swipe image from right to left
                imageSwitcher.setInAnimation(MainActivity.this,R.anim.from_right);
                imageSwitcher.setOutAnimation(MainActivity.this,R.anim.to_left);
                --currentIndex;
                // condition
                if(currentIndex<0)
                    currentIndex=imageList.length-1;
                imageSwitcher.setImageResource((imageList[currentIndex]));
            }
        });
  
        // set on click listener on right(next) button
        btNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
  
                // setting animation to swipe image from left to right
                imageSwitcher.setInAnimation(MainActivity.this,R.anim.from_left);
                imageSwitcher.setOutAnimation(MainActivity.this,R.anim.to_right);
                currentIndex++;
                // condition
                if(currentIndex==count)
                    currentIndex=0;
                imageSwitcher.setImageResource(imageList[currentIndex]);
            }
        });
    }
}

这是我们应用程序的最终输出。

输出：