Kotlin’de Giriş Sayfası Uygulaması
Tekrardan merhaba…
Yazılımcının hayal gücünü bir programlama dili bilmesi kadar önemli olduğunu herkes biliyordur. Hayal gücün varsa oyun tasarlayabilirsin, güzel bir otomasyon tasarlayabilirsin ve tabi ki güzel bir mobil uygulamada yapabilirsin. Ben bugünki yazımda hayal gücümü ne kadar zorlayabilirim göreceğiz. Giriş ekranı yapacağız. Okumakta olduğum okulun giriş sayfasını basite indirgeyerek birlikte yapacağız.
Bir arayüz oluşturmadan önce düşüncelerimizi somut bir şeye dökmemiz gereklidir. Ben ‘canva’ uygulamasını kullanarak kendi arayüzüm hakkında birkaç fikre sahip oldum. Tasarladığım arayüzün hemen hemen aynısını yapmaya çalışacağım.
Tasarımım olabildiğince basit, şifremi unuttum sayfası ile birlikte toplam iki sayfa yapacağım. Tasarımınız eğer kafanızda şekillenip somut bir hal aldıysa, gerekli olan diğer şeyler tamamlamalıdır. Giriş ekranında resim veya logo kullanılacak mı? Cevap evetse resminizi indirmelisiniz ve sürükle bırak yöntemi ile res’in altında bulunan drawable’a bırakabilirsiniz.
Dikkatinizi çekti mi bilmiyorum ama benim tasarımımın üzerinde kullanıcı bilgisi ve parola hücrelerin yanında küçük resimler bulunmakta bunu Android Studio’da bulabilir ve xml dosyamızdan konumunu ayarlayabiliriz. Resimleri eklemek için;
Drawable sağ tık yaparak new’den vector asset’e giderek aşağıdaki görüntü ile karşı karşıya kalırız ‘Clip Art’ ın yanında bulunan resme tıkladığımızda diğer resimler ekrana gelecektir. İstediğiniz resmi seçtikten sonra opaklığını ve ismini aynı zamanda boyutunu ayarlayabiliriz. Rengini ve konumunu xml dosyasından ayarlamamız gerekmektedir.
Tasarımda bir tane ImageView, iki tane buton ve üç tane textView kullandım. Giriş ekranı ve şifremi unuttum olmak üzere de iki sayfa tasarımı yapacağız. Giriş ekranından başlayacak olursak;
Tasarımı halledikten sonra xml dosyasından düzenlemeler yapalım. Arka plan rengi için logoda bulunan lacivert tonunu kullanmak istedim bunu da Android Studio kullanarak renk tonunu bulabiliriz. Renk tonunu bulmak için;
Resim belgemizin içine giriyoruz ekranda açıldıktan sonra zaten sol üstte, show color picker çıkacaktır buradan renk kodunu alabiliriz.
Renk kodunu aldıktan sonra ise colors.xml dosyasını girmemiz gereklidir. xml dosyamızı res>values içinde bulabiliriz.
Ben resimden dört adet renk kodu alıp projemde kullanacağım. Bunları hallettikten sonra xml dosyasına bakarak yavaş yavaş projeyi kapatacağız. Kullanacağım her metoda id eklememiz gereklidir. id isimlerini verdikten sonra xml dosyasında görüntü, boyut, konum açısından düzenliyoruz. Detaylı olarak vermiyorum bir önceki yazımda xml nedir ve ne yaparız açıklamasını yapmıştım. Bir önceki yazım için;
Tasarımı tamamladığımıza göre eksiğimiz şu an veri tabanı ve sayfalar arası geçiş özelliklerimiz. Sayfalar arası geçiş için özel bir metod bulunmaktadır. Bu metodu kullanmak için;
Databindig kütüphanesini app seviyesindeki gradle’a eklememiz gerekiyor.
onCreate metodundan önce ActivityMainBinding tipinde, binding değişkeni oluştururuz.
Ardında onCreate methodunun içinde, setContentView fonksiyonunu activity_main ile ilişkilendirmeliyiz;
Ve sayfalar arası geçişi sağlamak için artık metod kullanıma hazır hale gelecektir.
Burada giris diye bir değişken atayarak butona tıklandığı zaman giriş ekranına gitmesini istedim. Böylelikle sayfalar arası geçiş yapılabilecektir. Bugunki yazıda kazanımlar olarak sayfalar arası geçiş, xml dosyasında renkleri düzenlemek, vector asset nedir nasıl kullanılır bunları öğrendik. Daha önce bahsettiğim veri tabanı kısmını bir sonraki yazımda inceleyelim.
Tekrar görüşmek üzere… 😊
