Android 中的縮放滾動檢視


許多 Android 應用程式都具有可縮放滾動功能,該功能使使用者能夠在螢幕上捏合或伸展手指以放大和縮小材料,例如照片或地圖。使用縮放滾動檢視(一種擴充套件 Android ScrollView 並提供內建縮放和滾動支援的自定義檢視)是在 Android 中實現可縮放滾動的一種常用方法。

在本技術文章中,我們將探討如何在 Android 上實現縮放滾動檢視。在本教程中,我們將逐步瞭解開發可縮放滾動所需的基本概念和過程,包括如何設定相關依賴項、建立自定義檢視、處理觸控事件以及管理縮放和滾動功能。

先決條件

縮放滾動檢視是一種獨特的檢視,它擴充套件了 Android 的標準 ScrollView 或 HorizontalScrollView。使用者能夠滾動瀏覽並放大和縮小檢視的內容。縮放和滾動是縮放滾動檢視的兩個主要功能。當檢視中的內容超出檢視的可視範圍時,使用者可以透過滾動在檢視中的內容周圍導航,而不是縮放以更改此處內容的比例。

為了在 Android 中實現縮放滾動檢視,您需要以下先決條件:

  • Android 應用程式開發的基本 Java 或 Kotlin 知識。

  • 在您的開發工作站上安裝了 Android Studio。

  • 熟悉 Android 螢幕層次結構和 XML 佈局檔案。

步驟 1:建立依賴項

在 Android 專案中設定所需的依賴項是將縮放滾動檢視付諸實踐的第一步。以下依賴項必須包含在您的應用程式級 build.gradle 檔案中

implementation 'com.otaliastudios:zoomlayout:2.2.2'

這將在您的專案中包含 ZoomLayout 庫,該庫提供了縮放滾動檢視功能。

步驟 2:建立縮放滾動檢視

下一步是構建一個自定義檢視,該檢視將可縮放滾動功能新增到 Android ScrollView。以下是 Kotlin 實現的示例:

import android.content.Context
import android.util.AttributeSet
import com.otaliastudios.zoom.ZoomLayout

class ZoomScrollView @JvmOverloads constructor(
   context: Context,
   attrs: AttributeSet? = null,
   defStyle: Int = 0
) : ZoomLayout(context, attrs, defStyle) {
        
}

在本例中,我們名為 ZoomScrollView 的唯一檢視擴充套件了 ZoomLayout 庫的 ZoomLayout。我們的縮放滾動檢視將是此自定義檢視。

步驟 3:處理觸控事件

我們必須管理觸控事件才能在我們的自定義縮放滾動檢視中提供可縮放滾動。為了處理觸控事件並新增縮放和滾動功能,我們可以在我們自己的檢視中覆蓋 onTouchEvent() 方法。以下是其用法的示例:

override fun onTouchEvent(event: MotionEvent): Boolean {
   when (event.action) {
      MotionEvent.ACTION_DOWN -> {
         // Handle touch down event
         // ...
      }
      MotionEvent.ACTION_MOVE -> {
         // Handle touch move event
         // ...
      }
      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
         // Handle touch up or cancel event
         // ...
      }
   }
   return super.onTouchEvent(event)
}

在本例中,覆蓋了 onTouchEvent() 方法以處理觸控事件,例如觸控按下、觸控移動、觸控抬起和觸控取消。根據這些觸控事件,您可以設計自己的邏輯來調整縮放和滾動狀態。

步驟 4:管理縮放和滾動功能

ZoomLayout 庫的方法可用於在我們的自定義縮放滾動檢視中實現縮放和滾動功能。以下是其用法的示例:

override fun onTouchEvent(event: MotionEvent): Boolean {
   when (event.action) {
      MotionEvent.ACTION_DOWN -> {
         // Handle touch down event
         // ...
      }
      MotionEvent.ACTION_MOVE -> {
         // Handle touch move event
         // ...
      }
      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
         // Handle touch up or
      }
   }
   return super.onTouchEvent(event)
}

