這份筆記將會記錄如何在新建專案的時候,配合 Grial UIKit 這個 Xamarn.Forms 的 UI 設計支援套件,讓 Xamarin.Forms 的開發者可以快速的開發出漂亮、專案與實用的 Xamarin.Forms 應用程式。
由於要使用 Grial UI Kit 套件,需要做許多初始設定工作與設定的動作,因此,請參考這份文件就可以順利做出。
建立 Xamarin.Forms 專案
- 開啟 Visual Studio 2015,點選功能表
檔案
>新增
>專案
,在新增專案
對話窗,點選Prism
>Prism Unity App (Forms)
,在下方名稱欄位輸入XFGrial
- 在
Prism for Xamarin.Forms - Project Wizard
對話窗,點選Android
與iOS
,最後點選Create
按鈕。您只能夠選擇 Android & iOS 專案,這是因為Grial UI Kit
僅僅支援這兩個平台另外,Grial UI Kit 將會針對 Android 5.0+ (API Level 21) 版本進行最佳化 和 iOS 8.0+不過, Android 4.2.2+ (API Level 17+) 也是有支援的
Grial UI Kit 初始化
目錄建立
請依序在底下專案建立新的資料夾
- 核心 PCL 專案HelpersModels
- Android 專案Renderers
- iOS 專案Renderers
加入參考組件
請將您購買取得的 Grial UI Kit 產品內所附的組件,依序加入到底下專案內
核心 PCL 專案
UXdivers.Artina.Grial.dll
Android 專案
UXdivers.Artina.Grial.dll
UXdivers.Artina.Grial.Droid.dll
iOS 專案
UXdivers.Artina.Grial.dll
UXdivers.Artina.Grial.iOS.dll
主題和品牌 Theme / branding
底下的步驟,將會進行核心PCL與原生專案的主題佈景樣式的系統設定
核心PCL專案
建立 ExportedColors 類別
滑鼠右擊 PCL核心專案,選取
加入
> 新增項目
在
加入新項目
對話窗內,點選 Visual C#
> 類別
,在底下名稱欄位中,輸入 ExportedColors
,最後點選 新增
按鈕。
在新產生的檔案內,將其
ExportedColors
類別定義,使用底下程式碼取代 public static class ExportedColors
{
public static readonly Color AccentColor = Color.FromRgba(218, 18, 95, 255);
public static readonly Color InverseTextColor = Color.FromRgba(255, 255, 255, 255);
}
加入全域樣式宣告
在 核心PCL專案內,開啟
App.xaml
檔案,請將這個檔案的標記宣告內容,使用底下 XAML 語言取代。不過,請記得要更先x:Class="XFGrial.App"
命名空間定義成為您實際建立專案的命名空間
<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
x:Class="XFGrial.App"
xmlns:mark="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:converters="clr-namespace:UXDivers.Artina.Grial;assembly=UXDivers.Artina.Grial">
<Application.Resources>
<!-- http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/styles/ -->
<ResourceDictionary>
<!--
EXPORTED COLORS
Everytime you change any of the exported colors
you MUST compile (Right click on "Colors.tt" > Tools > Process T4 Templates)
to see your changes on your App
-->
<!-- Export AccentColor -->
<!--<Color x:Key="AccentColor">#FFDA1200</Color>-->
<Color x:Key="AccentColor">#FFDA125F</Color>
<!-- Export InverseTextColor -->
<Color x:Key="InverseTextColor">White</Color>
<!-- COLORS -->
<Color x:Key="BrandColor">#ad1457</Color>
<Color x:Key="BrandColorLight">#ec407a</Color>
<Color x:Key="BrandColorLighter">#f06292</Color>
<Color x:Key="BrandColorDark">#c2185b</Color>
<Color x:Key="BrandColorDarker">#ad1457</Color>
<!-- COMPLEMENT COLORS -->
<Color x:Key="ComplementColor">#384f63</Color>
<Color x:Key="ComplementColorDark">#272f36</Color>
<Color x:Key="ComplementColorDarker">#1f252a</Color>
<Color x:Key="TranslucidBlack">#44000000</Color>
<Color x:Key="TranslucidWhite">#22ffffff</Color>
<!-- INDICATOR COLORS -->
<Color x:Key="OkColor">#22c064</Color>
<Color x:Key="ErrorColor">Red</Color>
<Color x:Key="WarningColor">#ffc107</Color>
<Color x:Key="SecondaryColor">#54B9ED</Color>
<Color x:Key="FacebookColor">#3e549c</Color>
<Color x:Key="ComplentColor">#FF009966</Color>
<Color x:Key="SaveButtonColor">#22c064</Color>
<Color x:Key="DeleteButtonColor">#D50000</Color>
<Color x:Key="LabelButtonColor">#ffffff</Color>
<Color x:Key="PlaceholderColor">#22ffffff</Color>
<Color x:Key="PlaceholderColorEntry">#77FFFFFF</Color>
<Color x:Key="MainMenuBackgroundColor">#283441</Color>
<Color x:Key="MainMenuSeparatorColor">#253642</Color>
<Color x:Key="ListViewSeparatorColor">#77CCCCCC</Color>
<Color x:Key="LightBorderColor">#FFF</Color>
<Color x:Key="WalkthroughStepBackgroundColor1">#1CBCB4</Color>
<Color x:Key="WalkthroughStepIconColor1">#FFF</Color>
<Color x:Key="ArtinaEntryBorderBotomColor">#2C2F35</Color>
<Color x:Key="CategoryColor1">#FF0000</Color>
<Color x:Key="ListViewItemTextColor">#FF212121</Color>
<!-- BASE COLORS AND UNITS VALUES -->
<Color x:Key="BaseTextColor" >#37474f</Color>
<x:Double x:Key="BaseFontSize">16</x:Double>
<x:Double x:Key="BaseButtonHeight">44</x:Double>
<x:Double x:Key="BaseButtonBorderRadius">22</x:Double>
<x:Double x:Key="MainMenuLabelFontsize">18</x:Double>
<x:Double x:Key="MainMenuIconFontsize">20</x:Double>
<x:Double x:Key="MainMenuHeaderFontsize">18</x:Double>
<x:Double x:Key="MainMenuLabelTranslationX">10</x:Double>
<x:Double x:Key="MainMenuChevronRightFontsize">24</x:Double>
<x:Double x:Key="MainMenuIconWidthRequest">22</x:Double>
<x:String x:Key="AboutPageURL">http://www.uxdivers.com</x:String>
<x:String x:Key="AboutPageTitle">Made by UXDivers</x:String>
<!-- STATIC IMAGES -->
<FileImageSource x:Key="HamburguerIcon" File="hamburguer_icon.png" />
<FileImageSource x:Key="WelcomeBackgroundImage" File="welcome_bg.jpg" />
<FileImageSource x:Key="BrandImage" File="logo.png" />
<FileImageSource x:Key="LoginBackgroundImage" File="signup_bg.jpg" />
<FileImageSource x:Key="SignUpBackgroundImage" File="signup_bg.jpg" />
<FileImageSource x:Key="PasswordRecoveryBackgroundImage" File="signup_bg.jpg" />
<FileImageSource x:Key="WalkthroughStepBackgroundImage0" File="walkthrough_bg_0.png" />
<FileImageSource x:Key="WalkthroughStepBackgroundImage1" File="walkthrough_bg_1.png" />
<FileImageSource x:Key="WalkthroughStepBackgroundImage2" File="walkthrough_bg_2.png" />
<FileImageSource x:Key="WalkthroughStepGenericPhoneBackgroundImage" File="walkthrough_generic_phone_bg" />
<FileImageSource x:Key="ThemeAvatarSample0Image" File="user_profile_0.jpg" />
<FileImageSource x:Key="ThemeAvatarSample1Image" File="user_profile_1.jpg" />
<FileImageSource x:Key="SocialHeaderBackgroundImage0" File="social_header_bg_0.jpg" />
<FileImageSource x:Key="SocialHeaderBackgroundImage1" File="social_header_bg_1.jpg" />
<!-- IMPLICIT STYLES -->
<Style TargetType="Frame">
<Setter Property="OutlineColor" Value="{StaticResource BrandColor}" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource BaseTextColor}" />
</Style>
<Style TargetType="ActivityIndicator">
<Setter Property="Color" Value="{StaticResource AccentColor}" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="White" />
</Style>
<Style TargetType="ContentView">
<Setter Property="BackgroundColor" Value="White" />
</Style>
<Style TargetType="ScrollView">
<Setter Property="BackgroundColor" Value="Transparent" />
</Style>
<Style TargetType="Label">
<Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
<Setter Property="TextColor" Value="{StaticResource BaseTextColor}" />
</Style>
<Style TargetType="ListView">
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="SeparatorColor" Value="{StaticResource ListViewSeparatorColor}" />
<Setter Property="SeparatorVisibility" Value="Default" />
</Style>
<Style TargetType="TableView">
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="artina:TableViewProperties.HeaderFooterTextColor" Value="{StaticResource AccentColor}"/>
</Style>
<Style TargetType="ProgressBar">
<Setter Property="artina:ProgressBarProperties.TintColor" Value="{StaticResource AccentColor}"/>
</Style>
<Style TargetType="Slider">
<Setter Property="artina:SliderProperties.TintColor" Value="{StaticResource AccentColor}"/>
</Style>
<Style TargetType="TextCell">
<Setter Property="TextColor" Value="{ StaticResource AccentColor }" />
</Style>
<Style TargetType="Button">
<Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
<Setter Property="BorderRadius" Value="22" />
<Setter Property="BorderWidth" Value="0" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
<!--
Mimic Android Buttons background color
If no background color is set,
the button won't render with height as specified here
-->
<Setter Property="BackgroundColor">
<Setter.Value>
<OnPlatform x:TypeArguments="Color" Android="#d6d6d6" />
</Setter.Value>
</Setter>
</Style>
<Style TargetType="artina:Button">
<Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
<Setter Property="BorderRadius" Value="22" />
<Setter Property="BorderWidth" Value="0" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
<!--
Mimic Android Buttons background color
If no background color is set,
the button won't render with height as specified here
-->
<Setter Property="BackgroundColor">
<Setter.Value>
<OnPlatform x:TypeArguments="Color" Android="#d6d6d6" />
</Setter.Value>
</Setter>
</Style>
<!-- BASE STYLES -->
<Style x:Key="FontIcon" TargetType="Label">
<Setter Property="FontFamily" Value="{x:Static artina:FontAwesome.FontName}" />
</Style>
<Style x:Key="RoundedButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
<Setter Property="BorderRadius" Value="22" />
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<Style x:Key="Horizontal1ptLineStyle" TargetType="BoxView">
<Setter Property="HeightRequest" Value="1"/>
<Setter Property="BackgroundColor" Value="#eee" />
</Style>
<Style x:Key="StatusLabelStyle" TargetType="Label" >
<Setter Property="Text" Value=" AVAILABLE " />
<Setter Property="VerticalOptions" Value="End" />
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<!-- SPECIFIC STYLES -->
<Style x:Key="IconCloseLabelStyle" TargetType="Label" BasedOn="{StaticResource FontIcon}">
<Setter Property="FontSize" Value="20"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="VerticalOptions" Value="FillAndExpand"/>
<Setter Property="Text" Value=""/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="VerticalTextAlignment" Value="Center"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="30"/>
<Setter Property="WidthRequest" Value="30"/>
</Style>
<Style x:Key="IconBackLabelStyle" TargetType="Label" BasedOn="{StaticResource IconCloseLabelStyle}">
<Setter Property="Text" Value=""/>
</Style>
<!-- COMMON -->
<Style x:Key="AvailableStatusStyle" TargetType="Label" BasedOn="{StaticResource StatusLabelStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource OkColor}"/>
<Setter Property="TextColor" Value="White"/>
</Style>
<!-- MAIN MENU STYLES -->
<Style x:Key="MainMenuStyle" TargetType="ContentPage" >
<Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
</Style>
<Style x:Key="MainMenuListViewStyle" TargetType="ListView">
<Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
<Setter Property="SeparatorVisibility" Value="Default" />
<Setter Property="SeparatorColor" Value="{StaticResource MainMenuSeparatorColor}" />
<Setter Property="RowHeight" Value="44"/>
</Style>
<Style x:Key="MainMenuIconStyle" TargetType="Label" >
<Setter Property="TextColor" Value="White" />
<Setter Property="FontFamily" Value="{x:Static artina:FontAwesome.FontName}" />
<Setter Property="FontSize" Value="{StaticResource MainMenuIconFontsize }"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
</Style>
<Style x:Key="MainMenuHeaderStyle" TargetType="Label" >
<Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
<Setter Property="TextColor" Value="White" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<Setter Property="FontSize" Value="{StaticResource MainMenuHeaderFontsize }"/>
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="MainMenu_Label_Style" TargetType="Label" >
<Setter Property="TextColor" Value="White" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<Setter Property="TranslationX" Value="{StaticResource MainMenuLabelTranslationX}"/>
<Setter Property="FontSize" Value="{StaticResource MainMenuLabelFontsize}"/>
<Setter Property="HorizontalOptions" Value="StartAndExpand"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
</Style>
<Style x:Key="MainMenu_Right_Chevron_Style" TargetType="Label" BasedOn="{StaticResource FontIcon}">
<Setter Property="TextColor" Value="White" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<Setter Property="FontSize" Value="{StaticResource MainMenuChevronRightFontsize}"/>
<Setter Property="HorizontalOptions" Value="End"/>
</Style>
<!-- LOGINS STYLES -->
<Style x:Key="PrimaryActionButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource AccentColor}"/>
<Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<Style x:Key="SecondaryActionButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource ComplementColor}"/>
<Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<Style x:Key="TransparentButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<!-- ENTRY FIELDS -->
<Style x:Key="ArtinaEntryStyle" TargetType="Entry">
<Setter Property="TextColor" Value="White" />
<Setter Property="artina:EntryProperties.BorderStyle" Value="BottomLine"/>
<Setter Property="artina:EntryProperties.BorderWidth" Value="1"/>
<Style.Triggers>
<Trigger TargetType="Entry"
Property="IsFocused" Value="True">
<Setter Property="artina:EntryProperties.BorderColor" Value="{StaticResource AccentColor}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="LoginEntryStyle" TargetType="Entry">
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Transparent"/>
</Style>
<Style x:Key="ArtinaLoginEntryStyle" TargetType="Entry" BasedOn="{ StaticResource LoginEntryStyle }" >
<Setter Property="artina:EntryProperties.BorderStyle" Value="BottomLine"/>
<Setter Property="artina:EntryProperties.BorderColor" Value="{ StaticResource TranslucidWhite }"/>
<Setter Property="artina:EntryProperties.PlaceholderColor" Value="{ StaticResource PlaceholderColorEntry }"/>
<Style.Triggers>
<Trigger TargetType="Entry"
Property="IsFocused" Value="True">
<Setter Property="artina:EntryProperties.BorderColor" Value="{ StaticResource AccentColor }" />
</Trigger>
</Style.Triggers>
</Style>
<!-- VALIDATIONS -->
<Style x:Key="ValidationEntryErrorStyle" TargetType="Label" >
<Setter Property="BackgroundColor" Value="{ StaticResource ErrorColor }" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="12" />
</Style>
<Style x:Key="ValidationEntryWarningStyle" TargetType="Label" >
<Setter Property="BackgroundColor" Value="{ StaticResource WarningColor }" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="12" />
</Style>
<!-- WALKTHROUGH -->
<Style x:Key="WalkthroughStepBaseStyle" TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="{StaticResource BrandColor}"/>
</Style>
<Style x:Key="WalkthroughStepStyle" TargetType="ContentPage" BasedOn="{StaticResource WalkthroughStepBaseStyle}">
<Setter Property="Opacity" Value="1"/>
</Style>
<Style x:Key="WalkthroughStepIconStyle" TargetType="Label" BasedOn="{StaticResource FontIcon}">
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="FontSize" Value="72"/>
<Setter Property="TextColor" Value="White" />
</Style>
<!-- SETTINGS -->
<Style x:Key="SaveButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource SaveButtonColor}"/>
<Setter Property="TextColor" Value="#FFF"/>
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<Style x:Key="DeleteButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource DeleteButtonColor}"/>
<Setter Property="TextColor" Value="#FFF"/>
<Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
</Style>
<!-- SOCIAL -->
<Style x:Key="SocialHeaderStyle" TargetType="Label" >
<Setter Property="TranslationX" Value="20"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="HeightRequest" Value="46" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="#FF1C1C1C"/>
</Style>
<Style x:Key="SocialHeaderStyleBorderBottomStyle" TargetType="Label" >
<Setter Property="HeightRequest" Value="1" />
<Setter Property="BackgroundColor" Value="#FFAAAAAA"/>
</Style>
<Style x:Key="ToolbarStyle" TargetType="Grid">
<Setter Property="HeightRequest" Value="60"/>
<Setter Property="ColumnSpacing" Value="0"/>
</Style>
<!-- BRAND BLOCK -->
<Style x:Key="BrandContainerStyle" TargetType="StackLayout" >
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="VerticalOptions" Value="Start"/>
</Style>
<Style x:Key="BrandNameStyle" TargetType="Label" >
<Setter Property="FontSize" Value="24"/>
<Setter Property="TextColor" Value="White" />
</Style>
<Style x:Key="BrandNameOrnamentStyle" TargetType="BoxView" >
<Setter Property="HeightRequest" Value="4"/>
<Setter Property="VerticalOptions" Value="End"/>
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="WidthRequest" Value="40" />
<Setter Property="BackgroundColor" Value="{StaticResource BrandColor}" />
</Style>
<!-- LAYOUT HELPERS -->
<Style x:Key="Spacer" TargetType="BoxView">
<Setter Property="BackgroundColor" Value="Transparent"/>
</Style>
<Style x:Key="SpacerThemeShowCaseStyle" TargetType="BoxView" BasedOn="{ StaticResource Spacer }">
<Setter Property="HeightRequest" Value="20"/>
</Style>
<Style x:Key="HorizontalRuleStyle" TargetType="BoxView">
<Setter Property="BackgroundColor" Value="{StaticResource AccentColor}"/>
<Setter Property="HeightRequest" Value="1"/>
</Style>
<Style x:Key="LoginPadding" TargetType="StackLayout">
<Setter Property="Padding" Value="40,0,40,0"/>
</Style>
<!-- THEME -->
<Style TargetType="artina:CircleImage">
<Setter Property="WidthRequest" Value="50" />
<Setter Property="HeightRequest" Value="50" />
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="BorderColor" Value="{StaticResource AccentColor}"/>
</Style>
<Style x:Key="Avatar" TargetType="artina:CircleImage" >
<Setter Property="WidthRequest" Value="50" />
<Setter Property="HeightRequest" Value="50" />
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="BorderColor" Value="{StaticResource AccentColor}"/>
</Style>
<Style x:Key="AvatarXSmall" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
<Setter Property="WidthRequest" Value="36" />
<Setter Property="HeightRequest" Value="36" />
<Setter Property="BorderThickness" Value="2"/>
</Style>
<Style x:Key="AvatarSmall" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
<Setter Property="WidthRequest" Value="44" />
<Setter Property="HeightRequest" Value="44" />
</Style>
<Style x:Key="AvatarLarge" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
<Setter Property="WidthRequest" Value="110" />
<Setter Property="HeightRequest" Value="110" />
</Style>
<Style x:Key="FontIconItemDemo" TargetType="Label" BasedOn="{ StaticResource FontIcon }">
<Setter Property="TextColor" Value="{ StaticResource AccentColor }" />
<Setter Property="FontSize" Value="24" />
<Setter Property="FontFamily" Value="{ x:Static artina:FontAwesome.FontName }" />
</Style>
<!-- ECOMMERCE -->
<Style x:Key="EcommerceProductGridBannerStyle" TargetType="StackLayout">
<Setter Property="HeightRequest" Value="120" />
<Setter Property="BackgroundColor" Value="{StaticResource BrandColorDarker}" />
</Style>
<!-- CUSTOM NAVBAR -->
<Style x:Key="CustomNavBarStyle" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double"
Android="56"
iOS="66" />
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</prism:PrismApplication>
Android 專案
更新資源檔案定義
您需要從 Grial.droid
Resource
資料夾中,複製檔案到您的 Android 專案,並且修改 MainActivity.cs
檔案,使您的 Android 使用這些檔案的樣式資源定義。
首先,您需要從 Grial.droid
Resource
> values
與 Resource
> values-v21
資料夾內,複製Style.xml
檔案到您的 Android 專案內的相同資料夾中。您也可將複製整理好的Android Resources
目錄下的所有資料夾內容,從檔案總管內,拖拉這些檔案到 Visual Studio 方案總管內的 Android 專案內的Resources
資料夾內。不過,請特別注意,在此之前,您需要先將剛剛建立好的 Android 專案內的Resource
資料夾內的layout
/values
/values-v21
資料夾內的所有檔案先刪除掉。完成之後,您的 Android 專案會呈現如下內容
新增 SplashActivity
這裡要產生 Android 專案的 開機畫面。
滑鼠右擊 Android 專案,選取
加入
> 新增項目
在
加入新項目
對話窗內,點選 Visual C#
> Class
,在底下名稱欄位中,輸入 SplashActivity
,最後點選 新增
按鈕。
在新產生的檔案內,將其
SplashActivity
類別定義,使用底下程式碼取代 [Activity(
Label = "XF Grial",
Theme = "@style/Theme.Splash",
Icon = "@drawable/icon",
MainLauncher = true,
NoHistory = true)
]
public class SplashActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
StartActivity(typeof(MainActivity));
}
}
修正 MainActivity 的宣告
底下為使用 Prism 專案樣板所產生的 Android 專案的
MainActivity.cs
檔案內容 [Activity(Label = "XFGrial", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.tabs;
ToolbarResource = Resource.Layout.toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App(new AndroidInitializer()));
}
}
請修正其
MainActivity
類別上方的屬性宣告,如下列程式碼所示 [Activity(
Label = "XF Grial",
Theme = "@style/AppTheme",
Icon = "@android:color/transparent",
MainLauncher = false)
]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.tabs;
ToolbarResource = Resource.Layout.toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App(new AndroidInitializer()));
}
}
修正 AndroidManifest.xml
滑鼠雙擊 核心PCL專案 >
Propertyies
> AndroidManifest.xml
請將這個檔案內的
android:theme="@style/MyTheme"
宣告移除,如下列所示<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto">
<uses-sdk android:minSdkVersion="23" android:targetSdkVersion="23" />
<application android:label="XFGrial.Droid" ></application>
</manifest>
iOS 專案
新增 Appearance
- 您可將複製整理好的
iOS Resources
目錄下的所有檔案,從檔案總管內,拖拉這些檔案到 Visual Studio 方案總管內的 iOS 專案內的Resources
資料夾內。 - 滑鼠右擊 iOS 專案,選取
加入
>新增項目
,接著在加入新項目
對話窗中,選取Apple
>Class
,在底下名稱欄位中輸入Appearance
- 在剛剛產生的
Appearance.cs
檔案的Appearance
類別,使用底下程式碼替換掉。
public static class Appearance
{
public static UIColor AccentColor = ExportedColors.AccentColor.ToUIColor();
public static UIColor TextColor = ExportedColors.InverseTextColor.ToUIColor();
public static void Configure()
{
UINavigationBar.Appearance.BarTintColor = AccentColor;
UINavigationBar.Appearance.TintColor = TextColor;
UINavigationBar.Appearance.TitleTextAttributes = new UIStringAttributes {
ForegroundColor = TextColor,
};
UIProgressView.Appearance.ProgressTintColor = AccentColor;
UISlider.Appearance.MinimumTrackTintColor = AccentColor;
UISlider.Appearance.MaximumTrackTintColor = AccentColor;
UISlider.Appearance.ThumbTintColor = AccentColor;
UISwitch.Appearance.OnTintColor = AccentColor;
UITableViewHeaderFooterView.Appearance.TintColor = AccentColor;
UITableView.Appearance.SectionIndexBackgroundColor = AccentColor;
UITableView.Appearance.SeparatorColor = AccentColor;
UITabBar.Appearance.TintColor = AccentColor;
UITextField.Appearance.TintColor = AccentColor;
UIButton.Appearance.TintColor = AccentColor;
UIButton.Appearance.SetTitleColor (AccentColor, UIControlState.Normal);
}
}
修正 AppDelegate
在 iOS 專案內,打開 AppDelegate.cs 檔案,修改
FinishedLaunching
方法,如下所示;也就是加入這行Appearance.Configure();
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
var workaround = typeof(UXDivers.Artina.Shared.CircleImage);
Appearance.Configure();
LoadApplication(new App(new iOSInitializer()));
return base.FinishedLaunching(app, options);
}
Font Awesome 圖示字型黨安裝與設定
請將 Font Awesome 圖示字型檔案複製到您的原生專案內。
Android 專案
請使用檔案總管,在目錄
Font Awesome
下找到 fontawesome-webfont.ttf
檔案,拖拉這個檔案到 Android 專案內的 Assets
資料夾。
使用滑鼠右擊 Android 專案 >
Renderers
資料夾,點選 加入
> 新增項目
在
加入新項目
對話窗中,選擇 Visual C#
> Class
,在底下名稱欄位,輸入CustomFontLabelRenderer
,最後點選 新增
按鈕。
將底下程式碼替換到剛剛產生的
CustomFontLabelRendere
類別定義 public class CustomFontLabelRenderer : ArtinaCustomFontLabelRenderer
{
private static readonly string[] CustomFontFamily = new [] { "FontAwesome" };
private static readonly Tuple<FontAttributes, string>[][] CustomFontFamilyData = new [] {
new [] {
new Tuple<FontAttributes, string>(FontAttributes.None, "fontawesome-webfont.ttf"),
new Tuple<FontAttributes, string>(FontAttributes.Bold, "fontawesome-webfont.ttf"),
new Tuple<FontAttributes, string>(FontAttributes.Italic, "fontawesome-webfont.ttf"),
},
};
protected override bool CheckIfCustomFont (string fontFamily, FontAttributes attributes, out string fontFileName)
{
for (int i = 0; i < CustomFontFamily.Length; i++) {
if (string.Equals(fontFamily, CustomFontFamily[i], StringComparison.InvariantCulture)){
var fontFamilyData = CustomFontFamilyData[i];
for (int j = 0; j < fontFamilyData.Length; j++) {
var data = fontFamilyData[j];
if (data.Item1 == attributes){
fontFileName = data.Item2;
return true;
}
}
break;
}
}
fontFileName = null;
return false;
}
}
iOS 專案
請使用檔案總管,在目錄
Font Awesome
下找到 fontawesome-webfont.ttf
檔案,拖拉這個檔案到 Android 專案內的 Resources
資料夾。
滑鼠右擊
info.plist
檔案,選取 開啟方式
,選擇 XML(文字)編輯器
,最後,點選 確定
按鈕
在這個檔案的最後面,加入裡下XML碼
<key>UIAppFonts</key>
<array>
<string>fontawesome-webfont.ttf</string>
</array>
自訂渲染器 Custom Renderers
Grial 提供許多自訂渲染器(Renderer),您需要在每個原生平台的
AssemblyInfo.cs
檔案內來進行宣告,這樣才可以在這個專案內生效。Android 專案
在 Android 專案內的 Properties 節點下,打開
AssemblyInfo.cs
檔案
在最後面加入底下程式碼
請將這個XFGrial.Droid.Renderers.CustomFontLabelRenderer
定義之前面的命名空間,更換為您當時專案使用的命名空間。
// Custom renderer definition.
[assembly: ExportRenderer(typeof(Entry), typeof(UXDivers.Artina.Shared.ArtinaEntryRenderer))]
[assembly: ExportRenderer(typeof(Editor), typeof(UXDivers.Artina.Shared.ArtinaEditorRenderer))]
[assembly: ExportRenderer(typeof(Label), typeof(XFGrial.Droid.Renderers.CustomFontLabelRenderer))]
[assembly: ExportRenderer(typeof(Switch), typeof(UXDivers.Artina.Shared.ArtinaSwitchRenderer))]
[assembly: ExportRenderer(typeof(ActivityIndicator), typeof(UXDivers.Artina.Shared.ArtinaActivityIndicatorRenderer))]
[assembly: ExportRenderer(typeof(ProgressBar), typeof(UXDivers.Artina.Shared.ArtinaProgressBarRenderer))]
[assembly: ExportRenderer(typeof(Slider), typeof(UXDivers.Artina.Shared.ArtinaSliderRenderer))]
[assembly: ExportRenderer(typeof(SwitchCell), typeof(UXDivers.Artina.Shared.ArtinaSwitchCellRenderer))]
[assembly: ExportRenderer(typeof(TextCell), typeof(UXDivers.Artina.Shared.ArtinaTextCellRenderer))]
[assembly: ExportRenderer(typeof(ImageCell), typeof(UXDivers.Artina.Shared.ArtinaImageCellRenderer))]
[assembly: ExportRenderer(typeof(ViewCell), typeof(UXDivers.Artina.Shared.ArtinaViewCellRenderer))]
[assembly: ExportRenderer(typeof(EntryCell), typeof(UXDivers.Artina.Shared.ArtinaEntryCellRenderer))]
[assembly: ExportRenderer(typeof(SearchBar), typeof(UXDivers.Artina.Shared.ArtinaSearchBarRenderer))]
[assembly: ExportRenderer(typeof(UXDivers.Artina.Shared.Button), typeof(UXDivers.Artina.Shared.ArtinaButtonRenderer))]
iOS 專案
在 iOS 專案內的 Properties 節點下,打開
AssemblyInfo.cs
檔案
在最後面加入底下程式碼
// Custom renderer definition
[assembly: ExportRenderer(typeof(UXDivers.Artina.Shared.CircleImage), typeof(UXDivers.Artina.Shared.ImageCircleRenderer))]
[assembly: ExportRenderer(typeof(EntryCell), typeof(UXDivers.Artina.Shared.ArtinaEntryCellRenderer))]
[assembly: ExportRenderer(typeof(ImageCell), typeof(UXDivers.Artina.Shared.ArtinaImageCellRenderer))]
[assembly: ExportRenderer(typeof(SwitchCell), typeof(UXDivers.Artina.Shared.ArtinaSwitchCellRenderer))]
[assembly: ExportRenderer(typeof(TableView), typeof(UXDivers.Artina.Shared.ArtinaTableRenderer))]
[assembly: ExportRenderer(typeof(TextCell), typeof(UXDivers.Artina.Shared.ArtinaTextCellRenderer))]
[assembly: ExportRenderer(typeof(ViewCell), typeof(UXDivers.Artina.Shared.ArtinaViewCellRenderer))]
[assembly: ExportRenderer(typeof(Entry), typeof(UXDivers.Artina.Shared.ArtinaEntryRenderer))]
#pragma warning disable 219
internal static class WorkaroundLoadingCustomRenderersFromExternalAssemblies {
static WorkaroundLoadingCustomRenderersFromExternalAssemblies()
{
var a = new UXDivers.Artina.Shared.ArtinaEntryRenderer();
}
}
#pragma warning restore 219
開機畫面 Splash image
iOS 作業系統
滑鼠雙擊 iOS 專案 的
Properties
節點
將 Launch Storyboard 的值
LaunchScreen
清除
沒有留言:
張貼留言