Android中使用ViewPager的Image Slider

在谈论Android Apps时，首先想到的是多样性。 Android应用程序种类繁多，可为用户提供精美的动态UI。一种这样的功能是使用向左和向右滑动(而不是单击“按钮”)在Android Apps中导航。它不仅看起来更简单，更优雅，还为用户提供了便利。有许多应用程序使用此滑动功能来滑动应用程序中的不同活动。例如，流行的聊天应用Snapchat使用它来滑动镜头，聊天和故事。在这里，我们讨论如何使用ViewPager创建图像滑块。 ViewPager是Java的类 与Fragments一起使用。它主要用于设计应用程序的UI。下面给出了一个示例GIF，以了解我们将在本文中做些什么。

在Android中创建Image Slider的步骤

步骤1：创建一个新项目

要在Android Studio中创建新项目，请参阅如何在Android Studio中创建/启动新项目。请注意，选择Java作为编程语言。

步骤2：设计UI

• 以下是activity_main.xml文件的代码。我们仅添加了一个ViewPager来显示图像。以下是activity_main.xml文件的完整代码。

• 在应用程序-> res- >布局文件夹中创建一个新的布局资源文件item.xml 。仅添加一个ImageView。下面是item.xml文件的代码。

步骤3：编码部分

• 首先，为ViewPager创建一个适配器，并将其命名为ViewPagerAdapter类，下面是ViewPagerAdapter的完整代码。 Java类。在代码内部添加了注释，以了解代码的每一行。

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.Objects;
  
class ViewPagerAdapter extends PagerAdapter {
  
    // Context object 
    Context context;
      
    // Array of images
    int[] images;
      
    // Layout Inflater
    LayoutInflater mLayoutInflater;
  
  
    // Viewpager Constructor 
    public ViewPagerAdapter(Context context, int[] images) {
        this.context = context;
        this.images = images;
        mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
  
    @Override
    public int getCount() {
        // return the number of images
        return images.length;
    }
  
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == ((LinearLayout) object);
    }
  
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {
        // inflating the item.xml 
        View itemView = mLayoutInflater.inflate(R.layout.item, container, false);
  
        // referencing the image view from the item.xml file 
        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewMain);
          
        // setting the image in the imageView
        imageView.setImageResource(images[position]);
  
        // Adding the View
        Objects.requireNonNull(container).addView(itemView);
  
        return itemView;
    }
  
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
          
        container.removeView((LinearLayout) object);
    }
}

• 为ViewPager创建适配器之后，从XML引用ViewPager并在MainActivity中将适配器设置为它。 Java文件。创建一个整数数组，其中包含我们将在ViewPager中显示的图像。以下是的完整代码 MainActivity。 Java文件。在代码内部添加了注释，以了解代码的每一行。

Java

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
  
    // creating object of ViewPager
    ViewPager mViewPager;
  
    // images array
    int[] images = {R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4,
                    R.drawable.a5, R.drawable.a6, R.drawable.a7, R.drawable.a8};
      
    // Creating Object of ViewPagerAdapter
    ViewPagerAdapter mViewPagerAdapter;
  
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initializing the ViewPager Object
        mViewPager = (ViewPager)findViewById(R.id.viewPagerMain);
  
        // Initializing the ViewPagerAdapter
        mViewPagerAdapter = new ViewPagerAdapter(MainActivity.this, images);
  
        // Adding the Adapter to the ViewPager
        mViewPager.setAdapter(mViewPagerAdapter);
    }
}

输出：在模拟器上运行

附加链接：

• 从链接下载完整项目
• 下载在本项目中使用的图像
• 下载应用程序

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处，前往由我们的专家精心策划的指南，以使您立即做好行业准备！