Xamarin Forms Instagram Ana Sayfa Tasarımı

Merhaba arkadaşlar. Bu yazımda Xamarin.Forms’un en zor yanlarından biri olan tasarımın nasıl yapılabileceğinden bahsedeceğiz. Xamarin Forms bir çok özelliği ile kullanıcıları kendine çekerken, tasarımın zor olması nedeniyle geliştiriciler çekinebiliyor. Bu yüzden bu yazımda Xamarin Forms ile en çok kullanılan uygulamalardan biri olan Instagram ana sayfasının nasıl yapılacağından bahsedeceğiz. Daha önce ki bir yazımda Instagramın giriş sayfasının tasarımını yapmıştık. O yazıyıda buradan okuyabilirsiniz.

İlk olarak boş bir proje açıyoruz. Sonrasında ise tasarım yapmaya başlayabiliriz. Instagram’ın genel yapısına baktığımız zaman Tabbed Page yapısında olduğunu görüyoruz. 5 adet sayfadan oluşuyor. Bu sayfaların hepsinin bir ikonu var. Bu ikonları bulmakta biraz zorlandım. Siz daha iyilerini bulup ekleyebilirsiniz.

5adet sayfayı Tabbed Page’e ekledikten sonra sayfanın Navigation alanını doldurmamız gerekiyor. Eskiden böyle bir şeyi yapmamız için bir çok problem ile karşılaşıyorduk. Şimdi ise Xamarin Forms 3.2 versiyonu ile bunu kolay bir şekilde düzenleyebiliyoruz. Bir grid atıyoruz ve 3 adet bölüme ayırıyoruz. Sonrasında ise ikonları ekliyoruz. Bu resimleri dilerseniz Tap Gesture ile tıklama özelliği kazandırıp istediğiniz bölüme yönlendirebilirsiniz.

Zaten bu işlemlerden sonra ana sayfada sadece postların olduğunu biliyoruz. Bu tüm postları bir listview içerisine atıyoruz. Burası biraz karışık ama incelediğiniz de aslında o kadar fazla zor olmadığını göreceksiniz. Gridler ile işlemlerini halledebilirsiniz. Aşağıda tasarımını da bulabilirsiniz. 7 adet row’a böldük. Bu rowlar içinde istediğimizi koyabiliriz. Tabi dediğim gibi ikonları o kadar güzel oturmadı. Siz daha iyi ikonlar bulup entegre edebilirsiniz.

Aşağıda görmüş olduğunuz gibi tasarım ekranı ortaya çıkmış oluyor.

Sizin de istediğiniz veya yapmakta zorlandığınız tasarımlar var ise yorum veya mail atarak bana ulaşabilirsiniz.

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.