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.
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinTwitterDesign.Views.AnaSayfaViews.AnaSayfaDetail"
Icon="pp.png"
BarBackgroundColor="#1c2938"
Title="Ana Sayfa">
<NavigationPage.TitleView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1"
HorizontalOptions="Start"
VerticalOptions="Center"
Text="Ana Sayfa"
FontSize="Medium"
TextColor="White"/>
</Grid>
</NavigationPage.TitleView>
<ContentPage Icon="home.png">
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ListView x:Name="liste"
ItemsSource="{Binding .}"
SeparatorColor="Transparent"
SeparatorVisibility="None"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10,5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- tweetin yanında bulunan kullanıcı profil foto -->
<StackLayout Grid.Column="0">
<Image Source="pp1.png"/>
</StackLayout>
<!-- Tweet ve aşağısında ki bilgiler -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding FullName}"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label
TextColor="#8899a6"
Grid.Column="1">
<Label.FormattedText>
<FormattedString>
<Span Text="@" />
<Span Text="{Binding Username}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Text="{Binding Time}"
Grid.Column="2"
TextColor="#8899a6"/>
<Image Grid.Column="3"
Source="arrowdown.png"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="15"
HeightRequest="15"/>
</Grid>
<Grid Grid.Row="1">
<Label HorizontalOptions="StartAndExpand"
VerticalTextAlignment="Start"
Text="{Binding Tweet}"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="comment.png"
Grid.Column="0"
WidthRequest="5"
HeightRequest="5"/>
<Label Text="{Binding MentionCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="retweet.png"
Grid.Column="0"
WidthRequest="10"
HeightRequest="10"/>
<Label Text="{Binding RetweetCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="heart.png"
Grid.Column="0"
WidthRequest="5"
HeightRequest="5"/>
<Label Text="{Binding LikeCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<StackLayout Grid.Column="3">
<Image Source="share.png"/>
</StackLayout>
</Grid>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,60,60">
<Button Text="+"
FontSize="Large"
FontAttributes="Bold"
BorderRadius="30"
WidthRequest="60"
HeightRequest="60"
TextColor="White"
BackgroundColor="#1da1f2"/>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
<ContentPage Icon="search.png"></ContentPage>
<ContentPage Icon="notification.png"></ContentPage>
<ContentPage Icon="message.png"></ContentPage>
</TabbedPage>
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.
public class Model
{
public string FullName
{
get;
set;
}
public string Username
{
get;
set;
}
public string Date
{
get;
set;
}
public string Time
{
get;
set;
}
public string MentionCount
{
get;
set;
}
public string Tweet
{
get;
set;
}
public string LikeCount
{
get;
set;
}
public string RetweetCount
{
get;
set;
}
}
Sonrasında ise bu modellerden bir liste oluşturuyorum. Bu listeyide List View içerisine aktarıyorum.
public partial class AnaSayfaDetail : TabbedPage
{
public AnaSayfaDetail()
{
InitializeComponent();
FillInfo();
}
private void FillInfo()
{
List<Model> tweetList = new List<Model>
{
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir asdasd",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir asdadasdasds a asdasd.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir. asdadas ads asd asd asd asda dad adasd asdasd asd asd ",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
};
liste.BindingContext = tweetList;
}
}
}
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.
Bir yanıt yazın