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

Posted 2020-09-27

　　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

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="{StaticResource HeaderTextColor}" />
                <Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource TitleFontSize}" />

            </Style>

            <Style x:Key="ProfileTagLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource TagTextFontSize}" />
            </Style>

            <Style x:Key="StatsNumberLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource StatsNumberFontSize}" />
            </Style>

            <Style x:Key="StatsCaptionLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
                <Setter Property="Margin" Value="0,-5,0,0" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource StatsCaptionFontSize}" />
            </Style>

            <Style x:Key="MainBodyLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource BodyFontSize}" />
            </Style>

            <Style x:Key="FollowButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="HeightRequest" Value="40" />
                <Setter Property="BorderRadius" Value="20" />
                <Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource ButtonFontSize}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>