XAML in Xamarin.Forms 基礎篇 電子書

特別說明

2017/05/16

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

若想要在您的 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 平台下執行結果螢幕截圖
Iconize Android

iOS

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

UWP : Windows 10 Mobile

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

範例專案原始碼

沒有留言:

張貼留言