若想要在您的 Xamarin.Forms 應用程式中顯示出字體圖示，例如， Font Awesome，在以往，您都需要每個專案內做關於這個字體的設定，並且需要根據平台需求，產生一個客製化的控制項。如今，想要做到這件事情，不再需要這麼麻煩的程序了，您只需要使用 Iconize Plugin 這個套件，就可以做到了。

在這篇文章中，將會測試如何在三個平台 Android/iOS/UWP，透過 Iconize Plugin 的幫助，設計出一個輸入帳號與密碼的頁面。

感謝 acaliaro 寫的這篇文章 How to create a nice rouded icon ，讓我可以順利測試出如何使用 Iconize 這個套件的使用方式。

安裝與設定相關套件

進行 Iconize 相關套件的安裝

在這裡，我們已經使用 Prism Template Pack 建立起一個支援 Android/iOS/UWP 的 Xamarin.Forms 方案，我們首先要做的事情，就是要安裝 Iconize Plugin 相關套件。

首先，請將這兩個套件，安裝到所有的專案內 Xam.Plugin.Iconize / Xam.FormsPlugin.Iconize

接著，可以依據您的喜好或者需求，選擇適合您的字體圖示，安裝相對應的套件

在這裡，我將會使用 Xam.Plugin.Iconize.FontAwesome 這個 Font Awesome 字型圖示作為展示範例，因此，請在您的方案中，除了核心PCL專案除外，各個原生專案都要安裝 Xam.Plugin.Iconize.FontAwesome這個套件。

若您在安裝相關自行套件 (Xam.Plugin.Iconize.FontAwesome)的時候，有勾選核心PCL專案，則會出現這個錯誤訊息：無法安裝封裝 'Xam.Plugin.Iconize.FontAwesome 1.0.10'。您正嘗試將此封裝安裝到以 '.NETPortable,Version=v4.5,Profile=Profile259' 為目標的專案，但該封裝不包含任何與架構相容的組件參考或內容檔。如需詳細資訊，請連絡封裝作者。

這個時候，請取消核心PCL專案，勾選其他原生專案，重新安裝這個套件即可。

若想要進一步了解這些字體圖示有哪些內容，可以參考

進行 Iconize 的原生專案初始化設定

Android 專案的設定

請在 Android 原生專案內，打開 MainActivity.cs，找到 OnCreate 方法，將程式碼置換如下：

其中，使用 .With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.Droid.IconControls.Init 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。

        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.tabs;
            ToolbarResource = Resource.Layout.toolbar;

            base.OnCreate(bundle);

            #region 進行 Iconize 套件的初始化
            Plugin.Iconize.Iconize
                .With(new Plugin.Iconize.Fonts.FontAwesomeModule());
            FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Layout.toolbar, Resource.Layout.tabs);
            #endregion

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App(new AndroidInitializer()));
        }

您可以一次安裝多個字體套件，這個時候，僅需要連續呼叫 With 方法即可，類似這樣：

            Plugin.Iconize.Iconize
                      .With(new Plugin.Iconize.Fonts.FontAwesomeModule())
                      .With(new Plugin.Iconize.Fonts.IoniconsModule());

iOS 專案的設定

請在 iOS 原生專案內，打開 AppDelegate.cs，找到 FinishedLaunching 方法，將程式碼置換如下：

其中，使用 .With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.iOS.IconControls 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            #region 進行 Iconize 套件的初始化
            Plugin.Iconize.Iconize
                .With(new Plugin.Iconize.Fonts.FontAwesomeModule());
            FormsPlugin.Iconize.iOS.IconControls.Init();
            #endregion

            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App(new iOSInitializer()));

            return base.FinishedLaunching(app, options);
        }

另外，我們還需要修正 `Info.plist' 檔案內容，在這個檔案內，需要加入底下宣告。

  <key>UIAppFonts</key>
  <array>
    <string>iconize-fontawesome.ttf</string>
    <string>iconize-material.ttf</string>
    <string>iconize-meteocons.ttf</string>
    <string>iconize-typicons.ttf</string>
  </array>

UWP 專案的設定

請在 UWP 原生專案內，打開 App.xaml.cs，找到 OnLaunched 方法，將程式碼置換如下：

其中，使用 .With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.UWP.IconControls 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {

#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

                rootFrame.NavigationFailed += OnNavigationFailed;

                #region 進行 Iconize 套件的初始化
                Plugin.Iconize.Iconize
                    .With(new Plugin.Iconize.Fonts.FontAwesomeModule());
                FormsPlugin.Iconize.UWP.IconControls.Init();
                #endregion


                Xamarin.Forms.Forms.Init(e);

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

Xamarin.Forms 的測試頁面

在這個範例中，我們需要設計一個使用者登入頁面，裡面需要讓使用者輸入帳號與密碼。我們利用 Grid Layout 將螢幕切割成四塊區域。

在核心PCL專案中，我們使用 MainPage 做為測試頁面；因為在這個頁面內，需要使用 Iconize 所提供的 IconLabel 控制項，因此，需要先加入可以參考到這個控制項的命名空間，我們需要在 ContentPage 內，加入 xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize" 這樣的宣告，如此，在這個頁面內，就可以使用 iconize 前置詞，之後就可以引用 Iconize 所提供的控制項。

當我們需要顯示 Font Awesome 字型圖示的時候，就可以使用這樣的方式 <iconize:IconLabel Text="fa-user" TextColor="Blue" /> 顯示出一個藍色使用者圖示在螢幕上。至於 Text 屬性內的文字，您可以在 Font Awesome 網站中，找到不同圖示所代表的文字。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFIconize.Views.MainPage"
             Title="使用者登入">

    <Grid
        Margin="30"
        HorizontalOptions="Fill" VerticalOptions="Center"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <iconize:IconLabel
            Grid.Row="0" Grid.Column="0"
            HorizontalOptions="Center" VerticalOptions="Center"
            FontSize="60"
            Text="fa-user" TextColor="Blue" />
        <Entry
            Grid.Row="0" Grid.Column="1"
            HorizontalOptions="Fill" VerticalOptions="Center"
            Placeholder="請輸入帳號"/>

        <iconize:IconLabel
            Grid.Row="1" Grid.Column="0"
            HorizontalOptions="Center" VerticalOptions="Center"
            FontSize="60"
            Text="fa-keyboard-o" TextColor="Blue" />
        <Entry
            Grid.Row="1" Grid.Column="1"
            HorizontalOptions="Fill" VerticalOptions="Center"
            Placeholder="請輸入密碼"/>
    </Grid>
</ContentPage>

進行測試

Android

底下是我們在 Android 平台下執行結果螢幕截圖

iOS

底下是我們在 iOS 平台下執行結果螢幕截圖

UWP : Windows 10 Mobile

底下是我們在 UWP 平台下執行結果螢幕截圖

範例專案原始碼

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFIconize

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2017/05/16

使用 Iconize 在螢幕上顯示字體圖示

安裝與設定相關套件

進行 Iconize 相關套件的安裝

進行 Iconize 的原生專案初始化設定

Android 專案的設定

iOS 專案的設定

UWP 專案的設定

Xamarin.Forms 的測試頁面

進行測試

Android

iOS

UWP : Windows 10 Mobile

範例專案原始碼

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2017/05/16

使用 Iconize 在螢幕上顯示字體圖示

安裝與設定相關套件

進行 Iconize 相關套件的安裝

進行 Iconize 的原生專案初始化設定

Android 專案的設定

iOS 專案的設定

UWP 專案的設定

Xamarin.Forms 的測試頁面

進行測試

Android

iOS

UWP : Windows 10 Mobile

範例專案原始碼

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書