Doğum Günü Kartı uygulaması oluşturma

Bu codelab'de, metin görüntüleyen basit bir Android uygulaması derleyeceksiniz. Android'de Kullanıcı Arayüzü (UI) bileşenleri hakkında daha fazla bilgi edinerek ekrandaki metni konumlandırabilirsiniz.

Ön koşullar

  • Android Studio'da yeni uygulama oluşturma.
  • Emülatörde veya Android cihazınızda uygulama çalıştırma.

Öğrenecekleriniz

  • Views ve ViewGroups gibi kullanıcı arayüzü öğeleri nelerdir?
  • Bir uygulamadaki TextView içinde metin görüntüleme.
  • TextView üzerinde metin, yazı tipi ve marj gibi özellikler nasıl ayarlanır?

Derlemeniz istenen nedir?

  • Bir doğum günü karşılama mesajını metin biçiminde gösteren bir Android uygulaması.

İşiniz bittiğinde uygulamanız bu şekilde görünecek.

İhtiyacınız olanlar

  • Android Studio'nun yüklü olduğu bir bilgisayar.

Boş Etkinlik projesi oluşturma

  1. Başlamak için, Android Studio'da Boş Etkinlik şablonunu kullanarak yeni bir Kotlin projesi oluşturun.
  2. Minimum API düzeyi 19'u (KitKat) kullanarak uygulamayı "Mutlu Yıllar" olarak adlandırın.

Önemli: Android Studio'da yeni proje oluşturma hakkında bilginiz yoksa ayrıntılar için İlk Android uygulamanızı oluşturma ve çalıştırma bölümüne bakın.

  1. Uygulamanızı çalıştırın. Uygulama, aşağıdaki ekran görüntüsünde görünmelidir.

Bu Doğum Günü uygulamasını Boş Etkinlik şablonuyla oluşturduğunuzda Android Studio, ekranın ortasındaki "Hello World!&quot" mesajı da dahil olmak üzere temel bir Android uygulaması için kaynaklar ayarlamıştır. Bu codelab'de, mesajınızın oraya nasıl ulaştığını, metnin nasıl daha fazla doğum günü kutlaması olarak değiştirileceğini ve ek mesajların nasıl ekleneceğini ve biçimlendirileceğini öğreneceksiniz.

Kullanıcı arayüzleri hakkında

Bir uygulamanın kullanıcı arayüzü (UI) ekranda gördüğünüzle aynıdır: metin, resimler, düğmeler ve diğer birçok öğe türü. Uygulamanın kullanıcıya neler gösterdiği ve kullanıcının uygulamayla nasıl etkileşimde bulunduğu.

Bu öğelerin her biri View olarak adlandırılır. Uygulamanızın ekranında hemen hemen her şeyi View görürsünüz. Views, tıklanabilir bir düğme veya düzenlenebilir bir giriş alanı gibi etkileşimli olabilir.

Bu codelab'de, metin görüntüleme amacıyla kullanılan ve TextView olarak adlandırılan bir View türüyle çalışacaksınız.

Bir Android uygulamasındaki Views yalnızca ekranda görünmez. Views adlı kullanıcının birbiriyle ilişkisi var. Örneğin, bazı metnin yanında bir resim olabilir ve düğmeler satır oluşturabilir. Views öğelerini düzenlemek için bunları bir kapsayıcıya eklersiniz. ViewGroup, View nesnelerin oturabileceği bir kapsayıcıdır ve içindeki Views öğesini düzenlemekten sorumludur. Düzenleme veya düzen, uygulamanın çalıştığı Android cihazın ekranının boyutu ve en boy oranına göre değişebilir ve düzen, cihazın dikey veya yatay modda olmasına uyum sağlayabilir.

Bir ViewGroup türü ConstraintLayout, içindeki Views öğesini esnek bir şekilde düzenlemenize yardımcı olur.

Düzen Düzenleyici hakkında

