Android自动图片轮播示例

什么是Android自动图片轮播？

在本教程中，我们将学习如何在Android应用程序中使用Kotlin作为编程语言实现自动图片轮播。

自动图片轮播是一种UI小部件，它包含多个图像，这些图像会自动从左到右或反方向滑动。这种类型的功能在许多电子商务应用程序中都有使用，这些应用程序使用自动图片轮播小部件向客户展示不同类型的横幅。

自动图片轮播的实现

我们将创建一个简单的应用程序，在这个应用程序中，我们将在应用程序内简单地显示一个自动图片轮播，其中包含3张图片。我们将使用图片URL从互联网加载这些图片，并在我们的自动图片轮播中显示这些图片。我们将遵循分步指南，在Android应用程序中实现循环可填充加载器。

步骤 1：在Android Studio中创建一个新项目

导航到Android Studio，如下面的屏幕所示。在下面的屏幕中，单击“新建项目”以创建一个新的Android Studio项目。

单击“新建项目”后，您将看到下面的屏幕。

在此屏幕中，我们只需选择“空活动”并单击“下一步”。单击“下一步”后，您将看到下面的屏幕。

在此屏幕中，我们只需指定项目名称。然后包名将自动生成。

注意 - 确保将语言选择为Kotlin。

指定所有详细信息后，单击“完成”以创建一个新的Android Studio项目。

创建项目后，我们将看到两个打开的文件，即activity_main.xml和MainActivity.kt文件。

步骤 2：在build.gradle文件中添加依赖项以使用此库

导航到Gradle Scripts>build.gradle文件，并在dependencies部分添加以下依赖项。

implementation 'com.github.smarteist:autoimageslider:1.3.9'
implementation "com.github.bumptech.glide:glide:4.11.0"

在dependencies部分，我们将添加上面显示的两个依赖项。第一个依赖项用于在我们的应用程序中创建自动图片轮播，第二个依赖项是Glide，它用于使用图片URL从Internet加载图片。

添加上述依赖项后，您将在IDE的右上角看到“立即同步”选项。只需单击它即可同步您的项目并在您的项目中安装此依赖项。

步骤 3：使用activity_main.xml

导航到activity_main.xml。如果此文件不可见。要打开此文件。在左侧窗格中导航到app>res>layout>activity_main.xml以打开此文件。打开此文件后。将以下代码添加到其中。代码中添加了注释以详细了解。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

   <!-- creating text view for displaying heading-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/slider"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Auto Image Slider in Android"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!--Creating auto image slider on below line-->
   <com.smarteist.autoimageslider.SliderView
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="150dp"
      android:layout_centerInParent="true"
      app:sliderAnimationDuration="600"
      app:sliderAutoCycleDirection="back_and_forth"
      app:sliderIndicatorAnimationDuration="600"
      app:sliderIndicatorEnabled="true"
      app:sliderIndicatorGravity="center_horizontal|bottom"
      app:sliderIndicatorMargin="15dp"
      app:sliderIndicatorOrientation="horizontal"
      app:sliderIndicatorPadding="3dp"
      app:sliderIndicatorRadius="2dp"
      app:sliderIndicatorSelectedColor="#5A5A5A"
      app:sliderIndicatorUnselectedColor="#BCB8B8"
      app:sliderScrollTimeInSec="1" />

</RelativeLayout>

说明 - 在上面的代码中，根元素是Android中的相对布局。此布局是一个视图组，用于相对于彼此对齐其中的所有元素。借助ID或位置，我们可以相对地对齐RelativeLayout中的所有元素。

在此相对布局中，我们创建的第一个视图是TextView。它用于显示简单的文本消息。在此TextView小部件中，我们将其宽度指定为match_parent，以便它占用移动设备的完整宽度，并将高度指定为wrap_content以占用文本高度。我们为TextView指定ID，它是该小部件的唯一标识符。我们可以使用此ID对TextView执行某些操作，例如覆盖新文本。然后，我们添加一个layout_above参数，以借助循环可填充加载器视图ID将此TextView布局对齐到循环可填充加载器的上方。然后，我们从所有侧面为TextView添加边距。之后，我们添加一个text参数，在其中我们将指定必须在TextView中显示的值。指定文本后，我们指定文本对齐方式。这会将TextView小部件内的文本对齐到小部件的中心。然后，我们指定文本颜色为黑色，文本大小为20sp，最后指定文本样式为粗体。

