啟動初始化之 Splash 頁面

目的

當在進行 Xamarin.Forms 專案開發的時候，可能會需要在應用程式一開始啟動的時候，進行下載網路資源、取得本機內的資源檔案資訊等相關系統初始化的執行動作，這個時候，您可以建立一個 Splash 頁面，並且設定應用程式一啟動的時候，也就是核心PCL專案的 Xamarin.Forms 的進入點，需要開始顯示這個頁面。

在這個頁面上，可以顯示您的應用程式識別品牌名稱、版本資訊、處理進度，讓使用者可以知道，現在系統正在進行大量的初始化工作。

學習重點

在這個練習專案中，將會讓您學會底下技能與方法的使用:

使用 C# 非同步工作處理方法，避免 UI Thread 被鎖住，造成頁面畫面無法正常更新。
如何變更 Xamarin.Forms 進入點的第一個頁面
使用 Prism 專案樣板，建立第一個 Xamarin.Forms 專案、檢視、檢視模型
學習如何使用 MVVM 設計模型來開發 Xamarin.Forms 應用程式。
如何使用 Unity 結構式相依性注入方式，取得 INavigationService 執行案例物件
如何使用 INavigationService 導航切換頁面
了解與操作 INavigationAware 提供的導航事件
學會如何建立檢視模型與相關屬性的方法
學習如何在 XAML 內，使用資料繫節來綁定檢視模型內的屬性
如何在 Xamarin.Forms 中使用圖片資源檔案的方法
在 XAML 內，針對不同原生平台，使用 OnPlatform 指定不同屬性值
Image 控制項的使用與指定不同平台的來源檔案
LayoutOptions 的 XAML 項目(Element)定位用法

專案原始碼

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/XFSplash

專案使用到的圖片

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/XFSplash%20Images

實作方法

建立專案

在 Visual Studio 2015，點選功能表 檔案 > 新增 > 專案
在 新增專案 對話窗內，點選 範本 > Visual C# > Prism > Prism Unity App (Forms)
在底下名稱欄位中，輸入 XFSplash 最後，點選 確定 按鈕。
當出現 Prism for Xamarin.Forms - Project Wizard 對話窗，請勾選 Android, iOS, UWP 這三個選項，表示您想要產生使用 Prism 框架的這三種原生 Xamarin.Forms 專案，最後點選 Create 按鈕。

當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。

接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
最後，整個新的 Xamarin.Forms 專案就建立完成了。

若您無法看到 Prism 項目，用來建立 Prism 類型專案，那可能是您的 Visual Studio 2015 內沒有安裝Prism Template Pack 擴充功能，請參考附件 : 使用 Visual Studio 2015 增加 Prism 專案樣版

滑鼠右擊 XFSplash.Droid，選擇 設定為起始專案
展開 XFSplash.Droid > Properties，滑鼠雙擊 Properties 這個節點
在標籤頁次 Application，選擇項目 Minimum Android to target的下拉選單，選擇值為 Android 4.4 (API Level 19 - Kit Kat) 這個選項，接著按下 Ctrl + S 組合案件，儲存此次修改設定。
滑鼠右擊 XFSplash.Droid，選擇 建置 進行專案編譯

開發前準備工作

建立資料夾

無

複製專案使用的圖片檔案

請從底下網址取得所要用到的圖片檔案到電腦的硬碟某個目錄下

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/XFSplash%20Images
使用檔案總管選擇剛剛下載完成的圖檔
利用檔案總管，拖拉這些圖檔到 Android 專案內的 Resources/drawable 資料夾內
利用檔案總管，拖拉這些圖檔到 iOS 專案內的 Resources 資料夾內
利用檔案總管，拖拉這些圖檔到 UWP 專案內的 Assets 資料夾內

專案開發

建立 SplashPage 檢視 (View)

滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
在名稱欄位輸入 SplashPage，接著點選 新增 按鈕
將底下 XAML 標記宣告複製到剛剛建立的檔案內

SplashPage.xaml

<?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"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFSplash.Views.SplashPage">

  <ContentPage.Padding>
    <OnPlatform
      x:TypeArguments="Thickness"
      iOS="0,20,0,0"
      Android="0"
      WinPhone="0,0"
      />
  </ContentPage.Padding>

  <Grid
    >
    <Image
      Aspect="AspectFill"
      >
      <Image.Source>
        <OnPlatform
          x:TypeArguments="ImageSource"
          iOS="SplashBG.jpg"
          Android="SplashBG.jpg"
          WinPhone="Assets/SplashBG.jpg"
          />
      </Image.Source>
    </Image>

    <Grid
      Margin="20,50,20,30"
      >
      <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
      </Grid.RowDefinitions>
      <Label
        Grid.Row="0" Grid.Column="0"
        Text="多奇創意行動應用"
        TextColor="White"
        FontSize="40"
        Opacity="0.3"
        HorizontalOptions="Center" VerticalOptions="Center"
        />
      <ProgressBar
        Grid.Row="1" Grid.Column="0"
        Progress="{Binding 處理進度百分比, Mode=TwoWay}"
      />
      <Label
        Grid.Row="2" Grid.Column="0"
        HorizontalOptions="Center" VerticalOptions="Start"
        Text="{Binding 處理訊息, Mode=TwoWay}"
        TextColor="White"
        FontSize="20"
        LineBreakMode="TailTruncation"
        />
      <Label
        Grid.Row="3" Grid.Column="0"
        HorizontalOptions="End" VerticalOptions="Start"
        Margin="0,0,0,0"
        Text="{Binding 版本資訊, Mode=TwoWay}"
        TextColor="Yellow"
      />
    </Grid>
  </Grid>
