Detay Ekran Tasarımının Hazırlanması

Bu öğrenme içeriğinde personellere ait bilgilerin detaylı olarak aktarıldığı mobil ekran tasarımını hazırlayacağız. 

Öncelikle tamamlanmış detay ekranını inceleyelim. 

Detay ekranının en üstünde basit bir Header yer almaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve ekranı kapatmaya olanak sağlayan bir çıkış ikonu bulunmaktadır.

Header altında personellere yönelik fotoğraf bilgisi için Image elementi, ad soyad, departman ve diğer başlıklar için Label elementi kullanıldığını görüyoruz.

Şimdi benzer bir detay ekranını birlikte hazırlayalım.

1. Screens paneli aracılığıyla EmployeeDetail adında yeni bir ekran oluşturun.
2. Oluşturduğunuz ekrana bir Header elementini sürükleyip bırakın.
3. Header içerisine bir Row elementini sürükleyip bırakın.
4. Row elementini tek kolonlu bir yapıya dönüştürün.
5. Kolon içerisine bir Horizontal Stack elementi ekleyin.
6. Horizontal Stack elementi içerisine bir Icon elementi ve bir Label elementini sürükleyip bırakın. 
7. Icon elementi seçiliyken ikon kütüphanesi aracılığıyla bir icon seçimi yapın.
8. Ardından Styling paneli Layout alanından ikon elementine 4 yönde 8 piksellik padding değeri verin.
9. İkonun rengini değiştirin.
10. Fill alanından ikonun arka plan rengini düzenleyin ve Border alanından ikonunuza Radius hazır stilini ekleyin.
11. Icon elementi ile çalışma sonrasında Label elementi üzerine iki kez tıklayın ve Employee Details olarak metni düzenleyin.
12. Styling Paneli Layout alanından Label’in Size değerini silin.
13. Label elementi seçiliyken Styling paneli Text alanında H3 hazır stilini ekleyin.
14. Ardından Horizontal Stack’i seçin ve dikeyde ortalayın.

Header tasarımını tamamladık. Şimdi detay ekranının tasarımını tamamlayalım.

15. Header altına bir Row elementi sürükleyip bırakın ve tek kolonlu yapıya dönüştürün.
16. Kolon içerisine bir Row elementi sürükleyip bırakın. Row’u Properties paneli ile iki kolonlu yapıya dönüştürün ve Mobil'de alt alta gelecek şekilde düzenleyin.
17. Row elementinin arka plan rengini White olarak ayarlayın ve Border alanından Radius hazır stilini ekleyin.
18. İlk kolon içerisine bir Vertical Stack elementi ekleyin.
19. Vertical Stack içerisine bir Image elementi ve bir Label elementi ekleyin.
20. Image elementine Properties paneli aracılığıyla geçici bir resim ekleyin ve ImageFıt alanından Fill seçimini yapın.
21. Ardından Image elementi seçiliyken Styling panelinden Width değerini ve Height değerini 98 Px olarak girin.
22. Border alanından Radius_Full hazır stilini ekleyin.
23. Image altında yer alan Label elementine iki kez tıklayın ve geçici bir isim girin.
24. Label elementi seçiliyken Styling paneli Text alanında H3 hazır stilini ekleyin.
25. Vertical Stack’i seçin ve yatayda ortalayın.
26. İkinci kolona da bir Vertical Stack elementi ekleyin.
27. Vertical Stack elementi içerisine bir Horizontal Stack elementi sürükleyip bırakın.
28. Ardından Horizontal Stack içerisine bir icon ve bir label elementi ekleyin.
29. Icon elementi seçiliyken ikon kütüphanesi aracılığıyla icon seçimi yapın ve Styling panelinden ikonun rengini değiştirin.
30. Ardından eklemiş olduğunuz Label üzerine iki kez tıklayıp geçici bir departman ismi girin.
31. Departman bilgilerinin yer aldığı Horizontal Stack’i Duplicate edin.
32. Yeni gelen Horizontal Stack içerisindeki iconu değiştirin. Değiştirdiğiniz iconun renk güncellemesini yapın. Ardından Label metnini geçici bir Title ile değiştirin.
33. Horizontal stack elementini BreadCrumb aracılığıyla seçin ve Duplicate edin.
34. Yeni eklenen Horizontal Stack içerisindeki iconu değiştirin ve renk düzenlemesini yapın.
35. Label üzerine iki kez tıklayıp geçici bir e-posta adresi girin.
36. Styling Paneli Layout alanından Label’in Size değerini silin.
37. Horizontal Stack elementini seçin ve yine Duplicate edin.
38. Ardından ikonu ve ikon rengini değiştirin.
39. Label’a geçici bir telefon numarası girin.
40. Son olarak telefon numarası bilgisinin yer aldığı Horizontal Stack elementini de Duplicate edin.
41. Gelen Horizontal Stack içerisindeki iconu doğum tarihini temsil eden bir ikonla değiştirin ve Label’a geçici bir doğum tarihi girin.

Bu işlemlerle detay ekran tasarımını tamamladık.