添加标题的TextView后，我们创建滑块视图以在Android应用程序中使用自动图片轮播。首先，我们在其中指定其唯一ID，然后为小部件指定高度和宽度。之后，我们通过调用centerInParent将此小部件对齐到屏幕的中心。然后，我们将滑块动画持续时间设置为600毫秒。然后，我们将滑块自动循环方向设置为来回。之后，我们还将滑块指示器动画持续时间设置为600毫秒。然后，我们调用sliderIndicatorEnabled为true以显示滑块指示器。之后，我们将滑块指示器重力设置为滑块视图的中心。从所有侧面添加滑块指示器的边距。然后，我们添加指示器的边距、指示器的方向为水平、指示器的填充和指示器的半径。之后，我们设置指示器的选中和未选中颜色，最后将滑块滚动时间设置为1秒。

最后，我们为RelativeLayout添加一个结束标签，因为TextView和按钮都包含在我们的RelativeLayout中。

步骤 4：为滑块视图的项目创建新的布局文件

现在，我们将创建一个新的布局文件，我们将将其用于滑块视图的各个项目。要创建该文件，请导航到app>res>layout>右键单击它>新建>布局资源文件，并将文件名指定为slider_item，然后单击“创建”以创建一个新文件。创建该文件后，将以下代码添加到其中。代码中添加了注释以详细了解。

<?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">

   <!--Creating an image view to display in slider view-->
   <ImageView
      android:id="@+id/idIVSliderItem"
      android:layout_width="400dp"
      android:layout_height="300dp"
      android:layout_centerHorizontal="true" />

</RelativeLayout>

说明 - 在上面的代码中，根元素是Android中的相对布局。此布局是一个视图组，用于相对于彼此对齐其中的所有元素。借助ID或位置，我们可以相对地对齐RelativeLayout中的所有元素。

在此相对布局中，我们创建了一个ImageView，用于在我们的自动图片轮播中显示图片。对于此ImageView，我们指定了唯一的ID，我们将使用它来为其设置图片。然后，我们为ImageView指定宽度和高度。之后，我们将layout_centerHorizontal设置为true以将ImageView水平对齐到屏幕中心。

最后，我们为RelativeLayout添加一个结束标签，因为TextView和按钮都包含在我们的RelativeLayout中。

步骤 5：创建适配器类以将数据设置为滑块视图的项目

适配器类用于将数据设置为滑块视图的每个项目。在此类中，我们将指定必须为滑块视图的项目显示哪个布局文件。然后，我们将初始化该布局文件的项目并将数据设置为该布局文件，例如，在当前情况下，我们将更新图片。

现在要创建适配器类。导航到app>java>您的应用程序的包名>右键单击它>新建>Java/Kotlin类，并将文件命名为SliderAdapter，并将以下代码添加到其中。代码中添加了注释以详细了解。

package com.gtappdevelopers.androidapplication

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import com.bumptech.glide.Glide
import com.smarteist.autoimageslider.SliderViewAdapter


class SliderAdapter(private val sliderList: List<String>) :
   SliderViewAdapter<SliderAdapter.SliderViewHolder>() {
  
   // creating  a class for slider view holder
   class SliderViewHolder(ItemView: View) : SliderViewAdapter.ViewHolder(ItemView) {
      // on below line creating and initializing variable for slider image view with unique id.
      val sliderIV: ImageView = itemView.findViewById(R.id.idIVSliderItem)
   }

  
   // below method is use to return the count for the size of slider list
   override fun getCount(): Int {
      return sliderList.size
   }

   override fun onCreateViewHolder(parent: ViewGroup?): SliderAdapter.SliderViewHolder {
      // on below line we are creating a variable to inflate the layout file which we have created.
      val itemView: View =
         LayoutInflater.from(parent!!.context).inflate(R.layout.slider_item, null)
      // on below line we are passing that view to view holder class.
      return SliderViewHolder(itemView)
   }

   override fun onBindViewHolder(viewHolder: SliderAdapter.SliderViewHolder?, position: Int) {
      // on below line we are loading an image from image url using Glide library and displaying that image in
      // our slider image view
      Glide.with(viewHolder!!.itemView).load(sliderList.get(position)).fitCenter()
         .into(viewHolder.sliderIV)
   }
}

说明 - 在上面的代码中，我们通过将类名指定为SliderAdapter来创建一个适配器类，并且我们使用SliderViewAdapter扩展该类以获取该类的属性。除此之外，我们还将字符串列表作为参数传递给我们的类。

之后，我们必须创建一个名为SliderViewHolder的内部类，它将保存SliderView的项目。在此类中，我们将为在slider_item.xml文件中创建的ImageView创建一个变量。我们将使用在slider_item.xml文件中指定的ID初始化此变量。

之后，我们必须覆盖SliderViewAdapter类的默认方法，如下所示：

• getCount() - 在此方法中，我们必须返回必须在滑块视图中显示的数据列表的大小。对于我们的滑块视图，我们从列表中显示图片，因此我们将返回列表的大小以返回列表的大小以获取项目计数。

