Xamarin Forms Twitter Tasarımı

Merhaba arkadaşlar. Bu yazımda Xamarin Forms ile nasıl Twitter tasarımı yapılacağından bahsedeceğiz. Tasarım konusu Xamarin Forms’da en zorlanılan konulardan birisidir. Çok fazla kaynak olmadığı için de insanlar Xamarin Forms’dan korkuyorlar. Daha önce Instagram’ın giriş ekranını ve ana sayfada bulunan ekranı yapmıştık. Bu yazıda ise Twitter’ın tasarımını yapmaya çalışacağız. Twitter’ın tasarımına baktığımızda şöyle; bir Master Detail Page var. Master’ın da kullanıcı bilgileri ve gitmek istediği sayfalar yer alırken, Detail sayfasında ise Tabbed Page halinde 4 adet sayfa var. Bu sayfalarda ise Ana sayfa, Bildirimler, Arama ve Mesajlar bölümünden oluşmaktadır. Ben bu yazıda sadece ana sayfasını ve Master kısmını halletmeye çalışacağım. Sonrasında ise sizinle beraber diğer sayfalara geçeriz.

İlk olarak bir Master Detail sayfası açıyoruz. Sonrasında ise bu Master Detail sayfasının detail kısmına bir tabbed page atıyoruz ve bu Tabbed Page’in altına ise 4 adet content page oluşturuyoruz. Oluşturmuş olduğumuz sayfalara sadece ikon ataması yapıyoruz. Normalde Master Page’in ikonu hamburger menu şeklinde olur. Bunu değiştirmek için Master sayfasına bir ikon atamamız gerekiyor. Twitter’da bu kullanıcının profil fotoğrafı. Bu yüzden bende bir kullanıcı profil fotoğrafı atadım.

Sonrasında ise sayfanın tasarımlarına geçelim. Tweetler için bir tasarım oluşturmak için grid kullanmak en mantıklı harekettir. Tüm tweetleri liste şeklinde göstermek için bir ListView atıyorum. List View içerisinde grid atıyorum. Bu gridi iki kolona bölüyorum. Kolanlardan ilki tweeti atanın profil fotoğrafını içerecek. İkinici ise tweet hakkında bilgiler verecek. İkinci kolonuda 3 ayrı satıra bölüyorum. Satırlardan ilki tweeti atan kullanıcı hakkında bilgiler içeriyor. İkinici satır tweet hakkında oluyor. Direk olarak tweeti ekrana basıyoruz. Son satır ise gelen yorumları, beğeni sayılarını ve retweet sayılarını içeriyor.

Tasarım bittikten sonra içeride bilgileri göstermem gerekecek. Bunun için örnek bir model oluşturmalıyım. Basit düzeyde, ihtiyacım olanları bu modelin içerisine ekiyorum.

Sonrasında ise bu modellerden bir liste oluşturuyorum. Bu listeyide List View içerisine aktarıyorum.

Son olarak ise yeni tweet atma butonunu koyalım. Bunun için ise Absolute Layout kullanıyoruz. Uygulamanın ana sayfası aşağıda ki gibidir.

İkonlar tam oturmadığı için bazı sıkıntılar olabilir. Bunun için siz daha iyi ikonlar bulup koyabilirsiniz veya platformlar için farklı boyutlara dönüştürebilirsiniz ikonları.

Sizin istediğiniz sayfalar varsa onlarında ekran tasarımlarını yapabiliriz. Sorularınız olursa mail veya yorum atarak bana ulaşabilirsiniz. İyi çalışmalar.

 

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.