שליטה במקלדת התוכנה והנפשה

אנסה ליצור מוזיקה

‫Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך משתמשים במקלדת בכתיבת הודעה

מקלדת וירטואלית בכתיבה →

באמצעות WindowInsetsCompat, האפליקציה יכולה לשלוח שאילתות למקלדת הווירטואלית (שנקראת גם IME) ולשלוט בה, בדומה לאופן שבו היא מקיימת אינטראקציה עם סרגלי המערכת. האפליקציה יכולה גם להשתמש ב-WindowInsetsAnimationCompat כדי ליצור מעברים חלקים כשמקלדת התוכנה נפתחת או נסגרת.

איור 1. שתי דוגמאות למעבר בין מצב פתוח למצב סגור של המקלדת שמופיעה במסך.

דרישות מוקדמות

לפני שמגדירים את השליטה ואת האנימציה של המקלדת הווירטואלית, צריך להגדיר את האפליקציה כך שתוצג מקצה לקצה. ההגדרה הזו מאפשרת לתוסף לטפל בשוליים של חלון המערכת, כמו סרגלי המערכת והמקלדת במסך.

אנימציית ברירת מחדל של שוליים פנימיים מסונכרנים

הערה: מפתחי Jetpack Compose לא צריכים לבצע שום פעולה. Compose מטפל באנימציות של המקלדת הווירטואלית ובמעברים של פריסת הרכיבים באופן אוטומטי.

החל מרמת API‏ 37.2 ומעלה, אפליקציות שמשתמשות בהתאמות פריסת החלון שמוגדרות כברירת מחדל (כמו SOFT_INPUT_ADJUST_RESIZE או SOFT_INPUT_ADJUST_PAN כשמציגים את ה-IME באמצעות WindowInsetsController.show(WindowInsets.Type.ime())) בלי להטמיע WindowInsetsAnimationCompat.Callback בהתאמה אישית, יכולות ליהנות מאנימציות מסונכרנות ברמת המערכת, פריים אחר פריים. כשהתכונה הזו מופעלת, היא מחילה באופן אוטומטי את השוליים הפנימיים על כל פריים ומפעילה מעבר פריסה, וכך יוצרת מעבר חלק כשהמקלדת זזה.

כדי להפעיל את ההתנהגות הזו, מוסיפים את התג <property> הבא לפעילות או לאפליקציה בקובץ AndroidManifest.xml:

<property
    android:name="android.window.PROPERTY_COMPAT_ALLOW_SYNCHRONIZED_INSETS_ANIMATION"
    android:value="true" />

הערה: אם התכונה הזו גורמת לבעיות בפריסה או לגמגום (בגלל התדירות הגבוהה יותר של פריסות מחדש בהיררכיות מורכבות), אפשר להשבית אותה על ידי הגדרת ערך המאפיין ל-false.

ביצוע אנימציות של תמונות ממוזערות מחוץ ל-thread הראשי

הערה: מפתחים של Jetpack Compose לא צריכים לבצע שום פעולה. Compose מטפל באופן אוטומטי בתוספות של חלונות ובאנימציות של מקלדות מחוץ לשרשור הראשי.

כברירת מחדל, כשרושמים WindowInsetsAnimationCompat.Callback, המערכת מוודאת שאנימציית החלון הפנימי תפעל בשרשור הראשי של האפליקציה. הפעולה הזו נדרשת אם האפליקציה מתעדכנת ומסנכרנת באופן רציף את פריסת התצוגה שלה במהלך האנימציה (כמו בשיטה onProgress). עם זאת, אם האפליקציה צריכה רק להאזין למעברים במחזור החיים (למשל, כשה-IME מתחיל או מסיים את האנימציה) ולא צריכה לעדכן את התצוגות פריים אחר פריים, הפעלה בשרשור הראשי עלולה לגרום לתקורה מיותרת ולגמגום באנימציה – במיוחד אם השרשור הראשי עמוס בפעולות אחרות.

מגרסה 37.2 של API ואילך, אפשר להשתמש ב-ViewTreeObserver.WindowInsetsAnimationListener כדי לעקוב אחרי המעברים האלה. מכיוון שהמאזין הזה לא מקבל עדכוני התקדמות מפריים לפריים (אין קריאה חוזרת (callback) של onProgress), המערכת יכולה להריץ את האנימציה של המסגרת הפנימית ב-thread ייעודי לאנימציה ולא ב-thread הראשי, וכך המעבר יהיה חלק יותר.