• onCreateViewHolder() - 在此方法中，我们将填充必须为滑块视图的项目显示的布局文件。我们将填充命名为slider_item的布局文件，并将此itemView传递给我们的SliderViewHolder以初始化此布局文件中的视图。

• onBindViewHolder() – 在此方法中，我们将为我们在 slider_item.xml 文件中创建的 ImageView 设置数据。我们将使用 Glide 库从此 ImageView 中的 URL 加载图像。我们从名为 sliderList 的变量获取的数组列表中获取此图像 URL。我们正在从该图像 URL 中的滑块视图的每个项目的 ImageView 内加载图像。

步骤 6：在 AndroidManifest.xml 文件中添加互联网权限

由于我们使用图像 URL 从互联网加载图像，因此我们必须在我们的 Android 应用程序中添加互联网权限以访问互联网以加载这些图像。所以我们必须添加互联网权限。要添加互联网权限。导航到 app>AndroidManifest.xml 文件并在 application 标签之上添加以下权限。

<uses-permission android:name="android.permission.INTERNET"/>

步骤 7：使用 MainActivity.kt

导航到 MainActivity.kt。如果此文件不可见。要打开此文件。在左侧窗格中导航到 app>java>您的应用程序的包名>MainActivity.kt 以打开此文件。打开此文件后。将以下代码添加到其中。代码中添加了注释以详细了解。

package com.gtappdevelopers.androidapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.smarteist.autoimageslider.SliderView
import java.util.*
class MainActivity : AppCompatActivity() {
   // creating variable for slider view
   lateinit var sliderView: SliderView
   // on below line creating variables for image urls.
   var url1 =
      "https://developer.android.com.cn/static/codelabs/basic-android-kotlin-compose-first-program/img/3bbebda874e6003b_960.png"
   var url2 =
      "https://lh3.googleusercontent.com/GTmuiIZrppouc6hhdWiocybtRx1Tpbl52eYw4l-nAqHtHd4BpSMEqe-vGv7ZFiaHhG_l4v2m5Fdhapxw9aFLf28ErztHEv5WYIz5fA"
   var url3 =
      "https://tutorialspoint.com/images/logo.png"

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      // on below line initializing variables for auto image slider.
      sliderView = findViewById(R.id.slider)
      // on below line creating variable for array list.
      val sliderDataArrayList: ArrayList<String> = ArrayList()
      // on below line adding urls in slider list.
      sliderDataArrayList.add(url1)
      sliderDataArrayList.add(url2)
      sliderDataArrayList.add(url3)
      // on below line initializing our adapter class by passing our list to it.
      val adapter = SliderAdapter(sliderDataArrayList)
      // on below line setting auto cycle direction for slider view from left to right.
      sliderView.setAutoCycleDirection(SliderView.LAYOUT_DIRECTION_LTR);
      // on below line setting adapter for slider view.
      sliderView.setSliderAdapter(adapter);
      // on below line setting scroll time for slider view
      sliderView.setScrollTimeInSec(3);
      // on below line setting auto cycle for slider view.
      sliderView.setAutoCycle(true);
      // on below line setting start cycle for slider view.
      sliderView.startAutoCycle();
   }
}

说明 – 在上面 MainActivity.kt 文件的代码中。首先，我们为滑块视图创建一个变量，然后我们为图像 URL 创建一个名为 url1、url2、url3 的变量，并使用我们必须在自动图像滑块中显示的图像 URL 初始化这些变量。

现在我们将看到 onCreate 方法。这是每个 Android 应用程序的默认方法。创建应用程序视图时会调用此方法。在此方法内部，我们正在设置内容视图，即名为 activity_main.xml 的布局文件，以从该文件设置 UI。

指定视图后，我们使用我们在 activity_main.xml 文件中提供的唯一 ID 初始化我们的滑块视图。

初始化滑块视图后，我们创建一个数组列表并对其进行初始化。然后我们将数据作为 url1、url2 和 url3 添加到其中。之后，我们初始化我们的适配器类并将我们的滑块数组列表传递给它。之后，我们将滑块视图自动循环方向从左到右设置，以便滑块内的图像可以在滑块视图中从左到右移动。然后，我们为上面创建的名为 adapter 的滑块视图设置适配器。然后，我们将滑块视图项目的滚动时间设置为 3 秒。然后将滑块视图的自动循环设置为 true。最后，我们启动滑块视图循环。

添加上述代码后，我们只需点击顶部的绿色图标即可在移动设备上运行我们的应用程序。

注意：确保您已连接到您的真实设备或模拟器。

结论

在以上教程中，我们学习了什么是自动图像滑块以及如何在我们的 Android 应用程序中实现自动图像滑块以在其中显示图像。

Vaibhav Ahire

更新于： 2023年3月14日

12K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始