Listeleme Ekran Tasarımı

Bu içerikte, oluşturulan fikirlerin bir araya getirildiği ve aralarından filtreleme yapılabilecek bir listeleme ekran tasarımının nasıl hazırlandığını öğreneceğiz.

Tasarladığımız liste ekranına göz atalım. Ekranın üst kısmında, ekranın adını gösteren bir Label, filtreleme seçeneklerine erişim sağlayan bir ikon ve bildirimleri görüntülemeyi mümkün kılan bir başlık bulunmaktadır. Bu başlığın hemen altında, Dashboard ekranına benzer bir yapıda, kullanıcının oluşturduğu fikirlerin bir listesi yer alıyor.

Birlikte bu ekran tasarımını hazırlamaya başlayalım.

1. Screens panelini kullanarak Suggestion List adında yeni bir ekran oluşturun.
2. Ekrana bir Header elementi sürükleyip bırakın. 
3. Header’in arka plan rengini Background seçimiyle değiştirin.
4. Header içerisine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
5. Soldaki kolon içerisine bir Image elementi sürükleyip bırakın.
6. Image elementine geçici bir resim ekleyin.
7. Ardından Image32 stilini seçin ve Border alanından Radius seçimini yapın.
8. Image elementinin bulunduğu kolonu seçin ve hizalama işlemlerini yapın.
9. Sağdaki kolon içerisine bir Horizontal Stack ekleyin.
10. Horizontal Stack içerisine iki ikon sürükleyin ve ikon seçimlerini gerçekleştirin.
11. Horizontal Stack’i seçin ve dikeyde ortalayın.
12. Horizontal Stack’in ebeveyni kolonu seçin ve yatayda sağa hizalayıp, dikeyde ortalayın.

Şimdi listeleme işlevini sağlayacak yapıyı tasarlayalım.

13. Ekrana bir Row sürükleyip-bırakın ve tek kolona dönüştürün. Kolondaki Padding stilini kaldırıp None seçin.
14. Dashboard ekranını açın.
15. GalleryView’i kopyalayın.
16. Suggestion List ekranına geri dönerek kolon içine yapıştırın.

Daha önce hazırladığımız Tabbar menüyü bu ekrana kopyalayarak devam edelim.

17. Ekrana bir Footer sürükleyin.
18. Dashboard ekranını açın.
19. Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
20. Liste ekranına dönün.
21. Footer’ı seçin ve yapıştırın.
22. İkon renk düzenleme işlemini gerçekleştirin.

Mobil uygulama için Listeleme ekranınız hazır.