實作文字放大鏡

試試 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用文字。

Android 9 (API 級別 28) 以上版本提供的放大鏡小工具是一個虛擬放大鏡,透過呈現鏡頭的重疊窗格顯示 View 的放大複製。這項功能可改善文字插入及選取的使用者體驗。將放大器套用至文字時,使用者可在跟隨手指移動的窗格中檢視放大的文字,藉此精確定位游標或選取控點。

圖 1 顯示放大鏡如何協助選取文字。放大鏡 API 並未綁定文字,這個小工具可以用於各種用途,例如,讀取小號字體或者放大地圖上難以辨識的地名。

圖片:擷取適當的選取控點後,畫面上隨即出現放大鏡
圖 1:放大文字。使用者拖曳適當的選取控點後,畫面上會彈出放大鏡圖示協助您找出準確放置點。

放大鏡已與平台小工具 (例如 TextViewEditTextWebView) 整合。可在各種應用程式中提供一致的文字操縱機制。這個小工具附帶一個簡易的 API,方便您根據應用程式的結構定義放大任何 View

API 使用量

您可以透過程式輔助方式,在任意檢視畫面上使用放大鏡,如下所示:

Kotlin

val view: View = findViewById(R.id.view)
val magnifier = Magnifier.Builder(view).build()
magnifier.show(view.width / 2.0f, view.height / 2.0f)

Java

View view = findViewById(R.id.view);
Magnifier magnifier = new Magnifier.Builder(view).build();
magnifier.show(view.getWidth() / 2, view.getHeight() / 2);

假設檢視區塊階層已有第一個版面配置,螢幕上就會顯示放大鏡,並且包含一個以「檢視畫面」中指定座標為中心的區域。窗格會出現在要複製的內容聚焦點上方。放大鏡會一直持續顯示,直到使用者將其關閉為止。

下列程式碼片段說明如何變更放大檢視畫面的背景:

Kotlin

view.setBackgroundColor(...)

Java

view.setBackgroundColor(...);

假設放大鏡內看得見背景顏色,放大鏡顯示的內容現已過時,因為系統仍顯示採用舊背景的檢視畫面區域。如要重新整理內容,請使用 update() 方法,如下所示:

Kotlin

view.post { magnifier.update() }

Java

view.post(magnifier::update);

完成後,請呼叫 dismiss() 方法關閉放大鏡:

Kotlin

magnifier.dismiss()

Java

magnifier.dismiss();

放大使用者互動功能

放大鏡的常見用途之一是可讓使用者透過輕觸動作放大檢視畫面區域,如圖 2 所示。

圖 2. 放大鏡隨著使用者的輕觸移動。將放大鏡套用於 ViewGroup,其中左側包含一個 `ImageView`,右側則包含一個 TextView

根據檢視畫面收到的觸控事件更新放大鏡,即可實現這個功能,如下所示:

Kotlin

imageView.setOnTouchListener { v, event ->
  when (event.actionMasked) {
    MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
      val viewPosition = IntArray(2)
      v.getLocationOnScreen(viewPosition)
      magnifier.show(event.rawX - viewPosition[0], event.rawY - viewPosition[1])
    }
    MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
      magnifier.dismiss()
    }
  }
  true
}

Java

imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                // Fall through.
            case MotionEvent.ACTION_MOVE: {
                final int[] viewPosition = new int[2];
                v.getLocationOnScreen(viewPosition);
                magnifier.show(event.getRawX() - viewPosition[0],
                               event.getRawY() - viewPosition[1]);
                break;
            }
            case MotionEvent.ACTION_CANCEL:
                // Fall through.
            case MotionEvent.ACTION_UP: {
                magnifier.dismiss();
            }
        }
        return true;
    }
});

放大文字時的其他注意事項

如果是平台文字小工具,請務必瞭解具體的放大鏡行為,並在整個 Android 平台上以一致的方式啟用自訂文字檢視區塊放大鏡。請把握以下幾項重點:

  • 當使用者擷取插入或選取控點時,系統會立即觸發放大鏡。
  • 放大鏡始終流暢地跟隨使用者的手指水平移動,同時垂直固定在目前文字行的中間。
  • 水平移動時,放大鏡只能在目前線行的左右邊界之間移動。此外,如果使用者的輕觸離開這些邊界,並且輕觸位置與最近邊界之間的水平距離大於放大鏡內容原本寬度的一半,系統就會關閉放大鏡,因為放大鏡中再也看不見游標。
  • 文字字型過大時,系統絕不會觸發放大鏡。當字型大小的遞減與遞增之間的差距大於放大鏡中的內容高度時,系統就會將文字視為過大。在這種情況下,觸發放大鏡並無助益。