İç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.

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

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

  • Daha ilgi çekici ve modern bir kullanıcı deneyimi için gezinme çubuğunun arkasına geçin.
  • İçeriğiniz ve düzeniniz için anlamlıysa (ör. tam genişlikli görüntülerde) durum çubuğunun arkasına geçin. Bunu yapmak için ekranın üst kısmına sabitlenmiş bir uygulama çubuğunu tanımlayan AppBarLayout gibi API'leri kullanın.
Şekil 1. Uçtan uca düzende sistem çubukları.

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

  1. Uçtan uca ekranı etkinleştirin.
  2. Görsel çakışmaları düzeltin.
Durum çubuğunun arkasında görüntüler bulunan bir uygulamayı gösteren görsel
Şekil 2. Durum çubuğunun arkasında görüntüler içeren bir uygulama örneği.

Uçtan uca ekranı etkinleştirin.

Activity cihazınızın onCreate içinde enableEdgeToEdge kodunu çağırarak uygulamanızda uçtan uca ekranı etkinleştirebilirsiniz. setContentView tarihinden önce çağrılması gerekir.

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 ç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 yöntemi, uygulamanın uçtan uca yerleştirilmesi gerektiğini otomatik olarak beyan eder ve sistem çubuklarının renklerini ayarlar. Herhangi bir nedenle gerekliyse "Uçtan uca ekranı manuel olarak ayarlama" bölümüne bakın.

Ekleri kullanarak çakışmaları ele alma

Uçtan uca ekranı 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.

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 çubuğu eklemeleri: Dokunulabilen ve sistem çubukları tarafından görsel olarak gizlenmemesi gereken görünümler için idealdir.

  • Sistem hareketi ekleri: 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:

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

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:

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

FAB&#39;yi kaplamayan yarı saydam bir gezinme çubuğunu gösteren resim
Şekil 4. Düğme modunda görsel çakışma çözümleniyor.

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

Hareketle gezinme özelliğiyle uçtan uca gösteren resim
Şekil 5. Hareketle gezinme modunda görsel çakışma çözümleniyor.

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 hareketi eklerini gösteren resim
Şekil 6. Sistem hareketi ekleri.

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:

Sistem hareketi inset ölçümlerini gösteren resim
Şekil 7. Sistem hareketini içeren ölçümler.

Aşağıdaki kod örneğinde, sistem hareketi etiketlerinin 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 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:

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ğ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: