Form Ekran Tasarımı

Bu öğrenme içeriğinde, yeni bir fikir kaydı için tasarlanacak form ekranını birlikte oluşturacağız. 

Öncelikle, Drawer tipinde kullanılacak ve buna uygun boyutlandırılmış form ekranını inceleyeceğiz. 

Ekranın en üstünde, ekran isminin yer aldığı bir Label ve ekranı kapatmaya yarayan bir çıkış ikonu içeren basit bir Header bulunuyor. 

Header'ın altında, veri girişine olanak tanıyan SelectBox ve TextInput gibi Input tipi form elementleri yer alıyor. Ayrıca, fikre ait görsellerin listelendiği GalleryView elementi içerisinde yer alan Image elementleri ve form girişi sonrasında verilerin kaydedilmesini sağlayacak bir buton elementi ekranın alt kısmında bulunmaktadır.

İncelediğimiz bu ekran tasarımını birlikte hazırlayalım.

1. Form ekranı tasarımını gerçekleştirmek için Screens panelinden New Suggestion adında yeni bir ekran oluşturun.
2. Form ekranının Drawer olarak açılmasını sağlayacağız. Bu nedenle ekran tasarımını Drawer olarak açılacak genişlikte yapmamızda fayda var. Böylece ekran içindeki elementlerin düzenini net bir şekilde görmüş oluruz.
3. Ekranın üstünde yer alan mobil cihaz ikonuna tıklayarak ekranın genişlik ölçüsünü mobil boyut olarak ayarlayın. Bu genişlik ayarlama işlemi, ekrana mutlak bir genişlik ölçüsü vermez. Belirlediğimiz genişlikte ekran içindeki elementlerin davranışını görmemizi sağlar. Ancak bir ekranı Drawer veya Pop-up olarak açarken prototipleme esnasında kesin bir genişlik ölçüsü vermek gerekecektir. 

Header tasarımı ile devam edelim.

4. Ekrana bir Header elementi sürükleyip bırakın. 
5. Header içerisine bir Row ekleyin ve sol kolonun daha geniş olduğu iki kolonlu bir yapıya dönüştürün.
6. Row seçiliyken BorderBottom stilini ekleyin.
7. Soldaki kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
8. Ardından Styling paneli Text alanından H3 stilini ekleyin.
9. Label’in bulunduğu kolonu seçin, sola hizalayın ve dikeyde ortalayın.
10. Şimdi sağdaki kolona bir Icon elementi ekleyin ve Icon seçimi yapın.
11. Icon elementinin bulunduğu ebeveyn kolonu seçin ve sağa hizalayarak dikeyde ortalayın.

Bu işlemlerle birlikte Header tasarımı hazır. Form yapısıyla devam edelim.

12. Ekranda boş bir alana tıklayın ve Styling panel aracılığıyla ekranın arka plan rengini White olarak güncelleyin.
13. Ekrana bir Row sürükleyin.
14. Row’u tek kolona dönüştürün ve Row’da varsayılan olarak Layout stilini kaldırıp None stilini ekleyin.
15. Kolonu seçin ve varsayılan olarak gelen Layout stilini kaldırıp T1_R2_B1_L2 stilini ekleyin.
16. Kolon içerisine bir Selectbox ekleyin.
17. SelectBox’un Placeholder metnini güncelleyin.
18. Ardından SelectBox’un arka plan rengini değiştirip, Border alanından InputBorder stilini seçin.
19. SelectBox’un ebeveyni olan dıştaki Row’u seçin ve Duplicate edin. 
20. SelectBox’u kaldırıp TextInput ekleyin.
21. TextInput’un Placeholder metnini güncelleyin.
22. Tıpkı SelectBox’da olduğu gibi TextInput’un arka plan rengini değiştirip, Border alanından InputBorder stilini seçin.
23. TextInput’un ebeveyni olan Row’u seçin ve Duplicate edin. 
24. Duplicate olarak gelen TextInput’un Placeholder metnini güncelleyin.
25. TextInput’un ebeveyni olan Row’u seçin ve Duplicate edin. 
26. TextInput’u silin ve Type seçimindeki SelectBox’u kopyalayıp buradaki kolona yapıştırın.
27. Placeholder metnini güncelleyin.

Şimdi Görsel yükleme alanının tasarımını hazırlayalım.

28. Form yapısının hemen altına bir Row ekleyin ve tek kolona dönüştürün.
29. Row’da varsayılan olarak gelen Layout stilini kaldırıp T1_R2_B1_L2 stilini ekleyin.
30. Kolonu seçin arka plan rengini güncelleyin ve Radius alanından Radius stilini seçin.
31. Kolon içerisine Bir Row sürükleyip, bırakın.
32. Row’u seçin, sol kolonun daha geniş olduğu iki kolonlu bir yapıya dönüştürün.
33. Varsayılan gelen Row stilini kaldırın.
34. Sol kolon içerisine bir Label ekleyin içeriğini güncelleyip, H3 stilini ekleyin.
35. Ebeveyn kolonun hizalama işlemlerini yapın.
36. Sağdaki kolon içerisine bir Button elementi ekleyin ve buton içeriğini güncelleyip, buton ikonu seçin.
37. Ardından Styling panelden Button Secondary seçimi yapıp, arka plan rengini kaldırın.
38. Border alanında dört yönde 1 piksel genişliğinde düz bir kenarlık ekleyin.
39. Ebeveyn kolonun hizalama işlemlerini yapın.
40. Label’in ve butonun bulunduğu Row altına bir Row daha ekleyin.
41. Row’u tek kolona dönüştürün ve varsayılan gelen Padding stilini kaldırıp, None seçimi yapın. 
42. Kolon içerisine bir GalleryView ekleyin.
43. GalleryView’in Mobil görünümde kolon sayısını 3 olarak güncelleyin.
44. GalleryView içerisine bir Row ekleyin ve tek kolona dönüştürün.
45. Kolon içerisine bir Image elementi ekleyin ve ImageFit özelliğini güncelleyip, Image64 seçimi yapın.
46. Border alanından Radius stilini seçin.
47. Image’in bulunduğu ebeveyn kolonu seçin ve hizalama işlemlerini gerçekleştirin.

Görsel yükleme alanı sonrasında Kaydetme/oluşturma butonunu hazırlayalım.

48. Ekrana bir Footer sürükleyin.
49. Footer içerisine bir Row sürükleyin ve tek kolona dönüştürün.
50. Row seçiliyken varsayılan olarak gelen Layout stilini kaldırıp T1_R2_B1_L2 stilini ekleyin.
51. Kolonu seçin ve Column isimli Layout stilini kaldırıp None seçimi yapın.
52. Kolon içerisine bir buton ekleyip metnini güncelleyin.
53. Ardından Buton seçiliyken Block seçimi gerçekleştirin.

Artık bir Form ekranına sahipsiniz. Benzer yapıdaki form ekranlarını bu örnekten hareketle hazırlayabilirsiniz.