Android 自动图片滑块示例
什么是 Android 自动图片滑块?
在本教程中，我们将学习如何使用 Kotlin 编程语言在 Android 应用程序中实现自动图片滑块。
自动图片滑块是一个 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 文件，并在依赖项部分添加以下依赖项。
implementation 'com.github.smarteist:autoimageslider:1.3.9' implementation "com.github.bumptech.glide:glide:4.11.0"
在依赖项部分，我们将添加两个如上所示，依赖项如下。第一个依赖项用于在我们的应用中创建自动图片滑块，第二个依赖项是 Glide，用于通过图片 URL 从互联网加载图片。
添加上述依赖项后，您将在 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 或位置来相对对齐相对布局中的所有元素。
在此相对布局中，我们创建的第一个视图是文本视图。它用于显示一条简单的文本消息。在此文本视图窗口小部件中，我们将其宽度指定为 match_parent，以便它将占据移动设备的完整宽度，并将高度指定为环绕内容以获取文本高度。我们为文本视图指定了 id，它是该窗口小部件的唯一标识符。我们可以使用此 id 来执行此文本视图的某些操作，例如为其覆盖新文本。然后，我们在上方参数中添加一个布局，以便借助圆形可填充加载器视图 id，将此文本视图布局对齐到圆形可填充加载器上方。然后，我们从各个方向为文本视图添加边距。之后，我们添加一个文本作为参数，并在其中指定要在文本视图中显示的值。指定文本后，我们将指定文本对齐方式。这将使文本视图窗口小部件内的文本与窗口小部件的中心对齐。然后，我们将文本颜色指定为黑色，文本大小指定为 20sp，最后将文本样式指定为粗体。
添加标题文本视图后，我们将创建滑块视图，以便在 Android 应用程序中使用自动图像滑块。首先，我们为其指定唯一 ID，然后指定窗口小部件的高度和宽度。之后，我们通过调用 centerInParent 将此窗口小部件与屏幕中心对齐。然后，我们将滑块动画持续时间指定为 600 毫秒。接下来，我们将滑块视图的自动循环方向设置为来回。之后，我们将滑块指示器动画持续时间也设置为 600 毫秒。最后，我们将滑块指示器的启用状态设置为 true，以显示滑块指示器。之后，我们将滑块指示器的重力设置为滑块视图的中心。为滑块指示器的所有边缘添加边距。然后，我们为指示器添加边距，将指示器的方向设置为水平，为指示器添加填充，并为指示器添加半径。之后，我们设置指示器的选中和未选中颜色，最后将滑块滚动时间设置为 1 秒。
最后，我们为相对布局添加一个结束标记，因为文本视图和按钮包含在相对布局中。
步骤 4:为滑块视图的项目创建新的布局文件
现在，我们将创建一个新的布局文件，用于滑块视图的各个项目。要创建该文件，请导航至 app>res>layout>右键单击该文件>New>Layout resource file，并将文件名指定为 slider_item，然后单击"Create"以创建新文件。创建该文件后，向其中添加以下代码。代码中添加了注释，可以详细了解。
<?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 或位置来相对对齐相对布局中的所有元素。
在此相对布局中，我们创建了一个图像视图，用于在自动图像滑块中显示图像。我们为此图像视图指定了唯一的 ID，我们将使用该 ID 来设置其图像。然后，我们指定图像视图的宽度和高度。之后，我们将布局中心水平设置为 true，以使图像视图中心水平与屏幕对齐。
最后，我们为相对布局添加一个结束标记，因为文本视图和按钮包含在相对布局中。
步骤 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 扩展该类以获取该类的属性。同时，我们将字符串列表作为参数传递给我们的类。
之后，我们必须创建一个名为 Slider View Holder 的内部类，用于保存 Slider View 的项目。在这个类中，我们将为我们在 slider_item.xml 文件中创建的图像视图创建一个变量。我们将使用我们在 slider_item.xml 文件中指定的 id 初始化这个变量。
之后，我们必须覆盖 SliderViewAdapter 类的默认方法，这些方法如下所示 −
getCount() − 在这个方法中，我们必须返回要在滑块视图中显示的数据列表的大小。对于滑块视图，我们将显示列表中的图像，因此我们将返回列表的大小以获取项目计数。
onCreateViewHolder() − 在此方法中，我们将扩展滑块视图中要显示的布局文件。我们将扩展名为 slider_item 的布局文件，并将该项目视图传递给滑块视图持有者，以初始化此布局文件中的视图。
onBindViewHolder() − 在此方法中，我们将设置在 slider_item.xml 文件中创建的图像视图的数据。我们将使用 Glide 库从此图像视图中的 URL 加载图像。我们从数组列表中获取此图像 URL，而数组列表是从名为 sliderList 的变量中获取的。我们正在将图片从该图片 URL 加载到滑块视图中每个项目的图片视图中。
步骤 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/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://www.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 应用程序中实现自动图像滑块以在其中显示图像。
