Xamarin Forms Instagram Tasarımı

Merhaba arkadaşlar. Bu yazımda Xamarin Forms ile Instagram tasarımının nasıl yapılacağından bahsedeceğim. Xamarin Forms ile tasarım yapmak, sürükle bırak ile tasarım yapmaktan daha zordur. Bende aslında bu kadar zor olmadığını ve büyük uygulamaların ekranlarının tasarımını yaparak yeni başlayanlara örnek olmasını istedim. Aşağıda Instagram’ın güncel giriş sayfası gösterilmektedir.

 

 

Aslında gayet basit bir ekran. Büyük uygulamaların genel özelliğidi; basit olması. Böylelikle kullanıcıların korkup uygulamadan kaçmasını engeller. Hemen hemen bütün büyük uygulamalarda bu böyledir.

 

Şimdi ilk olarak bir boş proje oluşturuyoruz. Oluşturduktan rebuild yapıp projenin oturmasını sağlıyoruz. Sonrasında ise mevcut olan veya sonrasında sizin oluşturmuş olduğunu bir sayfanın tasarım kısmı olan Xaml tarafına geliyoruz. Aşağıda veya github’da projenin kodlarını bulabilirsiniz ama ben yine de anlatmak istiyorum.

 

Burada ilk olarak sayfanın başında bulunan dil seçme kısmı var.Buraya dokunduğunuz zaman aşağı doğru açılır bir picker çıkacak ve siz buradan bir dil seçebileceksiniz. Biz sadece tasarımını yaptık. Siz isterseniz bir renderer ile bunu yapabilirsiniz.

 

Ardından instagram logosu var. Bu aslında bir yazı fontu ama ben direk olarak bir logo şeklinde alıp ekrana koydum. Logonun aşağısında ise giriş kısımları bulunmakta. Burada bizden istenen kullanıcı adı ve şifre. Bunlarında tasarım şekillerini aşağıda görebilirsiniz. Burada zorlanacağınız şey belkide aynı label içerisinde yazılara farklı özellikler vermek olacaktır. Bunun için yapmanız gereken yazının içerisine span eklemek. Aşağıda zaten örnekleri mevcut. Düz çizgiyi de box view’ler ile koydum.

 

 

Tasarım ekranımız bu kadar sizin de aklınıza takılan sorular olursa maile veya yorum atarak bana ulaşabilirsiniz. Eğer projeye Github üzerinden ulaşmak istiyorsanız, buradan ulaşabilirsiniz. İyi çalışmalar dilerim

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.