2017-09-05 105 views
0

我開發一個Xamarin.Forms應用,我正在尋找一個圖標讓我顯示如果事件是免費或不 ...Xamarin.Forms:如何創建帶有標籤和字體圖標的「禁止」標誌?

,因爲我沒有發現任何東西在FontAwesome,Ionicons或Material等常用字體圖標中,我決定創建一個「自定義」圖標,標籤爲

對於這一點,我選擇:

  • 的付費事件:在瘦一圈
  • 的「€」象徵自由的事:「€」符號用反斜槓禁止(在瘦一圈

在第一種情況下, 「\」),沒有問題:

<Grid Margin="1,0" 
     ColumnSpacing="0" 
     RowSpacing="0" 
     HeightRequest="14" 
     > 
    <Label 
     Text="{ x:Static local:FontAwesomeFont.CircleThin }" 
     Style="{ StaticResource FontIcon }" 
     HorizontalTextAlignment="Center" 
     VerticalTextAlignment="Center" 
     Opacity="1" 
     FontSize="14" 
     TextColor="{ DynamicResource BaseTextColor }" /> 
    <Label 
     Text="{ x:Static local:FontAwesomeFont.Euro }" 
     FontSize="8" 
     Style="{ StaticResource FontIcon }" 
     HorizontalTextAlignment="Center"                     
     VerticalTextAlignment="Center" 
     TextColor="{ DynamicResource BaseTextColor }" /> 
</Grid> 

但它更DIFF icult在第二種情況下,因爲有渲染iOS和Android之間的差異:

<Grid Margin="1,0" 
     ColumnSpacing="0" 
     RowSpacing="0" 
     HeightRequest="14" 
     > 
    <Label 
     Text="{ x:Static local:FontAwesomeFont.CircleThin }" 
     Style="{ StaticResource FontIcon }" 
     HorizontalTextAlignment="Center" 
     VerticalTextAlignment="Center" 
     Opacity="1" 
     FontSize="14" 
     TextColor="{ DynamicResource BaseTextColor }" /> 
    <!-- Backslash -->    
    <Label 
     Text="\" 
     Style="{ StaticResource FontIcon }" 
     HorizontalTextAlignment="Center" 
     VerticalTextAlignment="Center" 
     Rotation="-22" 
     TextColor="{ DynamicResource BaseTextColor }" 
     FontAttributes="Bold" 
     > 
     <Label.FontSize> 
      <artina:OnOrientationDouble> 
       <OnPlatform x:TypeArguments="x:Double"> 
        <On Platform="iOS">13</On> 
        <On Platform="Android">12</On> 
       </OnPlatform> 
     </Label.FontSize> 
     <Label.Margin> 
      <OnPlatform x:TypeArguments="Thickness"> 
       <On Platform="Android">0,0,0,0.5</On> 
       <On Platform="iOS">0.5,0,0,1.5</On> 
      </OnPlatform> 
     </Label.Margin> 
    </Label>     
    <Label 
     Text="{ x:Static local:FontAwesomeFont.Euro }" 
     FontSize="8" 
     Style="{ StaticResource FontIcon }" 
     HorizontalTextAlignment="Center"                     
     VerticalTextAlignment="Center" 
     TextColor="{ DynamicResource BaseTextColor }" /> 
</Grid> 

有了這個,我得到的結果是正確的,但並不完美:

  • 在Android上:

Android screenshot

( 「Gratuit」 表示免費圖標)

  • 在iOS上:

iOS screenshot

( 「Gratuit」 代表無圖標)

另外,如果我需要使用較高的尺寸爲這個圖標,我必須重新定義反斜槓的每個參數。

有沒有更簡單的方法來實現這個目標?

回答

0

該解決方案看起來很容易出錯,並且可能對系統來說太重了。這是很多的佈局和渲染這樣一個小圖標的調用。你應該怎麼做,是用SkiaSharp創建一個自定義控件,並自己處理繪圖。 Xamarin的Here'a a great article,概述瞭如何開始使用圖書館。

此外,這裏就是你需要實現的圖標(畫一個圓圈,文字和線)涵蓋了額外的指南的集合:

Using SkiaSharp in Xamarin.Forms

相關問題