Android UI Bileşenleri
Hepinize merhaba arkadaşlar, bugün sizlerle birlikte android uygulama geliştirirken tasarım konusunda işlerimizi kolaylaştıracak birkaç UI bileşeninden bahsedeceğim. Beğenmeyi unutmayın. Hazırsanız başlayalım! 🚀
Öncelikle, UI nedir ve hangi amaçla kullanılır bunu kısaca açıklamak istiyorum.
User Interface kısaca UI olarak bilinir ve Türkçeye Kullanıcı Arayüzü olarak geçmiştir. Kullanıcı Arayüzü, insanların yazılım sayesinde bilgisayarlar ve cihazlar ile etkileşime geçtiği noktadır diyebiliriz. UI tasarımı, kullanıcının uygulamayı kullanırken karşılaştığı görsel ögeleri, butonları, metinleri, renkleri ve diğer etkileşim ögelerini tasarlama ve düzenleme sürecidir. Efektif bir UI tasarımı, kullanıcının uygulamayı kullanırken zorlukla karşılaşmamasını, kullanıcı deneyimini iyileştirmeyi ve uygulamanın estetik olarak görünmesini amaçlar ve bu şekilde kullanıcı dostu, estetik ve çekici arayüzler oluşturarak kullanıcının ürünle daha olumlu bir etkileşim deneyimlemesine yardımcı olur.
Şimdi Android geliştirirken hangi UI bileşenlerini kullanıyoruz bunlara birlikte bakalım.
Öncelikle UI kısmına nasıl geçeceğini bilmiyorsanız şu adımları izleyebilirsiniz
Öncelikle Android Studio üzerinden yeni bir proje açmanız gerekiyor, projeyi açtıktan ve gerekli düzenlemelerin yapılmasını bekledikten sonra sol tarafta Project dosyasını açın. Project dosyasında res klasörüne girip layout dosyasını seçtiğiniz zaman activity_main.xml dosyasını göreceksiniz onu açtığınız zaman UI tasarımı kısmına geçmiş olacaksınız.
activity_main.xml açtığınız zaman sizi aşağıdaki görseldeki gibi bir ekran karşılayacak
Şimdi bu ekranı detaylı bir şekilde inceleyelim 🚀
Öncelikle solda Palette kısmını görüyorsunuz bu genel olarak UI bileşenlerinin bulunduğu ve tasarım kısmına atabileceğimiz UI bileşenlerini gösteriyor, ana odağımız burası olacak ama öncesinde ekranın diğer kısımlarında ne var ona bakalım;
Ortada gördüğünüz iki ekran üzerinde tasarımı yapıyoruz diyebilirim, beyaz ekran design diye geçer. Bu ekran üzerinde UI bileşenlerini ekleyip onların ekran üzerinde nasıl görüneceğini ayarlayabiliyoruz. Mavi ekran ise blueprint olarak geçer burada pek bir işlem yapmayacağız, bu ekranın amacı design kısmında koyduğumuz bileşenlerin nasıl konumlandığınız izleyebiliyoruz.
Palette kısmının solunda activity_main.xml yazısına tıkladığınız zaman sizi böyle bir ekran karşılayacak.
Fark ettiyseniz activity otomatik vertical (dikey) olarak oluşturuldu, bu ekranda eğer isterseniz landscape (yatay) olarak activity oluşturabilir yatay olarak yapacağınız uygulamalara yönelik işlemler yapabilirsiniz.
activity_main.xml yanında yer alan mavi logoda ise yukarıda bahsettiğimiz beyaz ve mavi ekranlardan hangisini görmek isterseniz ona göre işlem yapabilirsiniz.
Yanda yer alan yatay telefon logosunda portrait (dikey) ve landscape (yatay) seçenekleri mevcuttur istediğinizi seçerek ona göre işlem yapabilirsiniz.
Android logosunda ise uygulamanızın hangi API değerinde çalışacağına karar veriyorsunuz bu konu yaptığınız uygulamayı Google Play’de yayınlamak istediğiniz zaman önemli bir konuma geliyor çünkü seçeceğiniz API değeri birçok telefonu kapsaması lazım yoksa sürümü eski olan telefonlar uygulamanızı indirip, kullanamaz.
Bu kısmın hemen altında göz logosunu göreceksiniz ona tıkladığınız zaman çeşitli seçenekler var.
Burada tasarım yaparken neleri görmek istiyorsunuz ona göre seçim yapabilirsiniz.
Yanında mıknatıs işareti göreceksiniz bunu açık tutarsanız koyduğunuz bir bileşen otomatik olarak constraint olacaktır.
0 dp yazan yerde koyacağınız bileşenler default olarak kaç dp aralıklı başlayacağını yazabilirsiniz.
Şu an için 0 olması sizin için daha uygun olacaktır.
Yanındaki logo ise bastığınız zaman bütün constraintleri (kısıtlama) kaldırır.
Ekranın sağ tarafında code ,split ve design kısımlarını görebilirsiniz eğer sadece code kısmını seçerseniz karşınıza xml ekranı gelecektir burada xml kodlama sayesinde tasarımlarınızı yapabilirsiniz. Split kısmı ise ekranı ikiye bölerek hem xml kodlarınızı yazabileceğiniz hem de design kısmında ne olup bittiğiniz görebileceğiniz bir ortam sunar. Design kısmı ise en başta gösterdiğim sayfayı yani sadece design yapabileceğiniz sayfayı gösterir.
En son olarak ekranın en sağında görünen Attributes kısmında koyduğunuz bileşenlerin id, size, text, color yani neredeyse her şeyini ayarlayabilirsiniz, bu kısmı iyi anlarsanız işleriniz kolaylaşır.
Evet şimdi en güzel kısıma geldik! Sizlere Android UI bileşenlerini elimden geldiğince anlatmaya çalışacağım. Haydi başlayalım.
Layout
Android uygulamalarında kullanıcı arayüzünü oluşturmak için xml dosyasında yer alan düzenleyicilere genel olarak “Layout” denir. Layoutlar genel olarak uygulama ekranının nasıl görüneceğini ve UI bileşenlerinin ekranda nasıl konumlanacağını ayarlamamıza yardımcı olur.
Sıklıkla kullandığımız Layoutlara göz atalım.
Linear Layout
Eğer Android uygulama geliştirme yapmaya yeni başladıysanız ilk kısımlarda Linear Layout ile içli dışlı olacağınızı belirtmek istiyorum. Linear Layout genel olarak bileşenleri dikey veya yatay olarak tek bir yönde hizalayan bir görüntüleme grubudur. Dikey veya yatay olmasını “android:orientation” kullanarak belirleyebilirsiniz.
Şimdi xml kullanarak Linear Layout oluşturalım.
xmlns:android , xmlns:tools, tools:context otomatik olarak geliyor, bizim burada düzenleyebileceğimiz şeyler width , heigth ve orientation.
width ve height özelliklerinin genelde 2 seçeneği vardır, match_parent ve wrap_content.
match_parent
Bu değer, bir bileşenin genişlik veya yükseklik yönünde içinde bulunduğu layout kadar geniş yapılmasını veya yüksek olmasını sağlar. Linear Layout için ise match_parent olması ekran genişlik veya yükseklik yönünde tamamlamasını sağlar yanı kısaca ekrana tam sığar.
wrap_content
Bu değer, bir bileşenin içeriğine uygun olarak genişliğini veya yüksekliğini ayarlar. Yani, bir bileşenin içeriği kadar alan kaplamasını sağlar.
orientation
Orientation ise linear layoutun vertical (dikey) ve horizantal (yatay) olarak hangi şekilde olmasını isterseniz düzenleyebilirsiniz.
Linear Layout, basit ve anlaşılır olması, esneklik sağlaması ile geliştiriciler tarafından oldukça kullanılır.
Constraint Layout
ConstraingLayout, Android geliştirirken kullanıcı arayüzü oluşturmak için kullanacağınız layout çeşitlerinden birisidir. ConstraintLayout, bileşenlerin birbirleriyle ve ekran kenarlarıyla olan constraintlerini belirlemek için kullanılır. Genel olarak daha karmaşık düzenler için kullanılır.
Basitçe bir ConstraintLayout oluşturmak için gerekli xml kodları yukarıda gösterildiği gibidir.
Görselde gördüğünüz gibi constraintLayout’ın en büyük avantajı bileşenler arasındaki constraintleri kendimiz belirleyerek hangi bileşenin nerede olacağına kendimiz karar verebiliyoruz.
ConstraintLayout içine atılan herhangi bir bileşenin en az bir horizantal ve bir vertical bir constraint’i olması gerekiyor.
LinearLayout ve ConstraintLayout dışında kullanılan layout çeşitleri var ancak en sık kullanılan bu ikisi olduğu için şu an bunları bilmeniz yeterli olacaktır.
Yazıyı daha fazla uzatmamak için diğer UI bileşenlerine bir sonraki yazıda yer vereceğim. Bir sonraki yazıya kadar kendinize çok iyi bakın, Android ile kalın! :D
