image
Gökhan Doğru
Xamarin

Xamarin.Forms – XamNike UI

Herkese selamlar dostlar,

Geçenlerde paylaştığım XamFilm UI‘den bilgimi geliştirecek çok güzel geri dönüşler aldım. Bilgimin daha da artması ve githubda ki xamarin community’e faydamın dokunması adına hemen yeni tasarım arayışlarına girdim. Fakat ne kadar güzel tarafları olsa da üzüldüğüm noktalarda yok değildi.. mesela içeriklerimin ve sitenin dili Türkçe olmasına rağmen ziyaretçinin %17 Türkiye, %83ü yurt dışı olması beni biraz üzdü, durum böyle olunca ilerisi için fikirlerim birazcık değişti. O yüzden siteyi ilerleyen zamanlarda sadece kodların bulunacağı ingilizce ve türkçe olmak üzere ikiye ayırmayı düşünüyorum. İngilizce açıklamalarda çok fazla detaya inemesemde Türkçe makale tarafında güzel püf noktalarını, detayına kadar vereceğim. Her neyse bunlar ileri planlarımız şimdi gelelim konumuza XamNike tasarımımıza 🙂

kaynak; https://www.uplabs.com/posts/nike-app-redesign-concept

Tasarım aslında çok basit gözükse de ürün ve ürün arkasında ki mavi daire yerleştirmesi biraz işlerimi zorlaştırmıştı 🙂
Fakat birkaç deneme ile istenilene çok yakın bir sonuç aldım 🙂

İlk önce mimarimizin Grid Row yüksekliklerimizi belirleyelim…

*NOT | Grid.Row = 1 ‘in Auto olma sebebi ScrollView kullanacağımız için ne kadar veri/tasarım varsa o kadar esneyip,bükülecek olmasıdır. Aynı durum ürün açıklaması içinde geçerlidir. Ürün açıklaması ne kadar uzunsa o kısım o kadar uzun olmalıdır herhangi bir boyut/piksel verirseniz olası durumlarda taşmalar veya büyük boşluklar görebilirsiniz o yüzden bu tarz esnek yerler için Auto kullanmalısınız.

<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
view raw XamNike.xaml hosted with ❤ by GitHub

Geriye gitmek için ve kaydetmek için biraz kolaya kaçıyorum ama gayet iş görür 🙂

