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

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.

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

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.
ziyaret edin.
durum çubuğunun arkasındaki görüntülere örnek
Şekil 2. Arkasındaki görüntülere örnek tıklayın.
ziyaret edin.

Uçtan uca ekranı etkinleştirin

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 Uygulamanızın 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.

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 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 hakkında daha fazla bilgi edinin.

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 sistem çubukları tarafından görsel olarak bulanıklaştırılmasına olanak tanır.

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

Uçtan uca uygulanan bir örnektir ancak gezinme çubuğu FAB'yi kapatıyordur
Şekil 3. Bir uçtan uca düzen.

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:

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:

FAB&#39;yi kapatmayan yarı saydam bir gezinme çubuğu
Şekil 4. Düğmedeki görsel çakışmayı giderme yatırım yapmanız önemlidir.

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

hareketle gezinme ile uçtan uca
Şekil 5. Harekette görsel çakışmayı çözme gezinme modundan çıkarsınız.

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.

Kotlin

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
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets 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 hareketi eklerine örnek
Şekil 6. Sistem hareketi ekleri.

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ğinin kullanıldığı oyunlarda ve bantlarda ViewPager2.

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

sistem hareketi içe aktarma ölçümlerine örnek
Ş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;
});

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:

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

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

Ek kaynaklar

WindowInsets, hareketle gezinme ve içe yerleştirilen öğelerin işleyiş şekli hakkında daha fazla bilgi için aşağıdaki referanslara göz atın: