Điều khiển và tạo ảnh động cho bàn phím phần mềm

Khi sử dụng WindowInsetsCompat, ứng dụng của bạn có thể truy vấn và điều khiển bàn phím ảo (còn gọi là IME) tương tự như cách ứng dụng tương tác với các thanh hệ thống. Ứng dụng của bạn cũng có thể dùng WindowInsetsAnimationCompat để tạo quá trình chuyển đổi liền mạch khi mở hoặc đóng bàn phím phần mềm.

Hình 1. Hai ví dụ về hiệu ứng chuyển đổi đóng mở bằng bàn phím phần mềm.

Điều kiện tiên quyết

Trước khi thiết lập chế độ điều khiển và ảnh động cho bàn phím phần mềm, hãy định cấu hình ứng dụng để hiển thị ứng dụng từ cạnh này sang cạnh khác. Thao tác này cho phép ứng dụng xử lý các phần lồng ghép cửa sổ hệ thống, chẳng hạn như thanh hệ thống và bàn phím ảo.

Kiểm tra chế độ hiển thị phần mềm bàn phím

Sử dụng WindowInsets để kiểm tra chế độ hiển thị bàn phím phần mềm.

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;

Ngoài ra, bạn có thể dùng ViewCompat.setOnApplyWindowInsetsListener để quan sát các thay đổi đối với chế độ hiển thị bàn phím phần mềm.

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;
});

Đồng bộ hoá ảnh động với bàn phím phần mềm

Người dùng nhấn vào một trường nhập văn bản sẽ khiến bàn phím trượt vào vị trí từ cuối màn hình, như trong ví dụ sau:

Hình 2. Ảnh động bàn phím đã đồng bộ hoá.

  • Ví dụ có nhãn "Chưa đồng bộ hoá" trong hình 2 cho thấy hành vi mặc định trong Android 10 (API cấp 29), trong đó trường văn bản và nội dung của ứng dụng được gắn vào đúng vị trí thay vì đồng bộ hoá với ảnh động của bàn phím. Hành vi này có thể gây khó chịu về mặt hình ảnh.

  • Trong Android 11 (API cấp 30) trở lên, bạn có thể sử dụng WindowInsetsAnimationCompat để đồng bộ hoá quá trình chuyển đổi của ứng dụng bằng cách trượt bàn phím lên và xuống từ cuối màn hình. Giao diện này trông mượt mà hơn, như minh hoạ trong ví dụ có nhãn "Đồng bộ hoá" trong hình 2.

Định cấu hình WindowInsetsAnimationCompat.Callback để khung hiển thị được đồng bộ hoá với ảnh động bàn phím.

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.
    });

Có một số phương thức để ghi đè trong WindowInsetsAnimationCompat.Callback, cụ thể là onPrepare(), onStart(), onProgress() và onEnd(). Bắt đầu gọi onPrepare() trước khi có thay đổi về bố cục.

onPrepare được gọi khi một ảnh động phần lồng ghép bắt đầu và trước khi khung hiển thị được sắp xếp lại do ảnh động. Bạn có thể sử dụng thuộc tính này để lưu trạng thái bắt đầu, trong trường hợp này là toạ độ dưới cùng của khung hiển thị.

Hình ảnh cho thấy toạ độ dưới cùng ở trạng thái bắt đầu của chế độ xem gốc.
Hình 3. Sử dụng onPrepare() để ghi lại trạng thái bắt đầu.

Đoạn mã sau đây cho thấy một lệnh gọi mẫu đến 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 được gọi khi một ảnh động phần lồng ghép bắt đầu. Bạn có thể sử dụng thuộc tính này để đặt tất cả thuộc tính khung hiển thị về trạng thái kết thúc của các thay đổi bố cục. Nếu bạn đã đặt một lệnh gọi lại OnApplyWindowInsetsListener cho bất kỳ khung hiển thị nào, thì lệnh gọi lại này đã được gọi tại thời điểm này. Đây là thời điểm thích hợp để lưu trạng thái kết thúc của các thuộc tính khung hiển thị.

Hình ảnh cho thấy toạ độ dưới cùng của trạng thái kết thúc của chế độ xem
Hình 4. Sử dụng onStart() để ghi lại trạng thái kết thúc.

Đoạn mã sau đây cho thấy một lệnh gọi mẫu đến 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 được gọi khi các phần lồng ghép thay đổi trong quá trình chạy ảnh động, vì vậy, bạn có thể ghi đè giá trị đó và nhận thông báo trên mọi khung trong quá trình ảnh động bàn phím. Cập nhật các thuộc tính khung hiển thị để khung hiển thị tạo ảnh động đồng bộ hoá với bàn phím.

Mọi thay đổi về bố cục đã hoàn tất tại thời điểm này. Ví dụ: nếu bạn sử dụng View.translationY để chuyển khung hiển thị, giá trị sẽ giảm dần đối với mọi lệnh gọi của phương thức này và cuối cùng đạt 0 về vị trí bố cục ban đầu.

Hình 5. Sử dụng onProgress() để đồng bộ hoá ảnh động.

Đoạn mã sau đây cho thấy một lệnh gọi mẫu đến 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;
}

Nếu muốn, bạn có thể ghi đè onEnd. Phương thức này được gọi sau khi hết ảnh động. Đây là thời điểm thích hợp để dọn dẹp mọi thay đổi tạm thời.

Tài nguyên khác