İçeriğiniz için yapı ve kapsama yöntemleriyle esnek bir akış ve ritim oluşturun.
1. Temel yapı
Tutarlı koruma sınırlarına sahip sağlam bir yapı oluşturmaya başlamak için düzenlerinize kenar boşlukları ve sütunlar ekleyin.
Kenar boşlukları, ekranın ve içeriğin sol ve sağ kenarlarında boşluk sağlar. Kompakt boyutlandırma için standart kenar boşluğu değeri 16 dp'dir ancak kenar boşlukları daha büyük ekranlara uyacak şekilde ayarlanmalıdır. Uygulamanızın gövde içeriği ve işlemleri bu sınırlarda kalmalı ve bu sınırlara uygun olmalıdır.
Bu adımda, yerleştirilmiş güvenli bölgeleri veya yerleştirmeleri de sağlayabilirsiniz. Sistem çubuğu ekleri, önemli işlemlerin sistem çubuklarının altında kalmasını önler. Ayrıntılı bilgi için İçeriğinizi sistem çubuklarının arkasına yerleştirme başlıklı makaleyi inceleyin.
Tutarlı hizalama için esnek bir ızgara yapısı oluşturmak ve gövde alanındaki içeriği bölerek düzene dikey bir tanım sağlamak üzere sütunları kullanın. İçerik, sütun içeren ekran alanlarına yerleştirilir. Bu sütunlar, düzeninize yapı kazandırarak öğeleri düzenlemek için uygun bir yapı sağlar.
İçeriği temel ızgara ile hizalamak ancak esnek boyutlandırmayı korumak için sütun ızgarası kullanın. Sütun ızgarası, sütun boyutlarını ve sütun sayısını ekran boyutuna göre gerektiği gibi değiştirerek farklı form faktörlerine uyum sağlayabilir. Ayrıca, içeriğin de ölçeklenmesine olanak tanır. Sütun ızgarasında çok ayrıntılı olmaktan kaçının. Temel ızgara, tutarlı aralık birimleri sağlamak için kullanılır.
Satırlardan oluşan bir ızgara oluştururken dikkatli olun. Bu, yönler ve form faktörleri arasında yatay içerik ölçeklendirmesini kısıtlayabilir. Genellikle dolgu kuralları oluşturmak, gereken görsel tutarlılığı sağlar.
Düzen yapısına metin eklemeye başlama Kenar boşlukları, içeriği ekranın kenarlarından korur. Sütunlar, tutarlı bir aralık ve hizalama yapısı sağlar.
2. Kapsama uygulama
Öğeleri görsel olarak gruplandırmak için kapsama özelliğini kullanın.
Kapsama, görsel gruplandırma oluşturmak için öğeler arasındaki boşluk ve görünür öğelerin birlikte kullanılmasıdır. Kapsayıcı, kapalı bir alanı temsil eden şekildir. Tek bir düzende, benzer içerik veya işlevlere sahip öğeleri gruplandırabilir ve açık alan, tipografi ve ayırıcılar kullanarak diğer öğelerden ayırabilirsiniz.
Kullanıcının içerikte gezinmesine yardımcı olmak için benzer öğeleri beyaz alan veya görünür bölümlerle gruplandırabilirsiniz.
Örtülü kapsama, içerikleri görsel olarak gruplandırmak için öğeler arasındaki boşluktan yararlanarak kapsayıcı sınırları oluşturur. Açık kapsama ise içerikleri birlikte gruplandırmak için ayırıcı çizgiler ve kartlar gibi nesneleri kullanır.
Aşağıdaki şekilde, başlığı ve birincil metni kapsamak için örtülü kapsama kullanımına dair bir örnek gösterilmektedir. Sütun ızgarası, öğeleri hizalamak ve gruplandırmak için kullanılır. Öne çıkan noktalar açıkça kartlarda yer alır. Daha fazla görsel ayrım için simgeler ve tür hiyerarşisi kullanma.
3. İçeriği konumlandırma
Android, içerik öğelerini uygun şekilde konumlandırmaya yardımcı olabilecek yer çekimi, aralık ve ölçeklendirme gibi çeşitli yöntemlerle ilgili kapsayıcılarında işler.
Gravity, belirli kullanım alanlarında bir nesneyi daha büyük olabilecek bir kapsayıcıya yerleştirmek için kullanılan bir standarttır. Aşağıdaki şekilde, nesneleri başlangıç ve merkez (1), üst ve yatay merkez (2), sol alt (3) ve bitiş ve sağ (1) olarak konumlandırma örnekleri gösterilmektedir.
4. İçeriği ölçeklendirme
Ölçeklendirme, dinamik içeriklere, cihaz yönüne ve ekran boyutlarına uyum sağlamak için çok önemlidir. Öğeler sabit kalabilir veya ölçeklendirilebilir.
Resimlerin, cihaz bağlamından bağımsız olarak istediğiniz gibi görünmesini sağlamak için resimlerin ölçeklendirme ve konumlandırma ile kapsayıcılarında nasıl görüntülendiğini not etmek önemlidir. Aksi takdirde, resmin odak noktası kesilmiş görünebilir, resimler düzene göre çok küçük veya çok büyük olabilir ya da başka istenmeyen etkiler ortaya çıkabilir.
Notlandırılmamış içerikler, beklediğiniz veya istediğiniz şekilde görünmeyebilir.
Sabitlenmiş içerik
Birçok öğede yerleşik etkileşimler, kaydırma ve yuvalar ya da iskelelerle konumlandırma bulunur. Bazı öğeler, kaydırmaya tepki vermek yerine sabit kalacak şekilde değiştirilebilir. Örneğin, önemli işlemleri barındıran kayan işlem düğmeleri (KİD'ler).
Hizalama
Üst düzenlerin alt öğelerini hizalamak ve konumlandırmak için kullanabileceği özel hizalama çizgileri oluşturmak üzere AlignmentLine'ı kullanın.
Yapılması gerekenler
Yapılmaması gerekenler
Bileşen düzeni
Material 3 bileşenleri, etkileşim ve içerik için kendi yapılandırmalarını ve durumlarını sağlar.
Compose, Materyal Bileşenlerini ortak ekran desenlerinde birleştirmek için uygun düzenler sağlar. Scaffold gibi composable'lar, çeşitli bileşenler ve diğer ekran öğeleri için yuvalar sağlar. Material Bileşenleri ve Düzen hakkında daha fazla bilgi edinin.