Views ve ViewGroups ayarlarını yaparak kullanıcı arayüzü oluşturmak, Android Uygulaması oluşturmanın önemli bir parçasıdır. Android Studio, bunu yapmanıza yardımcı olan Düzen Düzenleyici adlı bir araç sağlar. Metnin stilini belirlemek için Düzen Düzenleyicisi'yi &Hello World!" metnini değiştirmek için "Mutlu Yıllar!" ve daha sonra.

Düzenleyici aracı açıldığında birçok bölüm olur. Bunların çoğunu bu codelab'de kullanmayı öğreneceksiniz. Düzen Düzenleyici'deki pencereleri tanımaya yardımcı olması için aşağıdaki ek açıklamalı ekran görüntüsünü kullanın. Uygulamanızda değişiklik yaparken her bölüm hakkında daha fazla bilgi edineceksiniz.

  • Solda (1), daha önce gördüğünüz Proje penceresidir. Projenizi oluşturan tüm dosyaları listeler.
  • Ortada, uygulamanızın ekran düzenini temsil eden iki çizim (4) ve (5) görebilirsiniz. Soldaki gösterim (4) uygulama çalışırken ekranınızın nasıl görüneceğine dair yakın bir tahmindir. Bu görünüme Tasarım görünümü denir.
  • Sağdaki temsil (5) belirli işlemler için yararlı olabilecek Şema görünümüdür.
  • Palet (2), uygulamanıza ekleyebileceğiniz farklı Views türlerindeki listeleri içerir.
  • Bileşen Ağacı (3) ekran görüntülenmelerinizin farklı bir temsilidir. Ekranınızın tüm görünümleri listelenir.
  • En sağda (6) Özellikler bulunmaktadır. Bir View özelliğinin özelliklerini gösterir ve bunları değiştirmenize olanak tanır.

Düzenleyici Düzenleyicisi ve nasıl yapılandırılacağı hakkında daha fazla bilgiyi geliştirici referans kılavuzunda bulabilirsiniz.

Tüm Düzen Düzenleyici'nin ek açıklamalı ekran görüntüsü:

Düzen Düzenleyici'de, uygulamanızı daha çok doğum günü kartı haline getirmek için bazı değişiklikler yapalım.

Hello World mesajını değiştirme

  1. Android Studio'da, soldaki Proje penceresini bulun.
  2. Bu klasörleri ve dosyaları not edin: Değişiklik yapmak üzere, uygulama için değiştireceğiniz dosyaların çoğuna uygulama klasöründen ulaşabilirsiniz. res klasörü, resimler veya ekran düzenleri gibi kaynaklar için kullanılır. Düzen klasörü, ekran düzenleri içindir. activity_main.xml dosyası, ekran düzeninizin açıklamasını içerir.
  3. app klasörünü, res klasörünü ve ardından layout klasörünü genişletin.
  4. activity_main.xml simgesini çift tıklayın.
    Bu işlem, Düzen Düzenleyici'de activity_main.xml öğesini açar ve Tasarım görünümünde tarif ettiği düzeni gösterir.
  1. Bileşen Ağaç'taki görünüm listesine bakın. Altında bir ConstraintLayout ve TextView olduğuna dikkat edin.
    Bunlar, uygulamanızın kullanıcı arayüzünü temsil eder. TextView içinde, ConstraintLayout içinde olduğu için girintili. ConstraintLayout listenize daha fazla Views ekledikçe bu listeler de bu listeye eklenecek.
  2. TextView uygulamasının yanında "Hello World!" ifadesine dikkat edin. Bu, uygulamayı çalıştırdığınızda gördüğünüz metindir.
  3. Bileşen Ağacı'nda TextView'yi tıklayın.
  4. Sağda Özellikler'i bulun.
  5. Beyan edilen Özellikler bölümünü bulun.
  6. Beyan edilen Özellikler bölümündeki text özelliğinin Hello World! değerini içerdiğine dikkat edin.