</ContentPage>

建立 SplashPageViewModel 檢視模型 (ViewModel)

滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
在對話窗點選 Visual C# > Prism > Prism ViewModel
在名稱欄位輸入 SplashPageViewModel，接著點選 新增 按鈕
將底下 C# 程式碼複製到剛剛建立的檔案內

SplashPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace XFSplash.ViewModels
{
    public class SplashPageViewModel : BindableBase, INavigationAware
    {
        #region Field
        INavigationService _navigationService;
        #endregion

        #region ViewModel Property

        #region 處理訊息
        private string _處理訊息 = "系統執行中...";

        public string 處理訊息
        {
            get { return _處理訊息; }
            set { SetProperty(ref _處理訊息, value); }
        }
        #endregion

        #region 處理進度百分比
        private double _處理進度百分比 = 0;

        public double 處理進度百分比
        {
            get { return _處理進度百分比; }
            set { SetProperty(ref _處理進度百分比, value); }
        }
        #endregion

        #region 版本資訊
        private string _版本資訊 = "版本:1.2.4";

        public string 版本資訊
        {
            get { return _版本資訊; }
            set { SetProperty(ref _版本資訊, value); }
        }

        #endregion

        #endregion

        public SplashPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public async void OnNavigatedTo(NavigationParameters parameters)
        {
            await 系統初始化();
        }

        private async Task 系統初始化()
        {
            double fooPer = 0.0;
            await Task.Delay(800);
            for (int i = 0; i < 101; i++)
            {
                fooPer = i / 100.0;
                處理進度百分比 = fooPer;
                if (i < 40)
                {
                    處理訊息 = "讀取本機資源中，請稍後";
                    await Task.Delay(170);
                }
                else if (i < 90)
                {
                    處理訊息 = "更新網路上最新資源";
                    await Task.Delay(30);
                }
                else
                {
                    處理訊息 = "即將完成";
                    await Task.Delay(120);
                }
            }

            處理訊息 = "導航到首頁頁面";
            await _navigationService.NavigateAsync("MainPage?title=恭喜您，已經完成 Splash 練習");
        }
    }
}

修改 MainPage.xaml 檢視

開啟核心PCL專案內的 MainPage.xaml 檔案
將底下 XAML 標記宣告內容，覆蓋掉剛剛開啟的檔案

MainPage.xaml

<?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"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFSplash.Views.MainPage"
             Title="MainPage">
  <Grid>
    <Image
      Aspect="AspectFill"
      >
      <Image.Source>
        <OnPlatform
          x:TypeArguments="ImageSource"
          iOS="MainPageImg.jpg"
          Android="MainPageImg.jpg"
          WinPhone="Assets/MainPageImg.jpg"
          />
      </Image.Source>
    </Image>

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
      <Label Text="{Binding Title}" FontSize="30"
             HorizontalTextAlignment="Center"
             TextColor="#a64dff"
             />
    </StackLayout>
  </Grid>
</ContentPage>

修正進入點與註冊檢視

開啟核心PCL專案內的 App.xaml.cs
將底下 C# 程式碼覆蓋掉剛剛開啟的檔案

App.xaml.cs

using Prism.Unity;
using XFSplash.Views;

namespace XFSplash
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("SplashPage");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<SplashPage>();
        }
    }
}

三個平台的執行結果螢幕截圖

Android

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2016/09/02

Xamarin.Forms 啟動初始化之 Splash 頁面

啟動初始化之 Splash 頁面

目的

學習重點

專案原始碼

專案使用到的圖片

實作方法

建立專案

開發前準備工作

建立資料夾

複製專案使用的圖片檔案

專案開發

建立 SplashPage 檢視 (View)

SplashPage.xaml

建立 SplashPageViewModel 檢視模型 (ViewModel)

SplashPageViewModel.cs

修改 MainPage.xaml 檢視

MainPage.xaml

修正進入點與註冊檢視

App.xaml.cs

三個平台的執行結果螢幕截圖

Android

iOS

UWP

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/09/02

Xamarin.Forms 啟動初始化之 Splash 頁面

啟動初始化之 Splash 頁面

目的

學習重點

專案原始碼

專案使用到的圖片

實作方法

建立專案

開發前準備工作

建立資料夾

複製專案使用的圖片檔案

專案開發

建立 SplashPage 檢視 (View)

SplashPage.xaml

建立 SplashPageViewModel 檢視模型 (ViewModel)

SplashPageViewModel.cs

修改 MainPage.xaml 檢視

MainPage.xaml

修正進入點與註冊檢視

App.xaml.cs

三個平台的執行結果螢幕截圖

Android

iOS

UWP

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書