İç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 → 'nı inceleyin.

Android 15 veya sonraki sürümleri çalıştıran bir cihazda SDK 35 ya da sonraki sürümleri hedefledikten sonra uygulamanız uçtan uca görüntülenir. Pencere, genişliğin ve yüksekliğin tamamını kapsar. arkasına çizim yaparak daha kolay bir şekilde görüntüleyebilirsiniz. Sistem çubuklarında durum başlık çubuğu ve gezinme çubuğu.

Birçok uygulamanın bir üst uygulama çubuğu vardır. Üst uygulama çubuğu, sayfanın üst kenarına doğru uzanmalıdır. ve durum çubuğunun arkasında görüntülenir. İsteğe bağlı olarak üst uygulama çubuğu içerik kaydırıldığında durum çubuğunun yüksekliğine kadar daraltır.

Birçok uygulamanın alt uygulama çubuğu veya alt gezinme çubuğu da vardır. Bu çubuklar ekranın alt kenarına kadar uzatılır ve gezinme bölümünün arkasında görüntülenir çubuk. 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: zihin:

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 uçtan uca Android 15 veya sonraki sürümlere sahip cihazlar.

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

1. androidx.activity kitaplığındaki Uygulama veya modülünüzün build.gradle dosyası:

   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 dosyasını içe aktarın uzantı işlevini uygulamanıza ekleyin:

enableEdgeToEdge çağrısı yaparak uçtan uca manuel olarak etkinleştirin Activity içinde onCreate. 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 oluşturduğu 3 düğmeli gezinme modu. İlgili içeriği oluşturmak için kullanılan sistem simgelerinin ve kaplamanın renkleri sisteme göre ayarlanır açık veya koyu tema.

enableEdgeToEdge() işlevi, uygulamanın baştan sona yerleştirilir ve sistem çubuklarının renklerini ayarlar.

Uygulamanızda enableEdgeToEdge() işlevi için bkz. Uçtan uca ekranı manuel olarak ayarlayın.

Ekleri kullanarak çakışmaları ele alma

Uygulamanızın bazı görünümleri, aşağıdaki gibi olduğu gibi sistem çubuklarının gerisinde kalabilir: 3.

Çakışmaları, eklemelerin hangi kısımlarının belirleyeceğini belirten eklere tepki vererek ele alabilirsiniz. Ekran, gezinme çubuğu veya durum çubuğu gibi sistem kullanıcı arayüzüyle kesişiyor çubuk. Kesişme, içeriğin üzerinde gösterilmesi anlamına gelebilir daha fazla bilgi edindiniz.

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 dokunulmaması gereken görünümler için idealdir sistem çubukları tarafından görsel olarak bulanıklaştırılamaz.

• Ekran kesimi ekleri: Ekran kesimi olabilecek alanlar için (cihazın şeklinden dolayı)

• Sistem hareketi ekleri: Sistem tarafından kullanılan hareketle gezinme alanları için daha öncelikli hale getirmeniz gerekir.

Sistem çubuğu ekleri

Sistem çubuğu ekleri, en yaygın kullanılan ek türüdür. Temsilciler sistem kullanıcı arayüzünün, uygulamanızın üzerindeki Z ekseninde görüntülediği alan. Onlar en iyi Uygulamanızda dokunulabilen ve engellenmemesi gereken görünümleri taşımak için kullanılır tarafından okunabilecek şekilde boşalt olmamasına dikkat edin.

Örneğin, kayan işlem düğme (FAB) üzerindeki gezinme çubuğu tarafından sınırlandırıldığından:

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

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:

Ş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 noktası, ve durum çubuğuna dahil edilir. Cihaz ekranı yatay durumdayken modundaysa kesim dikey kenarda olabilir. Uygulamanızın içeriğine bağlı olarak görüntüsü yoksa, kesilmelerini önlemek için dolgu uygulamanız gerekir. Uygulamalar varsayılan olarak ekran kesiminde çizim yapar.

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

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

WindowInsetsCompat değerini, ekran kesimi türlerini seçin.

DolgununclipToPaddingRecyclerView liste öğeleri. Bu, kullanıcı aşağıdaki işlemleri gerçekleştirdiğinde öğelerin sistem çubuklarının gerisine gitmesine olanak tanır. aşağıdaki örnekte gösterildiği gibi kaydırılı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 ek öğeleri, pencerenin sistem hareketlerinin olduğu alanları temsil eder daha öncelikli hale getirebilirsiniz. Bu alanlar Şekil 6'da turuncu renkle gösterilmiştir:

Sistem çubuğu eklerinde olduğu gibi, sistem hareketinin içe aktarılmalarını önlemek için kullanarak getInsets(int) şununla: WindowInsetsCompat.Type.systemGestures().

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 Örneğin, alt sayfalar, Kaydırma özelliğinde kullanılan bantlar ve bantların, ViewPager2.

Android 10 veya sonraki sürümlerde sistem hareketi ek öğeleri ana ekran hareketi ve geri hareketleri için sol ve sağ ek:

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

Material Bileşenleri

Görünüme dayalı birçok Android Materyal Bileşenleri (com.google.android.material){:.external} aşağıdaki gibi ekleri otomatik olarak işler: BottomAppBar, BottomNavigationView, NavigationRailView ve NavigationView

Ancak, AppBarLayout insetleri otomatik olarak işlemez. Ekle android:fitsSystemWindows="true" veya setOnApplyWindowInsetsListener kullanın.

Eklerin nasıl ele alınacağını öğrenin E-posta Yazma'daki Materyal Bileşenleri.

Yoğun içerik modu

Bazı içerikler en iyi tam ekranda deneyimlenerek kullanıcıya daha iyi bir deneyim sunar. etkileyici bir deneyim sunabilir. Yoğun içerik modu için sistem çubuklarını gizlemek amacıyla şu komutu kullanabilirsiniz: WindowInsetsController ve WindowInsetsControllerCompat kitaplıklar:

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

Yoğun içerik modu için sistem çubuklarını gizleme bölümüne bakın. ziyaret edin.

Ek kaynaklar

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

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