İçeriği uygulamanızda uçtan uca görüntüleyin

"Oluştur" yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Oluşturma'da uçtan uca özelliğiyle nasıl çalışacağınızı öğrenin.

Oluştur'da uçtan uca →

Android 15 veya sonraki sürümleri çalıştıran bir cihazda SDK 35 veya sonraki sürümleri hedeflediğinizde uygulamanız uçtan uca gösterilir. Pencere, sistem çubuklarının arkasına çizilerek ekranın tüm genişliğini ve yüksekliğini kaplar. Sistem çubukları arasında durum çubuğu, başlık çubuğu ve gezinme çubuğu bulunur.

Birçok uygulamanın bir üst uygulama çubuğu vardır. Üst uygulama çubuğu, ekranın üst kenarına kadar uzatılmalı ve durum çubuğunun arkasında görüntülenmelidir. İsteğe bağlı olarak, içerik kaydırıldığında üst uygulama çubuğu durum çubuğunun yüksekliğine kadar daraltılabilir.

Birçok uygulamanın alt uygulama çubuğu veya alt gezinme çubuğu da vardır. Bu çubuklar ayrıca ekranın alt kenarına kadar uzatılmalı ve gezinme çubuğunun arkasında görüntülenmelidir. Aksi takdirde, uygulamalar gezinme çubuğunun arkasında kayan içerik göstermelidir.

Uygulamanızda uçtan uca düzen uygularken aşağıdakileri göz önünde bulundurun:

1. Uçtan uca ekranı etkinleştirme
2. Görsel çakışmaları düzeltin.
3. Çerçeveleri sistem çubuklarının arkasında gösterebilirsiniz.

Uçtan uca ekranı etkinleştir

Uygulamanız SDK 35 veya sonraki sürümleri hedefliyorsa Android 15 veya sonraki sürümleri çalıştıran cihazlar için uçtan uca otomatik olarak etkinleştirilir.

Önceki Android sürümlerinde uçtan uca etkinleştirmek için aşağıdakileri yapın:

1. Uygulama veya modülünüzün build.gradle dosyasındaki androidx.activity kitaplığına bağımlılık ekleyin:

   Kotlin

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }
   

   Eski

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }
   

2. enableEdgeToEdge uzantı işlevini uygulamanıza aktarın:

Activity cihazınızın onCreate içinde enableEdgeToEdge yöntemini çağırarak uçtan uca manuel olarak etkinleştirin. setContentView tarihinden önce çağrılması gerekir.

     override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       ...
     }
   

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }
   

Varsayılan olarak enableEdgeToEdge(), durum çubuğunun yarı saydam bir çerçeve aldığı 3 düğmeli gezinme modu dışında sistem çubuklarını şeffaf hale getirir. Sistem simgelerinin ve kaplamanın renkleri, sistemin açık veya koyu temasına göre ayarlanır.

enableEdgeToEdge() işlevi, uygulamanın uçtan uca yerleştirilmesi gerektiğini otomatik olarak bildirir ve sistem çubuklarının renklerini ayarlar.

Uygulamanızda enableEdgeToEdge() işlevini kullanmadan uçtan uca görüntülemeyi etkinleştirmek için Uçtan uca ekranı manuel olarak ayarlama başlıklı makaleyi inceleyin.

Ekleri kullanarak çakışmaları ele alma

Uygulamanızın bazı görünümleri, Şekil 3'te gösterildiği gibi sistem çubuklarının gerisinde kalabilir.

Ekranın hangi bölümlerinin gezinme çubuğu veya durum çubuğu gibi sistem kullanıcı arayüzüyle kesişeceğini belirleyen eklere tepki vererek çakışmaları ele alabilirsiniz. Kesişme, içeriğin üzerinde gösterilmesi anlamına gelebilir ancak uygulamanıza sistem hareketleri hakkında bilgi de verebilir.

Uygulamanızı uçtan uca görüntülemek için geçerli olan ek türleri şunlardır:

• Sistem çubukları eklemeleri: Dokunulabilen ve sistem çubukları tarafından görsel olarak gizlenmemesi gereken görünümler için idealdir.

• Ekran kesimi ekleri: Cihazın şekli nedeniyle ekran kesimi olabilecek alanlar için.