Kotlin

val listener = object : ViewTreeObserver.WindowInsetsAnimationListener {
  override fun onPrepare(animation: WindowInsetsAnimation) {
    // Handle preparation before animation starts
  }

  override fun onEnd(animation: WindowInsetsAnimation) {
    // Clean up temporary changes
  }
}

// Add the listener
view.viewTreeObserver.addWindowInsetsAnimationListener(listener)

// Remove the listener when no longer needed
view.viewTreeObserver.removeWindowInsetsAnimationListener(listener)

Java

ViewTreeObserver.WindowInsetsAnimationListener listener =
    new ViewTreeObserver.WindowInsetsAnimationListener() {
      @Override
      public void onPrepare(@NonNull WindowInsetsAnimation animation) {
        // Handle preparation before animation starts
      }

      @Override
      public void onEnd(@NonNull WindowInsetsAnimation animation) {
        // Clean up temporary changes
      }
    };

// Add the listener
view.getViewTreeObserver().addWindowInsetsAnimationListener(listener);

// Remove the listener when no longer needed
view.getViewTreeObserver().removeWindowInsetsAnimationListener(listener);

בדיקת הניראות של תוכנת המקלדת

משתמשים בWindowInsets כדי לבדוק את הרשאות הגישה למקלדת התוכנה.

Kotlin

val insets = ViewCompat.getRootWindowInsets(view) ?: return
val imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime())
val imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom

Java

WindowInsetsCompat insets = ViewCompat.getRootWindowInsets(view);
boolean imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime());
int imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;

לחלופין, אפשר להשתמש ב-ViewCompat.setOnApplyWindowInsetsListener כדי לבחון שינויים במידת הנראות של המקלדת הווירטואלית.

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { _, insets ->
  val imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime())
  val imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
  insets
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, insets) -> {
  boolean imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime());
  int imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;
  return insets;
});

הערה: כדי להשיג את התאימות הטובה ביותר לאחור עם ההטמעה הזו של AndroidX, צריך להגדיר את android:windowSoftInputMode="adjustResize" לפעילות בקובץ AndroidManifest.xml.

סנכרון האנימציה עם המקלדת הווירטואלית

כשמשתמש מקיש על שדה להזנת טקסט, המקלדת מחליקה למקומה מתחתית המסך, כמו שמוצג בדוגמה הבאה:

איור 2. אנימציה מסונכרנת של מקלדת.

• בדוגמה שכותרתה 'לא מסונכרן' באיור 2 מוצגת התנהגות ברירת המחדל ב-Android 10 (רמת API‏ 29), שבה שדה הטקסט והתוכן של האפליקציה נצמדים למקום במקום להסתנכרן עם האנימציה של המקלדת – התנהגות שעלולה להיות לא נעימה לצפייה.

• ב-Android 11 (רמת API‏ 30) ומעלה, אפשר להשתמש ב-WindowInsetsAnimationCompat כדי לסנכרן את המעבר של האפליקציה עם ההחלקה של המקלדת למעלה ולמטה מהחלק התחתון של המסך. התנועה נראית חלקה יותר, כמו בדוגמה שכותרתה 'מסונכרן' באיור 2.

הערה: אל תשתמשו ב-WindowInsets ב-setWindowInsetsApplyListener לאובייקטים של ViewGroup ברמת ההורה. במקום זאת, אפשר להשתמש ב-WindowInsetsAnimatorCompat ב-Android מגרסה 10 ומטה.

מגדירים את WindowInsetsAnimationCompat.Callback עם התצוגה שרוצים לסנכרן עם האנימציה של המקלדת.

Kotlin

ViewCompat.setWindowInsetsAnimationCallback(
  view,
  object : WindowInsetsAnimationCompat.Callback(DISPATCH_MODE_STOP) {
    // Override methods.
  }
)

Java

ViewCompat.setWindowInsetsAnimationCallback(
    view,
    new WindowInsetsAnimationCompat.Callback(
        WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_STOP
    ) {
      // Override methods.
    });

יש כמה שיטות להחלפה ב-WindowInsetsAnimationCompat.Callback, כלומר onPrepare(),‏ onStart(),‏ onProgress() ו-onEnd(). מתחילים בשיחה ל-onPrepare() לפני שמבצעים שינויים בפריסה.