text (metin) özelliği, TextView içinde basılmış metni gösterir.

  1. Hello World! metninin bulunduğu text özelliğini tıklayın.
  2. Doğum Gününüz Kutlu Olsun demek için değiştirin ve Enter tuşuna basın. Sabit kodlu bir dizeyle ilgili uyarı görürseniz şimdilik endişe etmeyin. Bir sonraki codelab'de bu uyarıdan nasıl kurtulacağınızı öğreneceksiniz.
  3. Tasarım Görünümü'nde metnin değiştiğine dikkat edin....(bu iyi, değişikliklerinizi hemen görebilirsiniz!)
  4. Uygulamanızı çalıştırdığınızda Doğum Gününüz Kutlu Olsun!
     şeklinde olsun

Harika! Bir Android uygulamasında ilk değişiklikleri yaptınız.

Oluşturduğunuz doğum günü kartı şu anda uygulamanızdakilerden farklı görünüyor. Ortadaki küçük metin yerine, biri sol üst diğeri sağ alt köşede olmak üzere iki büyük mesaja ihtiyacınız vardır. Bu görevde mevcut TextView öğesini silip iki yeni TextViews ekleyecek ve ConstraintLayout içinde nasıl konumlandıracağınızı öğreneceksiniz.

Mevcut TextView'u sil

  1. Düzen Düzenleyici'de tıklayıp düzenin ortasındaki TextView simgesini seçin.
  2. Sil tuşuna basın.
    Android Studio, TextView öğesini siler ve uygulamanız artık Düzen Düzenleyici ile Bileşen Ağacı'nda yalnızca bir ConstraintLayout gösterir.

Metin Görünümü ekleme

Bu adımda, doğum günü kutlamasını bekletmek için uygulamanızın sol üst tarafına bir TextView eklersiniz.

Düzenleyici'nin sol üst tarafındaki Palet, uygulamanıza göre ekleyebileceğiniz farklı türlerde Views kategorilerine göre düzenlenmiş listeler içerir.

  1. TextView sizi bekliyor. Hem Genel hem de Metin kategorisinde görünür.
  2. Palet'ten TextView öğesini, Düzen Düzenleyici'deki tasarım yüzeyinin sol üst kısmına sürükleyip bırakın.
    Tam olarak girmeniz gerekmez, sol üst köşeye yakın bir yere bırakın.
  3. Bir TextView eklendiğinde, Bileşen Ağacı'nda kırmızı ünlem işareti olduğuna dikkat edin.
  4. Farenizi ünlem işaretinin üzerine getirdiğinizde görünümün kısıtlanmadığını belirten ve uygulamayı çalıştırdığınızda farklı bir konuma atlayan bir uyarı mesajı görürsünüz. Sonraki adımda bu sorunu düzelteceksiniz.

TextView'u konumlandırma

Doğum günü kartında TextView alanının sol üst köşeye yakın bir yerde bulunması gerekir. Uyarıyı düzeltmek için TextView uygulamasına bazı kısıtlamalar eklemeniz gerekir. Bu kısıtlamalar, uygulamanıza nasıl konumlanacağını bildirir. Kısıtlamalar, bir View öğesinin bir yerleşimde olabileceği yerlerle ilgili yol tarifleri ve sınırlamalardır.

Sola ve sola eklediğiniz kısıtlamalar kenar boşluklarına sahiptir. Kenar boşluk, bir View öğesinin, kapsayıcısının bir kenarından ne kadar uzakta olduğunu belirtir.

  1. Sağdaki Özellikler'de, Düzen bölümündeki Kısıtlanmış Widget'ı bulun. Kare, görünümünüzü temsil eder.
  2. Karenin en üstündeki + simgesini tıklayın. Bu, metin görünümünüzün üst kısmı ile sınırlama düzeninin üst kenarı arasındaki sınırlama içindir.
  3. Üst kenar boşluğunu ayarlamak için sayı içeren bir alan görünür. Marj, TextView ile kapsayıcının kenarı arasındaki mesafedir (ConstraintLayout). Gördüğünüz sayı, TextView uygulamasını bıraktığınız yere bağlı olarak farklılık gösterecektir. Üst kenar boşluğunu ayarladığınızda Android Studio, metin görünümünün üst kısmından ConstrainLayout öğesinin üst kısmına otomatik olarak bir sınırlama da ekler.
  4. Üst kenar uzunluğunu 16 olarak değiştirin.
  1. Aynı işlemi sol kenar boşluğu için de yapın.
  2. text'i ( arkadaşınıza) doğum gününüzü kutlayacak şekilde ayarlayın (örneğin, "Mutlu Yıllar, Sam!") ve Enter tuşuna basın.
  3. Tasarım görünümü, uygulamanızın nasıl görüneceğini gösterecek şekilde güncellenir.

