Xamarin에서 음료수와 음식 메뉴 UI를 복사합니다.형식

안녕하세요.나는 Xamarin에서 UI를 구축하는 것을 얼마나 좋아하는지 영원히 멈추지 않을 것이다.오늘의 댓글에 대해 이것이 바로 우리가 해야 할 일이다.이번에 우리는 Xamarin에서 음료 메뉴 UI를 구축할 것이다.너는 드리블 디자인에서 얻은 형상here을 볼 수 있다.
우선, 중요한 것은 우리가 최종 설계를 완성하는 데 도움이 되는 일들을 기억하는 것이다.

계층 표시줄을 만들려면 SyncfusionXamarin 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, 디자인에 사용할 색을 위한 자원을 만듭니다.이것은 우리가 깔끔하고 질서정연한 코드를 가지는 데 도움이 될 것이다.만약 우리가 색을 바꾸고 싶다면, 우리는 하나의 자원에서만 완성할 수 있다!

<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>

모든 해석의 절차를 실현한 후에 우리는 계속해서 메인 화면을 봅시다!

음료 UI 구현 방법

다음 절차에 따라 음료 UI 구성 요소를 Xamarin에 표시합니다.형식:

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: 구석 아이콘

이 절에서 중요한 것은 필요한 구성 요소를 상세하게 소개하는 것이다.

왼쪽 아래 필렛(왼쪽 아래 필렛을 얻기 위해 PancakeView를 다시 사용합니다)

카트 아이콘

카트 카운터

코드 구현

<!-- 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단계: 주요 정보

주요 정보를 복제하기 위해서는 세 개의 구성 요소가 필요합니다. 하나하나 개발할 것입니다.

제목

음료수 항목의 제목을 표시하려면 아래 코드 예시를 참조하십시오.

<!-- 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 속성을 추가하십시오.그리고 CornerRadius 속성을 이전에 추가한 값의 절반과 추가합니다.이 주제에 대한 추가 정보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을 추가합니다.Xamarin.모든 항목에 NuGet 패키지를 추가합니다.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에 다음 행을 추가합니다.응용 프로그램 방법을 불러온 cs 파일입니다.

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

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

주의: 안드로이드는 이게 필요 없어요.
그리고 실행 코드가 실행됩니다.

<!--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 를 참조하십시오.
이 목록에서 다음 세 부분을 볼 수 있습니다.

필렛이 있는 프레임워크 (본고에서 처음 설명한 SecondaryColor 리소스 사용)

메뉴 아이콘

메뉴 제목

코드 구현

<!-- 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>

이 코드 예시를 실행하면 다음과 같은 화면 캡처와 같은 출력을 얻을 수 있습니다.
저희 사용자 인터페이스가 완성되었습니다!
참조:
전체 코드 구조를 보려면 Github 저장소를 참조하십시오.
https://github.com/SyncfusionExamples/FoodDrinkUIApp

결론

나는 네가 이미 모든 것을 잘 이해하고, 네가 처음부터 스스로 하나를 창조하도록 격려하길 바란다.기억해라, 네가 연습을 많이 할수록 너의 발전은 더욱 좋아진다!
다음에 봐요!읽어주셔서 감사합니다!
Syncfusion Xamarin 기본 편집기부터 DataGrid, Charts, ListView 및 RTE와 같은 강력한 고급 컨트롤까지 150여 개의 UI 컨트롤을 제공합니다.해봐, 아래에 너의 평론을 남겨라.
저희support forum,Direct-Trac 또는feedback portal을 통해 연락하실 수 있습니다.우리는 항상 기꺼이 너를 돕는다!