Xamarin.Forms Layout Challenges – Social Network App(转载) _challenge

行是知之始,知是行之成。这篇文章主要讲述Xamarin.Forms Layout Challenges – Social Network App(转载)相关的知识，希望能为你提供帮助。
Xamarin.Forms Layout Challenges – Social Network App(转载)
布局示例(一)
原文链接:http://www.kymphillpotts.com/social-network-app-layout-design-in-xamarin-forms/
GitHub链接:https://github.com/kphillpotts/XamarinFormsLayoutChallenges
【Xamarin.Forms Layout Challenges – Social Network App(转载)】Youtube视频(英文)在这里:https://www.youtube.com/watch?v=4HlLjTZQzjM
优酷土豆视频(自己录得视频，好像声音挂了.......)在这里:http://v.youku.com/v_show/id_XMjg3ODA5MzUyOA==.html?spm=a2h3j.8428770.3416059.1

文章图片

文章图片

图片:

文章图片

< ?xml version="1.0" encoding="utf-8" ?> < ContentPage x:Class="SocialNetwork.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SocialNetwork" BackgroundColor="White"> < ScrollView> < Grid ColumnSpacing="0" RowSpacing="0"> < Grid.RowDefinitions> < RowDefinition Height="AUTO" /> < RowDefinition Height="AUTO" /> < RowDefinition Height="AUTO" /> < RowDefinition Height="*" /> < RowDefinition Height="AUTO" /> < /Grid.RowDefinitions> < !--header background--> < Image Aspect="AspectFill" Source="HeaderBackground.png" /> < Image Aspect="Fill" Source="CurvedMask.png" VerticalOptions="End" /> < !--profile image--> < Image HeightRequest="100" HorizontalOptions="Center" Source="ProfilePic.png" TranslationY="50" VerticalOptions="End" WidthRequest="100" /> < !--Profile Name--> < StackLayout Grid.Row="1" Padding="0,50,0,00" HorizontalOptions="Center"> < Label HorizontalTextAlignment="Center" Style="{StaticResource ProfileNameLabel}" Text="Clementine" /> < Label Margin="0,-5" HorizontalTextAlignment="Center" Style="{StaticResource ProfileTagLabel}" Text="Hipster Coffee Drinker" /> < /StackLayout> < !--Social Stats Section--> < Grid Grid.Row="2" Margin="0,30" ColumnSpacing="0" RowSpacing="0"> < Grid.ColumnDefinitions> < ColumnDefinition Width="*" /> < ColumnDefinition Width="*" /> < ColumnDefinition Width="*" /> < /Grid.ColumnDefinitions> < StackLayout> < Label Style="{StaticResource StatsNumberLabel}" Text="33" /> < Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" /> < /StackLayout> < StackLayout Grid.Column="1"> < Label Style="{StaticResource StatsNumberLabel}" Text="94" /> < Label Style="{StaticResource StatsCaptionLabel}" Text="Following" /> < /StackLayout> < StackLayout Grid.Column="2"> < Label Style="{StaticResource StatsNumberLabel}" Text="957" /> < Label Style="{StaticResource StatsCaptionLabel}" Text="Followers" /> < /StackLayout> < /Grid> < !--profile description--> < ScrollView Grid.Row="3"> < Label Margin="20,0" HorizontalTextAlignment="Center" Style="{StaticResource MainBodyLabel}" Text="Spicy jalapeno bacon ipsum dolor amet pork loin pork sint sed occaecat swine ham capicola deserunt pork belly frankfurter magna drumstick." /> < /ScrollView> < !--follow button--> < Button Grid.Row="4" Margin="20" Style="{StaticResource FollowButton}" Text="Follow" VerticalOptions="End" /> < /Grid> < /ScrollView> < /ContentPage>

< ?xml version="1.0" encoding="utf-8" ?> < Application x:Class="SocialNetwork.App" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> < Application.Resources> < !--Application resource dictionary--> < ResourceDictionary> < !--colors--> < Color x:Key="HeaderTextColor"> #585858< /Color> < Color x:Key="BodyTextColor"> #C3C3C3< /Color> < Color x:Key="ButtonBackgroundColor"> #5992FF< /Color> < !--font families--> < OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String"> < On Platform="ios"> HelveticaNeue< /On> < On Platform="android"> sans-serif< /On> < /OnPlatform> < OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String"> < On Platform="iOS"> HelveticaNeue-Light< /On> < On Platform="Android"> sans-serif-light< /On> < /OnPlatform> < OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String"> < On Platform="iOS"> HelveticaNeue-Medium< /On> < On Platform="Android"> sans-serif-medium< /On> < /OnPlatform> < !--font sizes--> < x:Double x:Key="TitleFontSize"> 20< /x:Double> < x:Double x:Key="BodyFontSize"> 18< /x:Double> < x:Double x:Key="TagTextFontSize"> 18< /x:Double> < x:Double x:Key="StatsNumberFontSize"> 20< /x:Double> < x:Double x:Key="StatsCaptionFontSize"> 16< /x:Double> < x:Double x:Key="ButtonFontSize"> 14< /x:Double> < !--styles--> < Style x:Key="ProfileNameLabel" TargetType="Label"> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/{StaticResource HeaderTextColor}" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource MediumFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource TitleFontSize}" /> < /Style> < Style x:Key="ProfileTagLabel" TargetType="Label"> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/{StaticResource BodyTextColor}" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource RegularFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource TagTextFontSize}" /> < /Style> < Style x:Key="StatsNumberLabel" TargetType="Label"> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/{StaticResource HeaderTextColor}" /> < Setter Property="HorizontalTextAlignment" Value="https://www.songbingjia.com/android/Center" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource LightFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource StatsNumberFontSize}" /> < /Style> < Style x:Key="StatsCaptionLabel" TargetType="Label"> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/{StaticResource BodyTextColor}" /> < Setter Property="Margin" Value="https://www.songbingjia.com/android/0,-5,0,0" /> < Setter Property="HorizontalTextAlignment" Value="https://www.songbingjia.com/android/Center" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource LightFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource StatsCaptionFontSize}" /> < /Style> < Style x:Key="MainBodyLabel" TargetType="Label"> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/{StaticResource BodyTextColor}" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource RegularFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource BodyFontSize}" /> < /Style> < Style x:Key="FollowButton" TargetType="Button"> < Setter Property="BackgroundColor" Value="https://www.songbingjia.com/android/{StaticResource ButtonBackgroundColor}" /> < Setter Property="TextColor" Value="https://www.songbingjia.com/android/White" /> < Setter Property="HeightRequest" Value="https://www.songbingjia.com/android/40" /> < Setter Property="BorderRadius" Value="https://www.songbingjia.com/android/20" /> < Setter Property="FontFamily" Value="https://www.songbingjia.com/android/{StaticResource MediumFontFamily}" /> < Setter Property="FontSize" Value="https://www.songbingjia.com/android/{StaticResource ButtonFontSize}" /> < /Style> < /ResourceDictionary> < /Application.Resources> < /Application>