Android 中的 AdapterViewFlipper 示例

什麼是 Android 中的 AdapterViewFlipper？

AdapterViewFlipper 是一種小部件，用於在具有相同內容集的兩個或多個檢視之間進行動畫切換。它用於在應用程式中實現類似幻燈片的動畫效果。AdapterViewFlipper 是 ViewAnimator 類的子類，藉助它可以輕鬆地在兩個不同的檢視之間切換。

在 Android 中實現 AdapterViewFlipper

我們將建立一個簡單的應用程式，其中我們將顯示一個簡單的 TextView 來顯示標題和一個 AdapterViewFlipper。在 AdapterViewFlipper 內，我們將顯示一個 ImageView 和一個 TextView 來顯示程式語言。我們將遵循分步指南在 Android 應用程式中實現 AdapterViewFlipper。

步驟 1：在 Android Studio 中建立一個新專案

導航到 Android Studio，如下圖所示。在下面的螢幕中，單擊“新建專案”以建立新的 Android Studio 專案。

單擊“新建專案”後，您將看到下面的螢幕。

在此螢幕中，我們只需選擇“空活動”，然後單擊“下一步”。單擊“下一步”後，您將看到下面的螢幕。

在此螢幕中，我們只需指定專案名稱。然後包名稱將自動生成。

注意 - 確保選擇 Java 作為語言。

指定所有詳細資訊後，單擊“完成”以建立一個新的 Android Studio 專案。

專案建立完成後，我們將看到開啟的兩個檔案：activity_main.xml 和 MainActivity.kt 檔案。

步驟 2：使用 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="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <!-- on below line creating a text view for heading of application-->
   <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/idAVFlipper"
      android:layout_margin="10dp"
      android:text="Adapter View Flipper in Android"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="25sp"
      android:textStyle="bold" />

   <!-- on below lin creating an adapter view flipper-->
   <AdapterViewFlipper
      android:id="@+id/idAVFlipper"
      android:layout_width="match_parent"
      android:layout_height="300dp"
      android:layout_centerInParent="true"
      android:layout_margin="10dp" />
</RelativeLayout>

說明 - 在上面的程式碼中，我們建立了一個根佈局作為 RelativeLayout。在此佈局中，我們建立了 TextView 用於顯示應用程式的簡單標題。之後，我們建立了一個 AdapterViewFlipper 小部件來顯示檢視翻轉器。

步驟 3：為 AdapterViewFlipper 的專案建立一個新的 xml 檔案

導航到 app>res>xml>右鍵單擊它>新建 XML 資原始檔，並將其命名為 view_flipper_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">

   <!-- on below line creating an image view for displaying in adapter view flipper-->
   <ImageView
      android:id="@+id/idIVLanguage"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:layout_centerInParent="true"
      android:layout_margin="10dp"
      android:padding="4dp" />

   <!-- on below line creating a text view for adapter view flipper -->
   <TextView
      android:id="@+id/idTVProgrammingLanguage"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idIVLanguage"
      android:gravity="center"
      android:textAlignment="center"
      android:textColor="@android:color/black"
      android:textSize="18sp"
      android:textStyle="bold" />
</RelativeLayout>

說明 - 在上面的程式碼中，我們建立了一個根佈局作為 RelativeLayout。在此佈局中，我們首先建立了一個 ImageView 來顯示程式語言的影像，之後我們建立了一個 TextView 來顯示程式語言的名稱。

步驟 4：將影像新增到 Drawable 資料夾

複製要新增到檢視翻轉器中的影像。然後導航到 Android Studio 專案>app>res>drawable>右鍵單擊它並將這些影像貼上到 drawable 資料夾中以將其新增到 drawable 資料夾中。

步驟 5：使用 MainActivity.java 檔案

導航到 app>java>您的應用程式的包名>MainActivity.java 檔案，然後向其中新增以下程式碼。程式碼中添加了註釋以便詳細瞭解。

