सॉफ़्टवेयर कीबोर्ड को कंट्रोल और ऐनिमेट करें

Compose को आज़माएं
Jetpack Compose, Android के लिए सुझाया गया यूज़र इंटरफ़ेस (यूआई) टूलकिट है. Compose में कीबोर्ड के साथ काम करने का तरीका जानें.
Compose में सॉफ़्टवेयर कीबोर्ड →

WindowInsetsCompat, `WindowInsetsCompat` का इस्तेमाल करके, आपका ऐप्लिकेशन ऑन-स्क्रीन कीबोर्ड (इसे IME भी कहा जाता है) के बारे में क्वेरी कर सकता है और उसे कंट्रोल कर सकता है. यह ठीक उसी तरह काम करता है जैसे सिस्टम बार के साथ इंटरैक्ट किया जाता है. सॉफ़्टवेयर कीबोर्ड खुलने या बंद होने पर, आपका ऐप्लिकेशन WindowInsetsAnimationCompat का इस्तेमाल करके, ट्रांज़िशन को आसानी से पूरा कर सकता है.

पहली इमेज. सॉफ़्टवेयर कीबोर्ड के खुलने और बंद होने के ट्रांज़िशन के दो उदाहरण.

ज़रूरी शर्तें

सॉफ़्टवेयर कीबोर्ड के लिए कंट्रोल और ऐनिमेशन सेट अप करने से पहले, अपने ऐप्लिकेशन को किनारे से किनारे तक दिखाने के लिए कॉन्फ़िगर करें. इससे, सिस्टम विंडो इनसेट को मैनेज किया जा सकता है. जैसे, सिस्टम बार और ऑन-स्क्रीन कीबोर्ड.

कीबोर्ड सॉफ़्टवेयर की विज़िबिलिटी की जांच करना

सॉफ़्टवेयर कीबोर्ड की विज़िबिलिटी की जांच करने के लिए, 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;
});

सॉफ़्टवेयर कीबोर्ड के साथ ऐनिमेशन को सिंक करना

किसी टेक्स्ट इनपुट फ़ील्ड पर टैप करने से, कीबोर्ड स्क्रीन के सबसे नीचे से स्लाइड होकर अपनी जगह पर आ जाता है. जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:

दूसरी इमेज. सिंक किया गया कीबोर्ड ऐनिमेशन.

  • दूसरी इमेज में "सिंक नहीं किया गया" लेबल वाले उदाहरण में, Android 10 (एपीआई लेवल 29) में डिफ़ॉल्ट तौर पर होने वाला व्यवहार दिखाया गया है. इसमें, टेक्स्ट फ़ील्ड और ऐप्लिकेशन का कॉन्टेंट, कीबोर्ड के ऐनिमेशन के साथ सिंक होने के बजाय, अपनी जगह पर आ जाता है. यह व्यवहार देखने में अजीब लग सकता है.

  • Android 11 (एपीआई लेवल 30) और इसके बाद के वर्शन में, WindowInsetsAnimationCompat का इस्तेमाल करके, ऐप्लिकेशन के ट्रांज़िशन को कीबोर्ड के स्क्रीन के सबसे नीचे से ऊपर और नीचे की ओर स्लाइड होने के साथ सिंक किया जा सकता है. यह ज़्यादा बेहतर दिखता है. जैसा कि दूसरी इमेज में "सिंक किया गया" लेबल वाले उदाहरण में दिखाया गया है.

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 को कॉल किया जाता है. इसका इस्तेमाल, शुरुआती स्थिति को सेव करने के लिए किया जा सकता है. इस मामले में, यह व्यू का सबसे निचला कोऑर्डिनेट होता है.

रूट व्यू के सबसे नीचे वाले कोऑर्डिनेट की शुरुआती स्थिति दिखाने वाली इमेज.
तीसरी इमेज. शुरुआती स्थिति को रिकॉर्ड करने के लिए, 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 को कॉल किया जाता है. इसका इस्तेमाल, लेआउट में होने वाले बदलावों की आखिरी स्थिति के लिए, सभी व्यू प्रॉपर्टी सेट करने के लिए किया जा सकता है. अगर किसी भी व्यू के लिए, OnApplyWindowInsetsListener कॉलबैक सेट किया गया है, तो इस समय इसे पहले ही कॉल कर लिया जाता है. यह व्यू प्रॉपर्टी की आखिरी स्थिति को सेव करने का सही समय है.

व्यू के सबसे नीचे वाले हिस्से का आखिरी कोऑर्डिनेट दिखाने वाली इमेज
चौथी इमेज. आखिरी स्थिति को रिकॉर्ड करने के लिए, 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 हो जाती है.

पांचवी इमेज. ऐनिमेशन को सिंक करने के लिए, 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 को बदलने का विकल्प होता है. ऐनिमेशन खत्म होने के बाद, इस तरीके को कॉल किया जाता है. यह किसी भी अस्थायी बदलाव को हटाने का सही समय है.

अन्य संसाधन