XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2017/10/07

Xamarin.Forms - 從網路下載檔案,並且儲存到手機中,接著,可以使用安裝在手機內的應用程式,開啟這個檔案

這是一份 Xamarin.Forms 高等進階開發技術筆記,我們在這裡將會針對如何設計一個 Xamarin.Forms 應用專案,可以下載網路上的圖片、音樂、影片、文件檔案(pdf, ppt, doc, xls等等)到手機上,並且使用手機上預設安裝的 App,來開啟這些已經下載的檔案。
想要完成這樣的需求程式設計,您需要了解如何在 Xamarin.Forms 使用底下的技術:
  • MVVM開發框架,在這裡,我們使用 Prism 作為我們開發與設計 MVVM 架構的框架
  • 安裝與使用 HttpClient 來下載網路資源
  • 使用 using 來操作 IDisposable 實作類別物件
  • 使用 PCLStorage 套件,將剛剛下載的網路資源,儲存到本機裝置記憶卡內
  • 可以指定儲存檔案的地方,不是該應用程式的沙箱,而是可以由使用者自行存取的目錄下。
  • 使用相依性服務注入技巧,注入可以開啟該檔案的物件與使用其相關方法

測試頁面

在這裡,我們設計一個頁面,在這個頁面上,僅有兩個控制項,一個是 Picker 另外一個是 Button;使用者可以透過 Picker 選擇要下載檔案的類型,接著按下按鈕,就會開始進行下載該檔案與開啟該檔案。
底下是這個測試頁面的 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"
             xmlns:behavior="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFFileDownload.Views.MainPage"
             Title="MainPage">
    <Grid
        BackgroundColor="White">
        <StackLayout
            HorizontalOptions="Center" VerticalOptions="Center">
            <Picker
            ItemsSource="{Binding FileSourceTypes}"
            SelectedItem="{Binding FileSourceTypeSelect}"
            />
            <Button Text="下載檔案"
                Command="{Binding DownloadCommand}"/>
        </StackLayout>

        <BoxView
            Color="Gray"
            IsVisible="{Binding ShowMask}"
            />
    </Grid>
</ContentPage>
接下來,我們來看看這個頁面 ViewModel 的程式碼
首先,我們在 OnNavigatedTo 事件方法中,進行 Picker 下拉選單資料項目的初始化。
在建構函式內 public MainPageViewModel(INavigationService navigationService, IPublicFileSystem publicFileSystem, IOpenFileByName openFileByName) ,我們將會把我們等下要設計的兩個介面 IPublicFileSystem 與 IOpenFileByName,在這使用建構函式注入物件的方式,將這兩個介面的原生專案中所實作出來並且產生的物件,注入到這個頁面 ViewModel內,讓相關程式碼可以進行相關操作。
由於 PCLStorage 套件所提供的 FileSystem 類別,僅會提供該應用程式沙箱可以使用到的資料夾,因此,我們將會透過 _PublicFileSystem.PublicDownloadFolder 來取得指向該原生平台下的可以公開存取的 IFolder 資料夾。
我們使用 IFile 物件, file ,建立一個檔案,並且使用 file.OpenAsync(FileAccess.ReadAndWrite) 取得可以讀寫的 stream 物件。
此時,我們將會建立 HttpClient 物件,client,使用 client.GetStreamAsync(url) 方法,取得這個網路資源的 stream 物件,並且使用敘述 fooStream.CopyTo(fooFileStream); 將從網路取得的檔案內容,複製到本機檔案中;若您取得網路檔案的方法需要使用 Post 的方式來取得,您也是使用同樣的方式,取得 HttpResponseMessage.Content.ReadAsStreamAsync 的 stream 物件,就可以進行寫入到本機儲存空間內。
在上述的檔案與目錄操作的程式碼,我們都是使用 PCLStorage 套件所提供的類別與相關方法。
最後,我們使用 _OpenFileByName.OpenFile(file.Path); 將這個檔案,使用安裝在手機中的應用程式來開啟。
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private readonly INavigationService _navigationService;


        public ObservableCollection<string> FileSourceTypes { get; set; } = new ObservableCollection<string>();
        public string FileSourceTypeSelect { get; set; }
        public bool ShowMask { get; set; } = false;
        public DelegateCommand DownloadCommand { get; set; }

        IPublicFileSystem _PublicFileSystem;
        IOpenFileByName _OpenFileByName;
        public MainPageViewModel(INavigationService navigationService,
            IPublicFileSystem publicFileSystem, IOpenFileByName openFileByName)
        {
            _navigationService = navigationService;
            // 注入各平台的非應用程式專屬的沙箱資料夾
            _PublicFileSystem = publicFileSystem;
            // 使用手機內安裝的App,開啟指定的檔案
            _OpenFileByName = openFileByName;

            DownloadCommand = new DelegateCommand(async () =>
            {
                ShowMask = true;
                #region 依據所選擇的項目,設定下載來源與檔案名稱
                string filename = "";
                string url = "";
                if (FileSourceTypeSelect.ToLower() == "pdf")
                {
                    filename = "vulcan.pdf";
                    url = "https://www.tutorialspoint.com/csharp/csharp_tutorial.pdf";
                }
                else if (FileSourceTypeSelect.ToLower() == "image")
                {
                    filename = "vulcan.png";
                    url = "https://pluralsight.imgix.net/paths/path-icons/csharp-e7b8fcd4ce.png";
                }
                else if (FileSourceTypeSelect.ToLower() == "mp3")
                {
                    filename = "vulcan.mp3";
                    url = "http://video.ch9.ms/ch9/4855/ca67b144-e675-48a2-a0f2-706af9644855/DataTemplateSelector.mp3";
                }
                else if (FileSourceTypeSelect.ToLower() == "video")
                {
                    filename = "vulcan.mp4";
                    url = "http://video.ch9.ms/ch9/4855/ca67b144-e675-48a2-a0f2-706af9644855/DataTemplateSelector.mp4";
                }
                else if (FileSourceTypeSelect.ToLower() == "ppt")
                {
                    filename = "vulcan.ppt";
                    url = "http://people.csail.mit.edu/mrub/talks/small_world/Seminar07_rubinstein.ppt";
                }
                else if (FileSourceTypeSelect.ToLower() == "doc")
                {
                    filename = "vulcan.doc";
                    url = "http://im2.nhu.edu.tw/download.php?filename=270_2af7568a.doc&dir=personal_subject/&title=C%23-%E7%AC%AC%E4%B8%80%E7%AB%A0";
                }
                #endregion

                // 取得要存放該檔案的資料夾
                // FileSystem 為 PCLStorage 提供的應用程式沙箱的相關資料夾
                IFolder rootFolder = _PublicFileSystem.PublicDownloadFolder;
                try
                {
                    // 建立這個檔案
                    IFile file = await rootFolder.CreateFileAsync(filename,
                        CreationCollisionOption.OpenIfExists);
                    // 取得這個檔案的 Stream 物件
                    using (var fooFileStream = await file.OpenAsync(FileAccess.ReadAndWrite))
                    {
                        using (HttpClientHandler handle = new HttpClientHandler())
                        {
                            // 建立 HttpClient 物件
                            using (HttpClient client = new HttpClient(handle))
                            {
                                // 取得指定 URL 的 Stream
                                using (var fooStream = await client.GetStreamAsync(url))
                                {
                                    // 將網路的檔案 Stream 複製到本機檔案上
                                    fooStream.CopyTo(fooFileStream);
                                }
                            }
                        }
                    }

                    _OpenFileByName.OpenFile(file.Path);
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.Message);
                }
                ShowMask = false;
            });
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            FileSourceTypes.Clear();
            FileSourceTypes.Add("PDF");
            FileSourceTypes.Add("Image");
            FileSourceTypes.Add("MP3");
            FileSourceTypes.Add("Video");
            FileSourceTypes.Add("PPT");
            FileSourceTypes.Add("Doc");

        }

    }

