Xamarinのドリンクと食品メニューのUIを複製.フォーム

危ない!私は、どれくらい私がXamarinでUIを造るのが好きかについて言うのを止めません.今日のポストのために、そして、まさに我々がするつもりです.今回はXamarinでドリンクメニューのUIを作ります.あなたが見ることができるドリブル設計から得られる形here .
まず第一に、私たちが最終的なデザインを得るのを助けるいくつかのことを心に留めておくことが重要です.

評価バーを作成するには、syncfusionを使用しますXamarin Rating コントロール.

注意してください、一歩一歩、コードが私たちを教えている.各コードブロックでは、次のようなコメントを見つけることになりますこれは、より良いコードをビルドする方法です.

ハウツーとスタイル

時には最も困難な決定を開始する方法です.開発者としてあなたの人生のいくつかの時点では、人々は、“私はちょうど起動する方法を知らない.私はレイアウトを使用する方法を知っているが、私はUIにそれらを適用する方法を知っていないかのようなものを言う聞くことができる可能性があります.”
さて、これと他の同様の理由のために、我々が我々の発展をする命令について明確であることは重要です.長い目で見れば、それは私たちの時間を節約し、私たちはより安全であり、UIを開発しながら圧倒されない感じに役立ちます.
次の画像では、デザインの分析を行い、それを説明し、開発する順序に分けます.

始めましょう

UIを開発する前に、プロジェクトの主な構造を構築するのに必要なすべての作業をしなければなりません.今すぐやりましょう!
主なレイアウト構造:これは、我々のデザインを含むレイアウトです.この場合、DataGridをメインのレイアウトとして使用します.DataGrid構造体に慣れていない場合は、this article .

<!-- Main structure-->
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,*" ColumnDefinitions="*,Auto">
   <!-- You must write here what is explained from the step number 1->
</Grid>

<script src="https://gist.github.com/LeomarisReyes/fb1dc3e2841aa162af143e05309d74ed.js"></script>

色のリソースとして:あなたのアプリケーションで.XAML、デザインで使用する色のリソースを作成しましょう.それは私たちがきれいで整理されたコードを持つのを助けるでしょう.我々は色を変更する場合は、我々はちょうど1つのリソースでそれを行う必要があります!

<Application.Resources>
         <Color x:Key="Branding">#fe9a0f</Color>
         <Color x:Key="SecundaryBranding">#fddcbe</Color>
 </Application.Resources>

<script src="https://gist.github.com/LeomarisReyes/fd47d3ab274cbd1377f21a92935032f8.js"></script>

PancakeView :このnugetパッケージをすべてのプロジェクトに追加します.
次に、XAMLに次の名前空間を追加します.

xmlns:PanCake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"

<script src="https://gist.github.com/LeomarisReyes/547c6ed59469f70a492216acd8a16486.js"></script>

すべての手順を説明した後、メイン画像を続行しましょう!

飲み物をレンダリングする方法

xamarinのドリンクUIコンポーネントをレンダリングするには、次の手順に従ってください.フォーム

ステップ1：メイン画像

ここでは、イメージを追加するだけです.それは完全に正方形でなければなりません.角が丸ければ心配しないでくださいPancakeView .
コード実装

<!-- Main image-->
                <PanCake:PancakeView CornerRadius="0,0,70,0" Grid.Row="0"
                 Grid.Column="0" Grid.ColumnSpan="2" IsClippedToBounds="true">
                       <Image Source="Dessert" VerticalOptions="Start" Aspect="AspectFill" 
                         HeightRequest="{OnPlatform Android='260', iOS='395'}"/> 
                </PanCake:PancakeView>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/e1183918b7969dd6a1f07b62a153d5fe.js"></script>

ステップ2：コーナーアイコン

この節では、必要なコンポーネントを詳細に説明することが重要です.

左下隅が丸められます(左下隅角を得るために、再びパンクショーを使います)

ショッピングカート

カウンターカウンター

コード実装

