Profil Kartı Oluşturma

Öğrendiklerinizi birleştirmenin zamanı geldi. Basit bir profil kartı oluşturacağız: biçimlendirilmiş bir kutuda düzgünce üst üste dizilmiş bir ad ve meslek unvanı.

Bu sırada composable'ların boyutunu, boşluklarını ve görünümünü denetleyen Modifier ile tanışacaksınız.

Bir Modifier, bir composable'ın görünüşünü ve davranışını değiştirir. Bunu, çoğu composable'ın kabul ettiği modifier parametresi üzerinden geçirirsiniz.

Modifier'lar iç boşluk, boyut, arka plan rengi, kenarlıklar ve daha fazlasını yönetir. Compose'da kullanıcı arayüzünüzü süslemenin temel yolu bunlardır.

Nokta kullanarak çağrıları zincirleyerek bir modifier oluşturursunuz. Her çağrı yeni bir modifier döndürür; böylece birkaç modifier'ı art arda ekleyebilirsiniz.

Sıra önemlidir: background'dan önce padding kullanmak, padding'den sonra kullanmaktan farklıdır. Zinciri bir tarif gibi soldan sağa okuyun.

fillMaxWidth modifier'ı, bir composable'ın kullanılabilir tüm yatay alan boyunca uzanmasını sağlar. Ekranın tamamına yayılması gereken kartlar için idealdir.

Her iki yönde de uzanmak için fillMaxSize, sabit bir genişlik ve yükseklik belirlemek içinse size kullanılır.

İç boşluk, bir composable'ın içinde, kenarıyla içeriği arasına alan ekler. Bir dp değeriyle Modifier.padding kullanın.

İç boşluk, metnin kartın kenarlarına değmesini önleyerek düzenin rahat ve temiz görünmesini sağlar.

Bir arka plan rengi kartın öne çıkmasına yardımcı olur. Bunu background modifier'ı ve bir renk değeriyle uygulayın.

Renkli alanın içindeki metnin çevresinde yeterli boşluk olması için bunu iç boşlukla birleştirin.

Kartın Column öğesinin içinde iki metin parçasını üst üste dizeriz: üstte kalın bir ad, altında ise daha hafif bir meslek unvanı.

Farklı fontSize ve fontWeight değerleri belirlemek, aralarında belirgin bir görsel hiyerarşi oluşturur.

Kartı, parametre olarak name ve title alan yeniden kullanılabilir bir composable'a dönüştürelim. Artık herhangi bir kişiyi gösterebilir.

Bu, birinci dersteki fikrin aynısıdır: veriyi içeri aktarın, kullanıcı arayüzünü her yerde yeniden kullanın.

İşte tüm parçaları bir araya getirilmiş kart: tam genişlikte bir sütun, gri bir arka plan, iç boşluk ve biçimlendirilmiş iki metin satırı.

Modifier zincirinin ve sütunun alt öğelerinin, önceki derslerdeki her şeyi nasıl tek ve düzenli bir composable'da birleştirdiğine dikkat edin.

Kartı Android Studio'da görebilmek için bir @Preview sarmalayıcısı ekleyin. Bu sarmalayıcı, örnek verilerle ProfileCard işlevini çağırır ve bir arka plan gösterir.

Artık iç boşlukları veya renkleri değiştirip sonucu anında güncellenirken izleyebilirsiniz.

Kartı çalışan uygulamada görüntülemek için etkinliğinizde setContent içinde çağırın. Böylece composable'ınız canlı ekrana bağlanır.

Artık tek bir composable'dan eksiksiz ve yeniden kullanılabilir bir kullanıcı arayüzü bileşenine geçtiniz.

Composable'ların iç boşluk, boyut ve arka planı nasıl aldığını gözden geçirelim.

Text, Column ve Modifier öğelerini birleştirerek eksiksiz bir profil kartı oluşturdunuz. Modifier'lar, kullanıcı arayüzünüzü şekillendirmek ve biçimlendirmek için padding, fillMaxWidth ve background çağrılarını zincirlemenizi sağlar.

Kartı name ve title parametreleriyle yeniden kullanılabilir hâle getirdiniz, @Preview ile önizlediniz ve setContent aracılığıyla görüntülediniz. Baştan sona eksiksiz bir composable ekranı oluşturdunuz. Tebrikler!