取得公開資料夾的介面與實作

首先,我們在 PCL 專案內,建立 IPublicFileSystem 這個介面,這個介面內僅有四個屬性需要在原生平台內實作出來。
    public interface IPublicFileSystem
    {
        IFolder PublicDownloadFolder { get; }
        IFolder PublicPictureFolder { get; }
        IFolder PublicMovieFolder { get; }
        IFolder PublicDCIMFolder { get; }
    }
在 Android 平台下,我們實作 IPublicFileSystem 介面,並且記得要使用 [assembly: Xamarin.Forms.Dependency(typeof(PublicFileSystem))] 來宣告這個介面實作,可以用於相依性服務注入之用。
我們在這個介面實作中,取得個公開資料夾的絕對路徑,並且建立 PCLStorage 套件的 FileSystemFolder類別物件,這就是我們要使用的 IFolder 實作物件。
有關 Android 平台下關於這些資料夾的說明,請參考 https://developer.android.com/reference/android/os/Environment.html#DIRECTORY_DOWNLOADS
[assembly: Xamarin.Forms.Dependency(typeof(PublicFileSystem))]
namespace XFFileDownload.Droid.Services
{
    class PublicFileSystem : IPublicFileSystem
    {
        public IFolder PublicDownloadFolder
        {
            get
            {
                var localAppData = Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryDownloads).AbsolutePath;
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicPictureFolder
        {
            get
            {
                var localAppData = Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryPictures).AbsolutePath;
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicMovieFolder
        {
            get
            {
                var localAppData = Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryMovies).AbsolutePath;
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicDCIMFolder
        {
            get
            {
                var localAppData = Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryDcim).AbsolutePath;
                return new FileSystemFolder(localAppData);
            }
        }
    }
}
在 iOS 平台下,我們實作 IPublicFileSystem 介面,並且記得要使用 [assembly: Xamarin.Forms.Dependency(typeof(PublicFileSystem))] 來宣告這個介面實作,可以用於相依性服務注入之用。
我們在這個介面實作中,取得個公開資料夾的絕對路徑,並且建立 PCLStorage 套件的 FileSystemFolder類別物件,這就是我們要使用的 IFolder 實作物件。
有關 iOS 平台下關於這些資料夾的說明,請參考 https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_the_file_system/
[assembly: Xamarin.Forms.Dependency(typeof(PublicFileSystem))]
namespace XFFileDownload.iOS.Services
{
    class PublicFileSystem : IPublicFileSystem
    {
        public IFolder PublicDownloadFolder
        {
            get
            {
                var localAppData = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicPictureFolder
        {
            get
            {
                var localAppData = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicMovieFolder
        {
            get
            {
                var localAppData = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
                return new FileSystemFolder(localAppData);
            }
        }
        public IFolder PublicDCIMFolder
        {
            get
            {
                var localAppData = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
                return new FileSystemFolder(localAppData);
            }
        }
    }
}

取得公開資料夾的介面與實作

首先,我們在 PCL 專案內,建立 IOpenFileByName 這個介面,這個介面內僅有一個方法需要在原生平台內實作出來。
    public interface IOpenFileByName
    {
        void OpenFile(string fullFileName);
    }
在 Android 平台下,我們實作 IOpenFileByName 介面,並且記得要使用 [assembly: Xamarin.Forms.Dependency(typeof(OpenFileByName))] 來宣告這個介面實作,可以用於相依性服務注入之用。
這個實作方法,首先,將這個檔案,複製到公開的資料夾內,也就是說,您下載的檔案,是可以儲存在應用程式沙箱資料夾內,也是可以正常使用手機內安裝的應用程式來開啟這個檔案的。
最後,我們使用 Intent intent = new Intent(Intent.ActionView); 來讓使用者選擇適合的應用程式,來開啟這個檔案。
[assembly: Xamarin.Forms.Dependency(typeof(OpenFileByName))]
namespace XFFileDownload.Droid.Services
{
    public class OpenFileByName : IOpenFileByName
    {
        public void OpenFile(string fullFileName)
        {
            try
            {
                var filePath = fullFileName;
                var fileName = Path.GetFileName(fullFileName);

                var bytes = File.ReadAllBytes(filePath);

                string externalStorageState = global::Android.OS.Environment.ExternalStorageState;
                var externalPath = global::Android.OS.Environment.ExternalStorageDirectory.Path + "/" + 
                    global::Android.OS.Environment.DirectoryDownloads + "/" + fileName;
                File.WriteAllBytes(externalPath, bytes);

                Java.IO.File file = new Java.IO.File(externalPath);
                file.SetReadable(true);

                string application = "";
                string extension = Path.GetExtension(filePath);

                // get mimeTye
                switch (extension.ToLower())
                {
                    case ".txt":
                        application = "text/plain";
                        break;
                    case ".doc":
                    case ".docx":
                        application = "application/msword";
                        break;
                    case ".pdf":
                        application = "application/pdf";
                        break;
                    case ".xls":
                    case ".xlsx":
                        application = "application/vnd.ms-excel";
                        break;
                    case ".jpg":
                    case ".jpeg":
                    case ".png":
                        application = "image/jpeg";
                        break;
                    default:
                        application = "*/*";
                        break;
                }

                //Android.Net.Uri uri = Android.Net.Uri.Parse("file://" + filePath);
                Android.Net.Uri uri = Android.Net.Uri.FromFile(file);
                Intent intent = new Intent(Intent.ActionView);
                intent.SetDataAndType(uri, application);
                intent.SetFlags(ActivityFlags.ClearWhenTaskReset | ActivityFlags.NewTask);

                Forms.Context.StartActivity(intent);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
    }
}
在 iOS 平台下,我們實作 IOpenFileByName 介面,並且記得要使用 [assembly: Xamarin.Forms.Dependency(typeof(OpenFileByName))] 來宣告這個介面實作,可以用於相依性服務注入之用。
我們建立一個類別 UIDocumentInteractionControllerDelegateClass,用來顯示這個檔案。
[assembly: Xamarin.Forms.Dependency(typeof(OpenFileByName))]
namespace XFFileDownload.iOS.Services
{
    public class OpenFileByName : IOpenFileByName
    {
        public void OpenFile(string fullFileName)
        {
            var filePath = fullFileName;
            var fileName = Path.GetFileName(fullFileName);

            //Device.OpenUri(new Uri(filePath));
            var PreviewController = UIDocumentInteractionController.FromUrl(NSUrl.FromFilename(filePath));
            PreviewController.Delegate = new UIDocumentInteractionControllerDelegateClass(UIApplication.SharedApplication.KeyWindow.RootViewController);
            Device.BeginInvokeOnMainThread(() =>
            {
                PreviewController.PresentPreview(true);
            });
        }
    }

    public class UIDocumentInteractionControllerDelegateClass : UIDocumentInteractionControllerDelegate
    {
        UIViewController ownerVC;

        public UIDocumentInteractionControllerDelegateClass(UIViewController vc)
        {
            ownerVC = vc;
        }

        public override UIViewController ViewControllerForPreview(UIDocumentInteractionController controller)
        {
            return ownerVC;
        }

        public override UIView ViewForPreview(UIDocumentInteractionController controller)
        {
            return ownerVC.View;
        }
    }
}

沒有留言:

張貼留言