İçerik bileşimi ve yapısı

İçeriğiniz için yapı ve kapsama yöntemleriyle esnek bir akış ve ritim oluşturun. Önce düzen kapsayıcıları tasarlayın, ardından içerik ekleyin.

1. Temel yapı: İçeriğe rehberlik edecek düzen ızgarası

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, güvenli iç alanları veya iç alanları da ayarlayabilirsiniz. Sistem çubuğu ekleri, önemli işlemlerin sistem çubuklarının altında kalmasını önler. İçeriğinizi sistem çubuklarının arkasına çizmelisiniz.

Tutarlı hizalama için esnek bir ızgara yapısı oluşturmak ve içerik alanındaki içeriği bölerek düzene dikey bir tanım sağlamak için 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ğin önemi veya hiyerarşisi, daha fazla yapı kazandırmak için kullanılacak düzen ızgarasının türünü belirlemeye yardımcı olabilir. İçeriğinizde net bir hiyerarşi varsa hiyerarşik bir düzen ızgarası kullanabilirsiniz. Örneğin, büyük bir başlık ve önemli bir görsel içeren bir editoryal düzen veya ayrıntı ekranı.

Modüler ızgara, fotoğraf galerisi gibi eşit derecede önemli ancak çok yapılandırılmış içerik ve düzenler için uygundur.

Tutarlı bir şekilde duyarlı, tek yönlü düzenler için veya daha fazla esnekliğe ihtiyaç duyduğunuzda sütun ızgarası seçin.

Düzen ızgarası, türünden bağımsız olarak boyutlara ve form faktörlerine de uyum sağlamalıdır.

Bu örnekte, esnek boyutlandırmayı korurken içeriği temel bir ızgayla hizalamak için bir sütun ızgarası kullanılmaktadır. Farklı form faktörlerine uyum sağlamak için sütun ızgarası, sütun boyutunu ve sütun sayısını ekran boyutuna göre değiştirir. Bu sayede içerik de ölçeklenebilir. Düzen ızgarasında çok ayrıntılı olmaktan kaçının. Bunun yerine, tutarlı aralık birimleri sağlamak için temel ızgarayı kullanın.

Alternatif olarak, ayrıntı ekranını düzenli tutmak için hiyerarşik bir düzen ızgarası kullanın.

Tutarlı bir düzen ızgarasıyla başlayın. İçeriğiniz gerektiriyorsa ızgarayı kırın. Buna rağmen, başka bir ızgaranın içeriğinizin ihtiyaçlarına daha uygun olduğunu görebilirsiniz.

Sayfalayıcılar ve akış düzeni gibi düzen kapsayıcıları hakkında daha fazla bilgi edinin.

El yazması ve duvar örgüsü, diğer düzen ızgarası türleridir.

Seçtiğiniz düzen ızgarası, uyarlanabilir düzenler için içerikleri gruplandırmak üzere bölmelerin kapsama konseptini de kullanabilir. Örneğin, kullanılan örnek, liste-ayrıntı düzeninde gösterilebilecek tek bir bölme olan bir ayrıntı ekranıdır.

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 boşluk ve görünür öğelerin birlikte kullanılmasıdır. Kapsayıcı, kapalı bir alanı temsil eden bir ş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.

Android, yapı taşı olarak satırları, sütunları ve kutuları kullandığından benzer şekilde kapsama alanı tasarlayabilirsiniz. İçerikte gezinmenize yardımcı olmak için benzer öğeleri boşluk veya görünür bölümlerle gruplandırın.

Örtülü kapsama, içerikleri görsel olarak gruplandırmak için boşluk kullanarak 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 nesneler 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 simge ve tür hiyerarşisi kullanma.

3. İçeriği konumlandırma

Android, seçilen bir düzen ızgarası ve kapsayıcılardaki içeriklerle birlikte, temel yapı taşları ve değiştiriciler ya da ızgara ve esnek kutu gibi düzen kapsayıcılarıyla içerik öğelerini işlemek ve konumlandırmak için çeşitli yöntemler sunar.

İçeriğinizin tek boyutlu mu yoksa iki boyutlu mu olduğunu göz önünde bulundurun. Örneğin, içerik yatay, dikey veya her iki yönde de akabilir.

Aşağıdaki şekilde gösterildiği gibi, kimlik doğrulama düzeninde iki boyutlu bir ızgara düzeni kullanılabilir.

Kullanıcı arayüzü öğeleri, filtreler veya içerik etiketleri gibi tek bir boyutta da esneyebilir ve akabilir. Flexbox hakkında daha fazla bilgi edinin.

Düzenlerde düzen türlerinin bir kombinasyonu da kullanılabilir. Örneğin, dikey kartlarla bir bant veya yatay kaydırma eşleştirebilirsiniz. Alternatif olarak, dikey liste verileri içeren özel bir grafik de sunabilirsiniz.

Lazy rows ve lazy columns ile içeriği kaydırılan satırlar veya sütunlar halinde sunabilirsiniz.

Hizalama

Otomatik düzen akışına ve hizalamasına benzer şekilde, kullanıcı arayüzü öğelerinin düzenini ve hizalamasını belirtebilirsiniz.

Üst düzenlerin, alt öğelerini hizalamak ve konumlandırmak için kullanabileceği özel hizalama çizgileri oluşturmak üzere AlignmentLine simgesini kullanın.

4. İçeriği ölçeklendirme ve kırpma

Ölçeklendirme, dinamik içeriği, cihaz yönünü ve ekran boyutlarını desteklemek için çok önemlidir. Öğeler sabit kalabilir veya ölçeklendirilebilir.

Resimlerin herhangi bir cihazda doğru şekilde gösterilmesini sağlamak için kapsayıcılarında nasıl ölçekleneceğini ve konumlandırılacağını belirtin. Aksi takdirde, bir resmin odak noktası kesilebilir veya resim, düzene göre çok küçük ya da çok büyük olabilir.

Uygun ölçeklendirme ve kırpma ile farklı cihaz en boy oranlarına ve yönlerine uyum sağlayın. En-boy oranları önemli ölçüde değişebileceğinden içeriğinizin bu senaryoları nasıl ele aldığını belirtin.

Örneğin, tam genişlikteki bir lokomotif resim, yatay yöndeki bir telefonda ekranın tamamını kaplar.

İçeriğin en boy oranını koruması gerekiyorsa (ör. yalnızca dikey video) en boy oranını sınırlayın ve boş alanı dengeleyin.

Sabitlenmiş içerik

Birçok bileşende, uygulama çubukları gibi yuvalar veya iskeleler aracılığıyla yerleşik etkileşimler, kaydırma ve 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). Belirli kullanım alanlarında daha iyi odaklanmak için öğeleri sabitleyin. Örneğin, gizli girişleri önlemek için bir metin girişini klavyeye sabitleyebilirsiniz.

Mesajlaşma ve kimlik doğrulama gibi metin girişlerinde, giriş klavyeye eklenir ve tek odak noktası olarak kullanılır.

Düzendeki bileşenler

Material 3 bileşenleri, etkileşim ve içerik için kendi yapılandırmalarını ve durumlarını sağlar.

Compose, Material Components'ı 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 Components and Layout (Material Bileşenleri ve Düzeni) hakkında daha fazla bilgi edinin.