如何在 Android 中使用 Dotsindicator 实现 ViewPager？

Android 中的 ViewPager 是一个允许用户左右翻阅数据页面的类。此类提供在应用内翻页的功能。它是支持库中的一个小部件。

什么是Dotsindicator？

当我们有多个视图时，这些点可以帮助我们查看当前打开了哪个视图。点指示器的一些属性如下 -

Attribute	Description
dotsColor	Color of the dots
selectedDotColor	Color of the selected dot (by default the color of the dot)
progressMode	Lets the selected dot color to the dots behind the current one
dotsSize	Size in dp of the dots (by default 16dp)
dotsSpacing	Size in dp of the space between the dots (by default 4dp)
dotsWidthFactor	The dots scale factor for page indication (by default 2.5)
dotsCornerRadius	The dots corner radius (by default the half of dotsSize for circularity)

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

在本文中，我们将看到三种不同类型的点指示符，当我们更改图像视图中的图像时它们会起作用。这是我们将在本文中构建的示例视频。请注意，我们将使用Java语言构建此应用程序。

分步实施

步骤 1：创建一个新项目

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

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

步骤 2. 添加所需的依赖项

导航到 Gradle scripts > build.gradle(module) 并在其中使用以下依赖项-

implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:3.0.3'

步骤 3. 处理 XML 文件

导航到app > res > layout > activity_main.xml文件并在其中使用以下代码 -

导航到应用 > res > 布局 > 右键单击 > 新建 > 布局资源文件并将其作为项目。在 item.xml 文件中使用以下代码 -

第 4 步：处理Java文件

转到 MainActivity。 Java文件并在其中使用以下代码-

Java

package com.example.viewpagerwithdotsindicator;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
  
import android.os.Bundle;
  
import com.tbuonomo.viewpagerdotsindicator.DotsIndicator;
import com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator;
import com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator;
  
public class MainActivity extends AppCompatActivity {
  
    ViewPager viewPager;
    DotsIndicator dot1;
    SpringDotsIndicator dot2;
    WormDotsIndicator dot3;
    ViewAdapter viewAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        viewPager=findViewById(R.id.view_pager);
        dot1=findViewById(R.id.dot1);
        dot2=findViewById(R.id.dot2);
        dot3=findViewById(R.id.dot3);
  
        viewAdapter=new ViewAdapter(this);
        viewPager.setAdapter(viewAdapter);
        dot1.setViewPager(viewPager);
        dot2.setViewPager(viewPager);
        dot3.setViewPager(viewPager);
    }
}

导航到应用 > 右键单击 > 新建 > Java类并将其命名为 ViewAdapter。在 ViewAdapter 中使用以下代码。 Java文件——

Java

package com.example.viewpagerwithdotsindicator;
  
import android.content.Context;
import android.media.Image;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
  
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
  
public class ViewAdapter extends PagerAdapter {
  
    private Context context;
    private LayoutInflater layoutInflater;
    private Integer[] images={R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,R.drawable.five};
  
    public ViewAdapter(Context context)
    {
        this.context=context;
    }
    @Override
    public int getCount() {
        return images.length;
    }
  
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view==object;
    }
  
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        layoutInflater=(LayoutInflater) context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE
        );
        View view =layoutInflater.inflate(R.layout.item,null);
        ImageView imageView=view.findViewById(R.id.image_view);
        imageView.setImageResource(images[position]);
        ViewPager viewPager=(ViewPager) container;
        viewPager.addView(view,0);
        return view;
    }
  
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        ViewPager viewPager=(ViewPager) container;
        View view=(View) object;
        viewPager.removeView(view);
    }
}

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

输出：