使用 Kotlin 在 Android 中實現縮放滾動檢視的示例

應為縮放滾動檢視建立新的 XML 佈局檔案。例如 activity_main.xml:

示例

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <ScrollView
      android:id="@+id/scrollView"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <LinearLayout
         android:id="@+id/linearLayout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

         <!-- Add your content here -->

      </LinearLayout>

   </ScrollView>

</RelativeLayout>

輸出

將以下程式碼新增到您的活動以初始化縮放滾動檢視:

示例

class ZoomScrollView(context: Context, attrs: AttributeSet) : ScrollView(context, attrs) {
   private val INVALID_POINTER_ID = -1
   private val MODE_NONE = 0
   private val MODE_DRAG = 1
   private val MODE_ZOOM = 2
   private var mode = MODE_NONE

   private var activePointerId = INVALID_POINTER_ID
   private val startPoint = PointF()
   private val midPoint = PointF()
   private val scaleGestureDetector: ScaleGestureDetector

   init {
      scaleGestureDetector = ScaleGestureDetector(context, ScaleListener())
   }

   override fun onTouchEvent(event: MotionEvent): Boolean {
      scaleGestureDetector.onTouchEvent(event)

      when (event.action and MotionEvent.ACTION_MASK) {
         MotionEvent.ACTION_DOWN -> {
            startPoint.set(event.x, event.y)
            midPoint.set(event.x, event.y)
            activePointerId = event.getPointerId(0)
            mode = MODE_DRAG
         }

         MotionEvent.ACTION_MOVE -> {
            if (mode == MODE_DRAG) {
               val dx = event.x - startPoint.x
               val dy = event.y - startPoint.y
               startPoint.set(event.x, event.y)

               if (canScrollHorizontally(dx)) {
                  scrollBy(-dx.toInt(), 0)
               }

               if (canScrollVertically(dy)) {
                  scrollBy(0, -dy.toInt())
               }
            } else if (mode == MODE_ZOOM) {
               val newDist = getDistance(event)
               if (newDist > 10f) {
                  val scale = newDist / midPoint.dist()
                  midPoint.set(event.x, event.y)
                  val matrix = Matrix()
                  matrix.postScale(scale, scale, midPoint.x, midPoint.y)
                  val group = getChildAt(0) as ViewGroup
                  for (i in 0 until group.childCount) {
                     val view = group.getChildAt(i)
                     view.pivotX = midPoint.x
                     view.pivotY = midPoint.y
                     view.scaleX *= scale
                     view.scaleY *= scale
                  }
               }
            }
         }

         MotionEvent.ACTION_UP,
         MotionEvent.ACTION_POINTER_UP -> {
            mode = MODE_NONE
            activePointerId = INVALID_POINTER_ID
         }

         MotionEvent.ACTION_CANCEL -> {
            mode = MODE_NONE
            activePointerId = INVALID_POINTER_ID
         }

         MotionEvent.ACTION_POINTER_DOWN -> {
         val pointerIndex = event.action and MotionEvent.ACTION_POINTER_INDEX_MASK shr MotionEvent.ACTION_POINTER_INDEX_SHIFT
         val x = event.getX(pointer
      }
   }
}      

結論

總之,縮放滾動檢視是 Android 應用程式開發人員建立互動式和使用者友好介面的寶貴工具。透過利用其功能和自定義選項,您可以為應用程式的使用者提供引人入勝且直觀的縮放和滾動體驗。這篇技術文章全面介紹了在 Android 應用程式中實現縮放滾動檢視的基本概念、實現細節和最佳實踐。我們介紹瞭如何設定所需的依賴項、實現縮放滾動檢視小部件以及處理縮放和滾動的觸控事件。我們還討論了諸如可訪問性、效能最佳化以及與各種 Android 版本的相容性等關鍵點。我們鼓勵您在自己的專案中探索和試驗縮放滾動檢視,以增強 Android 應用程式的可用性和視覺吸引力。編碼愉快!

更新於: 2023 年 8 月 1 日

954 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告