<!-- Corner icon-->
  <!-- Corner left rounded wall-->
     <PanCake:PancakeView  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" 
        Grid.RowSpan="2" HorizontalOptions="End" VerticalOptions="Start"
         WidthRequest="85" CornerRadius="0,0,50,0" HeightRequest="120">
             <Button Grid.Row="0" ImageSource="ShoppingCart"
               BackgroundColor="{StaticResource Branding}" />
     </PanCake:PancakeView>
  <!--Counter button-->
      <Button Grid.Row="0" Grid.Column="1" BackgroundColor="White"
        HorizontalOptions="End" TranslationY="42" TranslationX="-19"
        VerticalOptions="Start" TextColor="{StaticResource Branding}" FontSize="10"
        Text="2" HeightRequest="20" WidthRequest="20" CornerRadius="10"/>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/0f24e30f3b25117303ab50ccd1a41a0a.js"></script>

ステップ3：主な情報

主な情報を複製するには、3つのコンポーネントが必要です.

タイトル

ドリンクアイテムのタイトルを表示するには、次のコード例を参照してください.

<!-- Main information-->
    <!--Dessert name-->
              <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1"
               Text="Peanut Smoothie" Padding="35,20,0,0"  FontAttributes="Bold"
               FontSize="29"/>
<!-- You must add here what is explained in the next step →

<script src="https://gist.github.com/LeomarisReyes/6ed561c1f5a55eef4ded394dd5b9ea5b.js"></script>

丸ボタン

丸いボタンを得るためには、WidthreQuestとHeightRequestプロパティを同じ値で追加する必要があります.次に、CornerRadialプロパティを以前に追加した値の半分に追加します.このトピックについての詳細情報を読むことができますhere .

<!--Rounded button-->
               <PanCake:PancakeView  Grid.Row="1" Grid.Column="1"
               Grid.RowSpan="2" Padding="0,0,40,0">
                   <Button VerticalOptions="Center" ImageSource="Heart"
                   HorizontalOptions="End" BackgroundColor="{StaticResource Branding}"
                   WidthRequest="56" HeightRequest="56" CornerRadius="28"/>
               </PanCake:PancakeView>
<!-- You must add here what is explained in the next step →

<script src="https://gist.github.com/LeomarisReyes/3b458417a0caa123fe42dbf4beab712d.js"></script>

スターコンポーネント

これを作成するには、SyncFusion Xamarin格付けコントロールを使用します.
syncfusionを加えます.ザマリンすべてのプロジェクトにnugetパッケージをsfratingする.(あなたはそれについての詳細情報を読むことができますcontrol documentation .)
XAMLに次の名前空間を追加します.

xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"

<script src="https://gist.github.com/LeomarisReyes/8be59dbe544c774b3467ea2f6f009bb0.js"></script>

IOSの追加ステップとして、AppDelegateに次の行を追加します.LoadApplicationメソッドの後のCSファイル.

Syncfusion.SfRating.XForms.iOS.SfRatingRenderer.Init();

<script src="https://gist.github.com/LeomarisReyes/f00dc200fa7222fae28c881b06a160c0.js"></script>

注:あなたはAndroidのためにこれを必要としません.
次に、コードの実装を行います.

<!--Star component-->
<rating:SfRating Grid.Column="0" Grid.Row="2" x:Name="sfRating"  ItemCount="5" Value="5" ReadOnly="true" ItemSize="25" HeightRequest="35" HorizontalOptions="StartAndExpand" Margin="30,0,0,0"/>
<Label Grid.Column="1" Grid.Row="2" Text="4.8" HorizontalOptions="Start" FontAttributes="Bold" TextColor="#fe9a0f" FontSize="18" Padding="20,0,0,0"/>
<!-- You must add here what is explained in the next step →

<script src="https://gist.github.com/LeomarisReyes/9fbd90f021bcc6590b1060d1e5f9c971.js"></script>

ステップ4：説明

この部分では、説明ラベルを追加します.
コード実装