package com.example.androidjavaapp;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterViewFlipper;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

   // on below line creating a variable for adapter view flipper.
   AdapterViewFlipper languageAdapterViewFlipper;

   // on below line creating an array for images.
   int[] languageImageArray = {
      R.drawable.c,
      R.drawable.chash,
      R.drawable.cs,
      R.drawable.html,
      R.drawable.android,
      R.drawable.java,
   };

   // on below line creating an array for names of programming languages.
   String[] programmingLanguages = {
      "C++",
      "C#",
      "CSS",
      "HTML",
      "Android",
      "Java"
   };

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      // on below line initialing language adapter view flipper with id given in activity_main.xml file.
      languageAdapterViewFlipper = findViewById(R.id.idAVFlipper);
      // on below line initializing adapter view flipper.
      AdapterViewFlipperAdapter adapterViewFlipperAdapter = new AdapterViewFlipperAdapter(getApplicationContext(), languageImageArray, programmingLanguages);
      // on below line setting adapter.
      languageAdapterViewFlipper.setAdapter(adapterViewFlipperAdapter);
      // on below line setting flip interval in milli seconds and setting it to auto start to true.
      languageAdapterViewFlipper.setFlipInterval(2600);
      languageAdapterViewFlipper.setAutoStart(true);
   }
}

// on below line creating an adapter view flipper class and extending it with base adapter.
class AdapterViewFlipperAdapter extends BaseAdapter {
   // on below line creating a variable for context, images array, languages array and layout inflater.
   Context context;
   int[] languageImageArray;
   String[] programmingLngArray;
   LayoutInflater inflater;

   // on below line creating a constructor for it.
   public AdapterViewFlipperAdapter(Context context, int[] images, String[] names) {
      this.context = context;
      this.languageImageArray = images;
      this.programmingLngArray = names;
      this.inflater = LayoutInflater.from(context);
   }

   @Override
   public int getCount() {
      // on below line returning count for programming languages array.
      return programmingLngArray.length;
   }

   // below method is for getting item
   @Override
   public Object getItem(int position) {
      return null;
   }

   // below method is for getting item id.
   @Override
   public long getItemId(int position) {
      return 0;
   }

   // below method is use to get the view.
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
      // on below line inflating our layout file which we have created.
      convertView = inflater.inflate(R.layout.view_flipper_item, null);
      // on below line creating and initializing variables for text view and image view
      TextView programmingLngTV = convertView.findViewById(R.id.idTVProgrammingLanguage);
      ImageView languageIV = convertView.findViewById(R.id.idIVLanguage);
      // on below line setting data to our text view and image view and returning our layout file.
      programmingLngTV.setText(programmingLngArray[position]);
      languageIV.setImageResource(languageImageArray[position]);
      return convertView;
   }
}

說明 - 在上面的程式碼中，我們首先為 AdapterViewFlipper 建立變數，然後建立整數陣列來儲存所有影像，之後我們建立字串陣列來新增程式語言的名稱。確保按相同順序新增影像和程式語言的名稱，以便在 AdapterViewFlipper 中正確顯示。

之後，我們在 onCreate 方法中使用我們在 activity_main.xml 檔案中給出的 ID 初始化 AdapterViewFlipper。

之後，我們建立一個內部類併為其命名為 AdapterViewFlipperAdapter。此類將用於將資料設定為 AdapterViewFlipper 的專案，例如 TextView 和 ImageView。在此類中，我們為上下文、語言影像整數陣列、程式語言字串陣列以及上下文變數建立變數。之後，我們為所有這些變數建立建構函式。

getCount 方法用於返回要在 AdapterViewFlipper 中顯示的專案數。在此方法中，我們返回陣列的大小。

之後，getItem 方法用於獲取專案。然後建立另一個名為 getItemId 的方法，我們將其返回為 0。

之後，我們建立一個 getView 方法，在該方法中，我們使用佈局膨脹器來膨脹佈局檔案。

之後，我們為 TextView、ImageView 建立變數，並使用我們在佈局檔案中給出的 ID 初始化這些變數。之後，我們從影像陣列和語言名稱陣列設定 TextView 和 ImageView 的資料。最後，我們返回我們建立的檢視。

建立介面卡類後，我們透過傳遞上下文、程式語言陣列和影像陣列在 onCreate 方法中初始化此介面卡。然後我們將此介面卡設定為我們的 AdapterViewFlipper。之後，我們設定翻轉間隔並啟動我們的 AdapterViewFlipper。

新增上述程式碼後，我們只需單擊頂部欄中的綠色圖示即可在移動裝置上執行我們的應用程式。

注意 - 確保已連線到您的真實裝置或模擬器。

結論

在本教程中，我們學習了什麼是 Android 中的 AdapterViewFlipper，以及如何使用它來為應用程式中的不同檢視顯示幻燈片動畫。

更新於：2023年3月14日

438 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告