Başka bir TextView ekleme ve konumlandırma

Doğum günü kartınızın sağ alt köşesine yakın bir yerde ikinci bir metin satırı bulunur. Bu adımı, önceki görevde olduğu gibi eklersiniz. Bu TextView kâr marjının ne olması gerektiğini düşünüyorsunuz?

  1. Palet'ten yeni bir TextView öğesini sürükleyip Düzen Düzenleyici'de uygulama görünümünün sağ alt kısmına bırakın.
  2. 16 sağ marj ayarlama.
  3. Alt 16 kâr marjı ayarlayın.
  4. Özellikler'de, kartınızı imzalamak için text özelliğini ayarlayın. Örneğin "&Mat".
  5. Uygulamanızı çalıştırın. Doğum günü kutlamanızı sol üstte, imzanızı ise sağ alt köşede görürsünüz.

Tebrikler! Uygulamanıza bazı kullanıcı arayüzü öğeleri ekleyip konumlandırdınız.

Kullanıcı arayüzüne metin eklediniz, ancak henüz son uygulama gibi görünmüyor. Bu görevde TextView görünümünü etkileyen boyutu, metin rengini ve diğer özellikleri nasıl değiştireceğinizi öğreneceksiniz. Farklı yazı tipleri de deneyebilirsiniz.

  1. Bileşen Ağacı'ndaki ilk TextView öğesini tıklayın ve Özellikler penceresinin Genel Özellikler bölümünü bulun. Bu klasörü bulmak için sayfayı aşağı kaydırmanız gerekebilir.
  2. fontFamily, textSize ve textColor gibi çeşitli özelliklere dikkat edin.
  3. textView öğesini arayın.
  4. textView genişletilmemişse aşağı üçgeni tıklayın.
  5. textSize değerini 36 sp olarak ayarlayın.
  1. Düzen Düzenleyici'deki değişikliğe dikkat edin.
  2. fontFamily öğesini günlük olarak değiştirin.
  3. Nasıl olduklarını görmek için birkaç farklı yazı tipi deneyin. Listenin alt kısmında, Diğer Yazı Tipleri...
  4. Farklı yazı tipleri kullanmayı tamamladığınızda fontFamily'ı sans-serif-light olarak ayarlayın.
  5. textColor [renk] düzenleme kutusunu tıklayıp Black (Siyah) yazmaya başlayın.
    Yazarken Android Studio'nun o ana kadar yazdığınız metni içeren renklerin listesini gösterdiğine dikkat edin.
  6. Renk listesinden @android:color/black'i seçin ve Enter tuşuna basın.
  7. İmzanızla TextView öğesinde textSize, textColor ve fontFamily değerlerini eşleşecek şekilde değiştirin.
  8. Uygulamanızı çalıştırıp sonuca bakın.

Tebrikler, bir doğum günü kartı uygulaması oluşturmak için ilk adımları attınız!
  • Düzen Düzenleyici, Android uygulamanız için kullanıcı arayüzü oluşturmanıza yardımcı olur.
  • Uygulamanızın ekranında hemen hemen her şeyi View görürsünüz.
  • TextView, uygulamanızda metin görüntüleyen bir kullanıcı arayüzü öğesidir.
  • ConstraintLayout, diğer kullanıcı arayüzü öğelerinin kapsayıcısıdır.
  • Views, ConstraintLayout içinde yatay ve dikey olarak kısıtlanmalıdır.
  • View konumlandırmanın bir yolu, kenar boşluğudur.
  • Kenar boşluk, bir View öğesinin, kapsayıcısının bir kenarından ne kadar uzakta olduğunu belirtir.
  • TextView üzerinde yazı tipi, metin boyutu ve renk gibi özellikleri ayarlayabilirsiniz.