Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sistem çubuklarının arkasına çizim yaparak uygulamanızın ekranının tüm genişliğini ve yüksekliğini kullanarak uygulamanızı uçtan uca hale getirebilirsiniz. Sistem çubukları, durum çubuğu ve gezinme çubuğudur.

Uçtan uca düzen uygulamak için uygulamanızın şunları yapması gerekir:

Daha ilgi çekici ve modern bir kullanıcı deneyimi elde etmek için gezinme çubuğunun arkasına çizin.
İçeriğiniz ve düzeniniz için anlamlıysa (ör. tam genişlikteki görüntülerde) durum çubuğunun arkasından çizin. Bunu yapmak için ekranın üst kısmına sabitlenmiş bir uygulama çubuğu tanımlayan AppBarLayout gibi API'leri kullanın.

Şekil 1. Uçtan uca düzende sistem çubukları.

Uygulamanızda uçtan uca bir düzen uygulamak için aşağıdaki adımları uygulayın:

Kenardan kenara ekranı etkinleştirin.
Görsel çakışmaları giderin.

Durum çubuğunun arkasında görüntülerle birlikte bir uygulamayı gösteren resim — **Şekil 2.** Durum çubuğunun arkasında görüntülere sahip bir uygulama örneği.

Kenardan kenara ekranı etkinleştirin.

Activity cihazınızın onCreate içinde enableEdgeToEdge yöntemini çağırarak uygulamanızda uçtan uca görüntülemeyi etkinleştirebilirsiniz. setContentView tarihinden önce çağrılmalıdır.

Kotlin

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

Java

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

Varsayılan olarak enableEdgeToEdge, durum çubuğunun yarı saydam bir katman aldığı 3 düğmeli gezinme modu hariç olmak üzere sistem çubuklarını şeffaf hale getirir. Sistem simgelerinin ve kumaşların renkleri, sistemdeki açık veya koyu temaya göre ayarlanır.

enableEdgeToEdge yöntemi, uygulamanın uçtan uca düzenlenmesi gerektiğini otomatik olarak bildirir ve sistem çubuklarının renklerini ayarlar. Herhangi bir nedenle gerekiyorsa "Uçtan kenara ekranı manuel olarak ayarlama" bölümüne bakın.

İç kısımları kullanarak çakışmaları yönetme

Uçtan uca görüntülemeyi etkinleştirdikten sonra, uygulamanızın bazı görünümleri, Şekil 3'te gösterildiği gibi sistem çubuklarının arkasına çizilebilir.

Çakışmaları, ekranın hangi bölümlerinin gezinme çubuğu veya durum çubuğu gibi sistem kullanıcı arayüzüyle kesiştiğini belirten iç kısımlara tepki vererek giderebilirsiniz. Kesişme, içeriğin üzerinde görüntüleme anlamına gelebilir, ancak uygulamanızı sistem hareketleri hakkında da bilgilendirebilir.

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

Sistem çubuğu ekleri: Dokunulabilen ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümler için en iyi seçenektir.
Sistem hareketi ekleri: Sistem tarafından kullanılan ve uygulamanızdan öncelikli olan hareketle gezinme alanları için.

Sistem çubuğu iç öğeleri

Sistem çubuğu iç öğeleri, en yaygın kullanılan küme türüdür. Bu alanlar, sistem kullanıcı arayüzünün, uygulamanızın üzerindeki Z ekseninde gösterildiği alanı temsil eder. En çok, uygulamanızda dokunulabilen ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümleri taşımak veya yerleştirmek için kullanılır.

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

Uçtan uca uygulanan ancak gezinme çubuğunun FAB'ı kapattığını gösteren bir resim — **Şekil 3.** Kenardan kenara bir düzende FAB ile çakışan gezinme çubuğu.

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

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

Kotlin

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
}

Java

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 düğme modunda Şekil 4'te gösterildiği gibi görsel çakışma olmaz:

FAB'ı kapatmayan yarı saydam gezinme çubuğunu gösteren resim — **Şekil 4.** Düğme modunda görsel çakışma sorununu çözme.

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

Hareketle gezinmeyle uçtan uca gösteren bir resim — **Şekil 5.** Hareketle gezinme modunda görsel çakışma sorunu gideriliyor.

Sistem hareketi içe aktarmaları

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

Sistem çubuğu eklerinde olduğu gibi, getInsets(int) ile WindowInsetsCompat.Type.systemGestures() kullanarak sistem hareketi eklerinin üst üste binmesini önleyebilirsiniz.

Kaydırılabilir görünümleri kenarlardan uzağa taşımak veya kaydırmak için bu ek parçaları 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 eklerinin ana sayfa hareketi için alt ve geri hareketleri için sol ve sağ yerleşik bir alt kümesi vardır:

Sistem hareketi içe ekleme ölçümlerini gösteren resim — **Şekil 7.** Sistem hareketi içe ekleme ölçümleri.

Aşağıdaki kod örneğinde sistem hareketi içe aktarmalarının nasıl uygulanacağı gösterilmektedir:

Kotlin

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
}

Java

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 şekilde tam ekranda görüntülenir. Bu da kullanıcıya daha sürükleyici bir deneyim sunar. WindowInsetsController ve WindowInsetsControllerCompat kitaplıklarını kullanarak yoğun içerik modu için sistem çubuklarını gizleyebilirsiniz:

Kotlin

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

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

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

Java

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ği uygulama hakkında daha fazla bilgi edinmek için Yoğun içerik modu için sistem çubuklarını gizleme bölümüne bakın.

Ek kaynaklar

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