這份筆記將會記錄如何在新建專案的時候，配合
Grial UIKit 這個 Xamarn.Forms 的 UI 設計支援套件，讓 Xamarin.Forms 的開發者可以快速的開發出漂亮、專案與實用的 Xamarin.Forms 應用程式。
由於要使用 Grial UI Kit 套件，需要做許多初始設定工作與設定的動作，因此，請參考這份文件就可以順利做出。
Grial UI Kit 初始化
目錄建立
請依序在底下專案建立新的資料夾
核心 PCL 專案
Helpers
Models
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>
<ResourceDictionary>
<Color x:Key="AccentColor">#FFDA125F</Color>
<Color x:Key="InverseTextColor">White</Color>
<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>
<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>
<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>
<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>
<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" />
<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}"/>
<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}"/>
<Setter Property="BackgroundColor">
<Setter.Value>
<OnPlatform x:TypeArguments="Color" Android="#d6d6d6" />
</Setter.Value>
</Setter>
</Style>
<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>
<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>
<Style x:Key="AvailableStatusStyle" TargetType="Label" BasedOn="{StaticResource StatusLabelStyle}">
<Setter Property="BackgroundColor" Value="{StaticResource OkColor}"/>
<Setter Property="TextColor" Value="White"/>
</Style>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<Style x:Key="EcommerceProductGridBannerStyle" TargetType="StackLayout">
<Setter Property="HeightRequest" Value="120" />
<Setter Property="BackgroundColor" Value="{StaticResource BrandColorDarker}" />
</Style>
<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 定義之前面的命名空間，更換為您當時專案使用的命名空間。
[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 檔案
在最後面加入底下程式碼
[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 清除
參考