<!-- Description -->
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" FontSize="20" Margin="35,5,30,0" Text="Creamy peanut butter and frozen and dark chocolate with some cacao all mixed with frozen, berries, served with cherry on top." TextColor="Silver"/>
<!-- You must add here what is explained in the next step →

<script src="https://gist.github.com/LeomarisReyes/cea59b3be011b8c4800070e9e29460a5.js"></script>

ステップ5：メニュー

今、私たちは本当に愛しているコントロールを使用するつもりです!CollectionView垂直方向と水平方向の両方のモードで情報の一覧を表示することができます.水平モードを使用しています.このコントロールについてもっと知りたい場合はXamarin blog .
このリストでは、次の3つのコンポーネントを確認できます

角を丸めたフレーム(この記事の先頭で宣言された2番目の色のリソースを使用しています)

メニューアイコン

メニュータイトル

コード実装

<!-- Menu-->
<CollectionView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
                                ItemsSource="{Binding menu}"
                                Margin="35,20,30,20"
                                HeightRequest="90"
                                VerticalOptions="FillAndExpand"
                                HorizontalScrollBarVisibility="Never"
                                ItemsLayout="HorizontalList">
                             <CollectionView.ItemTemplate>
                                   <DataTemplate>
                                       <StackLayout Padding="0,0,15,0">
                                           <Frame HeightRequest="46" WidthRequest="35"
                                            HasShadow="False" BackgroundColor="{StaticResource  
                                            SecundaryBranding}" CornerRadius="23">
                                               <Grid RowDefinitions="Auto,Auto"
                                                VerticalOptions="StartAndExpand">
                                                    <Image Grid.Row="0" HeightRequest="{OnPlatform 
                                                      Android='16',iOS='30'}" Source="{Binding Icon}"/>
                                                    <Label Grid.Row="1" Text="{Binding Name}"
                                                     FontSize="10" HorizontalTextAlignment="Center"/>
                                               </Grid>
                                           </Frame>
                                       </StackLayout>
                                   </DataTemplate>
                            </CollectionView.ItemTemplate>
                </CollectionView>
<!-- You must add here what is explained in the next step →

<script src="https://gist.github.com/LeomarisReyes/8deea0dfab91a44099f576af37ce30b6.js"></script>

ステップ6 :カート情報

最後に、カートの情報パーツを作りましょう.このために、我々は価格と下部にカートボタンを追加するとラベルを追加する必要があります.
注:カートに追加するボタンは左上の角を持っています.これにより、このコードでPancakeViewも参照されます.

コード実装

<!-- Cart information-->
 <!-- Price-->
 <Label Grid.Row="5" Grid.Column="0" Text="$12.00" Padding="45,0,0,25" FontSize="20" FontAttributes="Bold" VerticalOptions="End"/>
            <!--Add to Cart button-->
                <PanCake:PancakeView Grid.Row="5" Grid.Column="1"
                 CornerRadius="50,0,0,0" IsClippedToBounds="true" HeightRequest="75"
                 VerticalOptions="End">
                     <Button BackgroundColor="{StaticResource Branding}"
                      TextColor="White" Text="Add to cart" FontSize="22" 
                      FontAttributes="Bold" WidthRequest="220"/>
                </PanCake:PancakeView> 

<script src="https://gist.github.com/LeomarisReyes/33feeab9939a7ca6f94c942abde5eb61.js"></script>

これらのコード例を実行した後、次のスクリーンショットのような出力を取得します.
そして、私たちのUIが行われます!
参照:
完全なコード構造を見るには、このgithubリポジトリを参照してください.
https://github.com/SyncfusionExamples/FoodDrinkUIApp

結論

私は、あなたがよくすべてを理解して、あなたがゼロから自分で一人をつくることを奨励されることを望みます.より多くのあなたが練習を覚えて、あなたが開発するより良い!
また会いましょう!読書ありがとう!
Syncfusion Xamarin DataGrid、チャート、ListView、RTEのような強力な、高度なコントロールに基本的なエディタから150のUIコントロールを介して提供しています.それらを試してみて、以下のコメントを残してください.
また、我々を介してお問い合わせすることができますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!