<Grid Grid.Row="0" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Button Margin="15" FontSize="25" BackgroundColor="#F7F7F7" HorizontalOptions="StartAndExpand" Text="{x:Static helpers:IconFont.KeyboardBackspace}" FontFamily="{StaticResource MaterialFontFamily}" TextColor="{StaticResource Black}" />
<Button Grid.Column="1" HorizontalOptions="EndAndExpand" Margin="15" BackgroundColor="#F7F7F7" FontSize="25" Text="{x:Static helpers:IconFont.BookmarkCheck}" FontFamily="{StaticResource MaterialFontFamily}" TextColor="{StaticResource Black}" />
</Grid>
view raw XamNike.xaml hosted with ❤ by GitHub
<ScrollView Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<ff:SvgCachedImage Margin="-300,0,0,0" Grid.Row="0" Source="resource://ProductEllipse.svg"/>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Margin="-60,0,0,0" BackgroundColor="White" Padding="15" CornerRadius="45" HorizontalOptions="Center" Text="₺45" FontSize="35" FontFamily="{StaticResource FuturaBold}" TextColor="{StaticResource Black}" />
<ff1:CachedImage Grid.Row="1" Source="resource://NikePreview.png" Aspect="AspectFill"/>
</Grid>
<Grid Grid.Row="1" >
<Frame CornerRadius="30" HasShadow="False" BackgroundColor="{StaticResource White}" >
<Grid RowSpacing="15">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="55"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="120"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--URUN ADI / SEPET-->
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label VerticalTextAlignment="Center" Text="Nick Air Max" FontSize="23" TextColor="{StaticResource Black}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Column="1" FontFamily="{StaticResource FuturaBold}" BorderColor="#DDDEE2" BorderWidth="1" CornerRadius="10" BackgroundColor="White" FontSize="10" TextColor="#434670" Text="ADD TO BAG"/>
</Grid>
<!--STAR / ORANLAMA-->
<Grid Grid.Row="1" ColumnSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Grid.Column="0" Text="{x:Static helpers:IconFont.Star}" FontFamily="{StaticResource MaterialFontFamily}" BackgroundColor="White" TextColor="#FFBA00" FontSize="20"/>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Grid.Column="1" Text="{x:Static helpers:IconFont.Star}" FontFamily="{StaticResource MaterialFontFamily}" BackgroundColor="White" TextColor="#FFBA00" FontSize="20"/>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Grid.Column="2" Text="{x:Static helpers:IconFont.Star}" FontFamily="{StaticResource MaterialFontFamily}" BackgroundColor="White" TextColor="#FFBA00" FontSize="20"/>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Grid.Column="3" Text="{x:Static helpers:IconFont.Star}" FontFamily="{StaticResource MaterialFontFamily}" BackgroundColor="White" TextColor="#FFBA00" FontSize="20"/>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Grid.Column="4" Text="{x:Static helpers:IconFont.Star}" FontFamily="{StaticResource MaterialFontFamily}" BackgroundColor="White" TextColor="#A3A3A3" FontSize="20"/>
<Button ios:VisualElement.CanBecomeFirstResponder="True" Margin="10,0,0,0" Grid.Column="5" Text="4.1 | (340)" FontFamily="{StaticResource font_normal}" BackgroundColor="{StaticResource Blue}" TextColor="White" FontSize="10.5" CornerRadius="3"/>
</Grid>
<!--URUN ACIKLAMA-->
<Grid Grid.Row="2">
<Label TextColor="#282C40" Opacity="0.38" Text="The Nike GTX shoe borrows design lines from the heritage runners the Nike React tech." FontSize="16" FontFamily="{StaticResource font_normal}"/>
</Grid>
<!--SIZE-->
<Grid Grid.Row="3" ColumnSpacing="19">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="49"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Label VerticalTextAlignment="Center" Text="Size" FontSize="16" TextColor="{StaticResource Black}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Row="1" Grid.Column="0" BackgroundColor="White" Text="5.5" FontSize="14" BorderColor="#DDDEE2" BorderWidth="1" CornerRadius="10" TextColor="{StaticResource button_size}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Row="1" Grid.Column="1" BackgroundColor="White" Text="6" FontSize="14" BorderColor="#DDDEE2" BorderWidth="1" CornerRadius="10" TextColor="{StaticResource button_size}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Row="1" Grid.Column="2" BackgroundColor="White" Text="6.5" FontSize="14" BorderColor="#DDDEE2" BorderWidth="1" CornerRadius="10" TextColor="{StaticResource button_size}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Row="1" Grid.Column="3" Text="7" FontSize="14" CornerRadius="10" BackgroundColor="{StaticResource Blue}" TextColor="{StaticResource White}" FontFamily="{StaticResource FuturaBold}"/>
<Button Grid.Row="1" Grid.Column="4" BackgroundColor="White" Text="7.5" FontSize="14" BorderColor="#DDDEE2" BorderWidth="1" CornerRadius="10" TextColor="{StaticResource button_size}" FontFamily="{StaticResource FuturaBold}"/>
</Grid>
<!--COLOUR SHOWN-->
<Grid Grid.Row="4" ColumnSpacing="19">
<Label VerticalTextAlignment="Center" Text="Colour Shown" FontSize="16" TextColor="{StaticResource Black}" FontFamily="{StaticResource FuturaBold}"/>
<Label Grid.Row="1" VerticalTextAlignment="Center" Text="White/Navy Blue" FontSize="14" TextColor="#DDDEE2" FontFamily="{StaticResource font_normal}"/>
</Grid>
</Grid>
</Frame>
</Grid>
</Grid>
</ScrollView>
view raw XamNike.xaml hosted with ❤ by GitHub
<Button Grid.Row="2" HeightRequest="70" VerticalOptions="EndAndExpand" Text="BUY NOW" BackgroundColor="#5780D9" CornerRadius="0" FontSize="17" TextColor="{StaticResource White}" FontFamily="{StaticResource FuturaBold}" />
view raw XamNike.xaml hosted with ❤ by GitHub

Eğer ben üşengecim sen bana seriden github kodlarını gönder diyorsan buyruuunn;

https://github.com/dgokhan/XamNike

ve uğraşlarımızın sonucu:)

  • Unutmayın ki proje MVVM olarak yapılmamıştır. MVVM örnekleri için başka makalelerde paylaşacağım bu sadece onpage-design’dir.
  • Projede Material Design Icons ve ffimageloading kullanılmıştır.

Leave a Comment