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/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.tw/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+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始