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.
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.
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:
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:
Şekil 5'te gösterildiği gibi, aynı durum hareketle gezinme modu için de geçerlidir:
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:
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: