XamarinのファッションUIを複製.フォーム

危ない!このブログの記事では、我々はこれに基づいてファッションアプリのUIを複製するつもりですDribbble design .
私たちのUIは2つの画面が含まれています:ファッションの詳細とカート.このイメージで指定された手順に基づいてUIを開発します.

XamarinのファッションUIを複製.フォーム
出発する前に、私たちが学ぶべき具体的なポイントを確立したいと思います.

あなたはXAMLスキルを強化し続けるでしょう.

syncfusion xamarinを実装します.フォームコントロールButton and NumericUpDown .

コードしましょう!

ステップ1:メイン画像

まず、ファッションの詳細ページの主なレイアウト構造に取り組みましょう.ここでは、DataGridコンポーネントを使用します.
DataGridを使用する方法のより良い理解のために、ブログを参照してください.
次のコード例を参照してください.

<!-- Main layout-->
<Grid RowDefinitions="*,*" >
    <!-- You must write here what is explained in steps 1.1 and 2 -->
</Grid>

さて、次のステップ1.1として、UIを構成するメインイメージを追加します.次のコード例を参照してください.

<!-- Main picture-->
<Image Grid.Row="0" VerticalOptions="Start" Source="Model01"/>
<!-- You must write here what is explained in step 2 -->

ステップ2:画像情報
フレーム情報ブロックをデザインしましょう.必要な情報を提示するために、一連のコントロールを使用します.


フレーム
詳細情報のコンテナを提示するには、フレームを使用し、マージンプロパティを使用してイメージ上のフレームをわずかに重ねる.
次のコード例を参照してください.

<!-- Picture information-->
<Frame Grid.Row="1" Background="White" Margin="0,-30,0,0" HasShadow="False" CornerRadius="50" VerticalOptions="FillAndExpand">
    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" Padding="20">
    <!-- You must write here what is explained in the next section -->
    </Grid>
</Frame>

ラベル
次に、タイトル、価格、説明、サイズなどの情報を表示するラベルを設計します.
次のコード例を参照してください.

<!-- Title -->
<Label Grid.Row="0" Grid.Column="0" Text="Professional Black 
Blazer" FontAttributes="Bold" FontSize="23"/>
<!-- Price-->
<Label Grid.Row="0" Grid.Column="1" Text="$210" FontAttributes="Bold" FontSize="23" TextColor="#fb9c2c"/>
<!-- Description-->
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" LineHeight="1.5" TextColor="Silver" Margin="0,15" Text="Lorem ipsum dolor sit amet, consecteur
adpiscing elit. Tempor ut pharetra ultrices
pulvinar nec nnisi, gravida sed matts. Portitor sit."/>
<!-- Size Title-->
<Label Grid.Row="2" Grid.Column="0" Text="Size" FontAttributes="Bold" FontSize="18"/>
<!-- You must write here what is explained in the next section -->

コレクションビュー
サイズを続行するには、リストとして表示する情報のセットがあります.このため、CollectionViewを使用して単一のデザインを作成します.私たちは、このデザインを複製して、私たちがソースに持っているように多くの記録を表すことができます.
私たちは4つのsizes - s、m、lとxlを持っているので、ボタンは自動的に4回塗られるでしょう.
次のコード例を参照してください.

<!-- Size options-->
<CollectionView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,20" HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding sizes}"
ItemsLayout="HorizontalList"
HeightRequest="60">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="0,0,20,0">
                <buttons:SfButton Text="{Binding SizeDescripcion}" WidthRequest="40" HeightRequest='40' HorizontalOptions="StartAndExpand" BackgroundColor="Transparent" BorderColor="#898989" TextColor="#898989" CornerRadius="10" BorderWidth="1"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
<!-- You must write here what is explained in the next section -->

ボタン
次に、SyncFusionを使用してカートのボタンに移動を追加Xamarin.Forms Button .
詳しくはGetting Started with Xamarin.Forms Button (SfButton) ドキュメント.
次のコード例を参照してください.

<!-- Move to cart button-->
<buttons:SfButton Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#fb9c2c" TextColor="White" FontAttributes="Bold" CornerRadius="20" HeightRequest="60" FontSize="17" Text="Move to cart" />

我々は、我々の最初のスクリーンの建設を終えました!第2画面にフォーカスしましょう

ステップ3:カート

カートページをデザインしましょう.最初の画面と同様に、グリッドコンポーネントを使用してカートページのメインレイアウトをデザインします.これに続いてメインラベルを追加します.
次のコード例を参照してください.

<!-- Main Layout-->
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="20" Margin="30,70,30,10">
    <!-- Cart main label-->
    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Cart" FontSize="20" HorizontalTextAlignment="Center" FontAttributes="Bold"/>
    <!-- You must write here what is explained in the next section -->
</Grid>

コレクションビュー
CollectionViewを使用してカートに追加された項目の一覧を表示しましょう.
この中で、カートの詳細を提示するために必要なラベルとイメージのセットを追加します.