• Sistem hareketi içe aktarmaları: Sistem tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanları için.

Sistem çubuğu ekleri

Sistem çubuğu ekleri, en yaygın kullanılan ek türüdür. Bunlar, sistem kullanıcı arayüzünün uygulamanızın üzerindeki Z ekseninde gösterildiği alanı temsil eder. En iyi kullanım alanları, uygulamanızda dokunulabilen ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümleri taşımaktır.

Örneğin, şekil 3'teki kayan işlem düğmesi (FAB), gezinme çubuğu tarafından kısmen gizlenmiştir:

Hareket veya düğme modunda bu tür görsel çakışmaları önlemek için WindowInsetsCompat.Type.systemBars() ile getInsets(int) aracını kullanarak görünümün kenar boşluklarını artırabilirsiniz.

Aşağıdaki kod örneğinde sistem çubuğu girişlerinin nasıl uygulanacağı gösterilmektedir:

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Bu çözümü Şekil 3'te gösterilen örneğe uygularsanız, Şekil 4'te gösterildiği gibi düğme modunda görsel çakışma olmaz:

Şekil 5'te gösterildiği gibi aynı durum hareketle gezinme modu için de geçerlidir:

Ekran kesimi ekleri

Bazı cihazlarda ekran kesimleri vardır. Genellikle kesim, ekranın üst kısmındadır ve durum çubuğuna dahil edilir. Cihaz ekranı yatay moddayken kesinti dikey kenarda olabilir. Uygulamanızın ekranda gösterdiği içeriğe bağlı olarak, ekran kesimlerini önlemek için dolgu uygulamanız gerekir. Varsayılan olarak uygulamalar ekran kesiminde çizer.

Örneğin, birçok uygulama ekranında bir öğe listesi gösterilir. Liste öğelerini ekran kesimi veya sistem çubuklarıyla gizlemeyin.

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  WindowInsetsCompat bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

Sistem çubukları ve ekran kesimi türlerinin mantıksal veya mantığını alarak WindowInsetsCompat değerini belirleyin.

Dolgunun liste öğeleriyle birlikte kayması için clipToPadding öğesini RecyclerView olarak ayarlayın. Bu, aşağıdaki örnekte gösterildiği gibi, kullanıcı sayfayı kaydırdığında öğelerin sistem çubuklarının arkasına gitmesine olanak tanır.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

Sistem hareketi ekleri

Sistem hareketi ekleri, sistem hareketlerinin uygulamanıza göre öncelikli olduğu pencere alanlarını temsil eder. Bu alanlar Şekil 6'da turuncu renkte gösterilmiştir:

Sistem çubuğu eklerinde olduğu gibi, getInsets(int) ile WindowInsetsCompat.Type.systemGestures() arasındaki sistem hareketi eklerinin çakışmasını önleyebilirsiniz.

Kaydırılabilir görünümleri kenarlardan uzağa taşımak veya dolguyla taşımak için bu ek öğeleri kullanın. Yaygın kullanım alanları arasında alt sayfalar, oyunlarda kaydırma ve ViewPager2 kullanılarak uygulanan bantlar bulunur.

Android 10 veya sonraki sürümlerde sistem hareketi ek öğeleri ana sayfa hareketi için bir alt, geri hareketleri için de sol ve sağ ek kısım içerir:

Aşağıdaki kod örneğinde, sistem hareketi etiketlerinin nasıl uygulanacağı gösterilmektedir:

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Yoğun içerik modu

Bazı içerikler en iyi tam ekranda deneyimlenerek kullanıcıya daha etkileyici bir deneyim sunar. Yoğun içerik modu için sistem çubuklarını WindowInsetsController ve WindowInsetsControllerCompat kitaplıklarını kullanarak gizleyebilirsiniz:

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

Bu özelliğin uygulanması hakkında daha fazla bilgi edinmek isterseniz Yoğun içerik modu için sistem çubuklarını gizleme bölümüne bakın.

Ek kaynaklar

WindowInsets, hareketle gezinme ve eklerin çalışma şekli hakkında daha fazla bilgi için aşağıdaki referanslara bakın:

• WindowInsets — düzenlerin dinleyicileri
• Hareketle Gezinme: Ekler
• Ekler Android'de nasıl çalışır?