‫onPrepare מופעלת כשאנימציה של שוליים פנימיים מתחילה ולפני שהתצוגות מסודרות מחדש בגלל אנימציה. אפשר להשתמש בה כדי לשמור את מצב ההתחלה, שבמקרה הזה הוא הקואורדינטה התחתונה של התצוגה.

איור 3. משתמשים ב-onPrepare() כדי לתעד את מצב ההתחלה.

בקטע הקוד הבא מוצגת דוגמה להפעלה של onPrepare:

Kotlin

var startBottom = 0f

override fun onPrepare(
  animation: WindowInsetsAnimationCompat
) {
  startBottom = view.bottom.toFloat()
}

Java

float startBottom;

@Override
public void onPrepare(
    @NonNull WindowInsetsAnimationCompat animation
) {
  startBottom = view.getBottom();
}

הפונקציה onStart נקראת כשאנימציית שוליים פנימיים מתחילה. אפשר להשתמש בו כדי להגדיר את כל מאפייני התצוגה למצב הסופי של שינויי הפריסה. אם הגדרתם קריאה חוזרת (callback) של OnApplyWindowInsetsListener לאחת מהתצוגות, היא כבר נקראת בשלב הזה. זה הזמן לשמור את מצב הסיום של מאפייני התצוגה.

איור 4. שימוש ב-onStart() כדי להקליט את מצב הסיום.

בקטע הקוד הבא מוצגת דוגמה להפעלה של onStart:

Kotlin

var endBottom = 0f

override fun onStart(
  animation: WindowInsetsAnimationCompat,
  bounds: WindowInsetsAnimationCompat.BoundsCompat
): WindowInsetsAnimationCompat.BoundsCompat {
  // Record the position of the view after the IME transition.
  endBottom = view.bottom.toFloat()

  return bounds
}

Java

float endBottom;

@NonNull
@Override
public WindowInsetsAnimationCompat.BoundsCompat onStart(
    @NonNull WindowInsetsAnimationCompat animation,
    @NonNull WindowInsetsAnimationCompat.BoundsCompat bounds
) {
  endBottom = view.getBottom();
  return bounds;
}

הפונקציה onProgress מופעלת כשהשוליים הפנימיים משתנים כחלק מהפעלת אנימציה, כך שאפשר לבטל את ההגדרה שלה ולקבל התראה על כל פריים במהלך האנימציה של המקלדת. מעדכנים את מאפייני התצוגה כך שהאנימציה של התצוגה תהיה מסונכרנת עם המקלדת.

בשלב הזה, כל השינויים בפריסה הושלמו. לדוגמה, אם משתמשים ב-View.translationY כדי להזיז את התצוגה, הערך יורד בהדרגה בכל קריאה של השיטה הזו, ובסופו של דבר מגיע ל-0 למיקום הפריסה המקורי.

איור 5. שימוש ב-onProgress() כדי לסנכרן את האנימציות.

בקטע הקוד הבא מוצגת דוגמה להפעלה של onProgress:

Kotlin

override fun onProgress(
  insets: WindowInsetsCompat,
  runningAnimations: MutableList<WindowInsetsAnimationCompat>
): WindowInsetsCompat {
  // Find an IME animation.
  val imeAnimation = runningAnimations.find {
    it.typeMask and WindowInsetsCompat.Type.ime() != 0
  } ?: return insets

  // Offset the view based on the interpolated fraction of the IME animation.
  view.translationY =
    (startBottom - endBottom) * (1 - imeAnimation.interpolatedFraction)

  return insets
}

Java

@NonNull
@Override
public WindowInsetsCompat onProgress(
    @NonNull WindowInsetsCompat insets,
    @NonNull List<WindowInsetsAnimationCompat> runningAnimations
) {
  // Find an IME animation.
  WindowInsetsAnimationCompat imeAnimation = null;
  for (WindowInsetsAnimationCompat animation : runningAnimations) {
    if ((animation.getTypeMask() & WindowInsetsCompat.Type.ime()) != 0) {
      imeAnimation = animation;
      break;
    }
  }
  if (imeAnimation != null) {
    // Offset the view based on the interpolated fraction of the IME animation.
    view.setTranslationY((startBottom - endBottom)

        *   (1 - imeAnimation.getInterpolatedFraction()));
  }
  return insets;
}

אפשר גם לשנות את onEnd. המערכת קוראת לשיטה הזו אחרי שהאנימציה מסתיימת. זה הזמן המתאים למחוק שינויים זמניים.

מקורות מידע נוספים

• ‫WindowInsetsAnimation ב-GitHub.