<!-- Cart information-->
<CollectionView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Never" Margin="0,20,0,0"
ItemsSource="{Binding CartDetails}"
HeightRequest="480">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" RowSpacing="20" Padding="0,0,10,0" Margin="0,0,0,30">
                <!-- Rounded image-->
                <Frame Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Padding="0,0,10,0" WidthRequest="110" HeightRequest="110" VerticalOptions="FillAndExpand" HorizontalOptions="Start" HasShadow="False" IsClippedToBounds="True" CornerRadius="20" >
                    <Image Source="{Binding Picture}" Aspect="AspectFill" />
                </Frame>
                <!-- Article name-->
                <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontSize="18" FontAttributes="Bold"/>
                <!-- Article size-->
                <Button Grid.Row="0" Grid.Column="2" Text="{Binding Size}" HorizontalOptions="End" BorderColor="#828282" TextColor="#828282" FontSize="15" CornerRadius="6" HeightRequest="28" WidthRequest="28" BorderWidth="1" />
                <!-- Article price-->
                <Label Grid.Row="1" Grid.Column="1" Text="{Binding Price}" FontAttributes="Bold" FontSize="18" TextColor="#fb9c2c"/>
                <!-- You must write here what is explained in the next section -->
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

数値計算
さて、syncfusionXamarin.Forms NumericUpDown コントロールは、カート内の各項目のカウンタを複製し、価格の詳細を表示します.
詳しくはGetting Started with Xamarin.Forms NumericUpDown ドキュメント.
次のコード例を参照してください.

<!-- Article counter - Syncfusion's NumericUpDown control-->
<updown:SfNumericUpDown x:Name="upDown" Grid.Row="2" Grid.Column="1" BorderColor="Transparent" Margin="0,0,50,0" SpinButtonAlignment="Both" TextAlignment="Center">
    <updown:SfNumericUpDown.IncrementButtonSettings>
        <updown:UpDownButtonSettings ButtonImage="More" ButtonHeight="40" ButtonWidth="40" />
    </updown:SfNumericUpDown.IncrementButtonSettings>
    <updown:SfNumericUpDown.DecrementButtonSettings>
        <updown:UpDownButtonSettings ButtonImage="Less" ButtonHeight="40" ButtonWidth="40" />
    </updown:SfNumericUpDown.DecrementButtonSettings>
</updown:SfNumericUpDown>

ステップ4:カートの詳細

最後に、合計金額の最終的な詳細を表示するラベルとチェックアウトボタンが含まれます.
次のコード例を参照してください.

<!-- Article pricing-->
<Label Grid.Row="2" Grid.Column="0" Text="Subtotal:" TextColor="#828282" FontAttributes="Bold"/>
<Label Grid.Row="2" Grid.Column="1" Text="$280" FontSize="25" HorizontalTextAlignment="End" FontAttributes="Bold"/>

<Label Grid.Row="3" Grid.Column="0" Text="Shipping:" FontSize="20" TextColor="#828282" FontAttributes="Bold"/>
<Label Grid.Row="3" Grid.Column="1" Text="$5" FontSize="25" HorizontalTextAlignment="End" FontAttributes="Bold"/>
<!-- Divisor line-->
<Line Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Center" StrokeDashArray="1,7" X2="320" StrokeLineCap="Square" Stroke="Silver" StrokeThickness="2"/>

<Label Grid.Row="5" Grid.Column="0" Text="Total Price" TextColor="#828282" FontSize="15" FontAttributes="Bold"/>
<Label Grid.Row="6" Grid.Column="0" Text="$285" FontSize="25" FontAttributes="Bold"/>

<buttons:SfButton Grid.Row="5" Grid.RowSpan="2" Grid.Column="1" BackgroundColor="#fb9c2c" TextColor="White" FontAttributes="Bold" CornerRadius="20" HeightRequest="60" FontSize="17" Text="Checkout" WidthRequest="220"/>

そして、私たちのUIが行われます!今、あなたは我々が構築したフルスクリーンを見ることができます.

のファッションUI

Githubリファレンス
あなたは私たちの完全な例をチェックアウトすることができますreplicating a fashion app UI in Xamarin.Forms on GitHub .

結論
読書ありがとう!このブログでは、我々はどのようにSyncfusion Xamarinを使用してファッションアプリケーションのUIを複製する方法を見てきました.フォームのUIコントロール.それを試して、下記のコメントのセクションであなたのフィードバックを残す.
SyncfusionのXamarin スイートは150のUIコントロール、基本的なエディタから強力な、高度なコントロールのようなCharts , ListView , and Rich Text Editor . エリートアプリケーションを構築するためにそれらを使用する!
あなたは私たちを介して私達に連絡することができますsupport forum , support portal , or feedback portal . 我々は常にあなたを支援して満足している!

関連ブログ

Create a Wizard View in Xamarin.Forms: A Novice’s Guide

Replicating Banking Exploration UI in Xamarin