Xamarin.Forms ファイル選択

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

Vuetify から、ファイルアップロード、Google Cloud Vision を使用して、OCR機能の検証まで実施。

次は、Xamarin側で同等の機能を実現したい。

まずは、ファイル選択機能。

どうやら、Xamarin.Forms標準では用意されていなさそうだ。

Xamarin ポピュラープラグインから探す。(ただし、現時点でURLに登録されているバージョンは古いため、新しいものを選択する)

1.ファイル選択プラグイン

1.1 インストール

https://www.nuget.org/packages/Xamarin.Plugin.FilePicker/2.0.135

NuGetで、Xamarin.Plugin.FilePicker を検索しインストール

xamarin_filepicker_nuget

古いバージョンでの説明だが、以下のサイトの手順がわかりやすい。

https://www.c-sharpcorner.com/article/how-to-create-file-picker-in-xamarin-forms/

1.2 Androidアクセス許可を追記

Androidプロジェクト – Properties – AndroidManifest.xmlに、use-permission の下記2行、READ_EXTERNAL_STORAGE、WRITE_EXTERNAL_STORAGEを追記。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.FavoPhrase" android:installLocation="preferExternal">
  <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <application android:label="FavoPhrase.Android"></application>
</manifest>

https://docs.microsoft.com/ja-jp/xamarin/android/app-fundamentals/permissions?tabs=windows

2.実装

2.1 呼び出しボタンの追加

  1. <Button Margin="0,10,0,0" Text="Pick File"
  2. Command="{Binding FilePickCommand}"
  3. BackgroundColor="{StaticResource Primary}"
  4. TextColor="White"/>

2.2 ViewModel

ボタン押下時のコマンドの定義、選択されたファイル名をポップアップ表示させる。

  1. using System;
  2. using System.Windows.Input;
  3. using System.Diagnostics;
  4.  
  5. using Xamarin.Forms;
  6. using System.Net.Http;
  7. using Plugin.FilePicker;
  8.  
  9. namespace FavoPhrase.ViewModels
  10. {
  11. public class AboutViewModel : BaseViewModel
  12. {
  13. public AboutViewModel()
  14. {
  15. Title = "About";
  16. FilePickCommand = new Command(FilePick);
  17. }
  18.  
  19. private async void FilePick()
  20. {
  21. var file = await CrossFilePicker.Current.PickFile();
  22.  
  23. if (file != null)
  24. {
  25. await Page.DisplayAlert("Selected File", file.FileName, "OK");
  26. }
  27. }
  28. public ICommand FilePickCommand { get; }
  29. public Page Page
  30. {
  31. get;
  32. set;
  33. }
  34. }
  35. }

3.実行

3.1 Android

Google Drive含む様々なロケーションからファイルを選択できる。

xamarin_filepicker_android

xamarin_filepicker_android2

xamarin_filepicker_android3

3.2 iPhone

こちらも、iCloud含むさまざまなロケーションからファイル選択可能

xamarin_filepicker_ios

xamarin_filepicker_ios2

xamarin_filepicker_ios3

3.3 UWP

おなじみのファイルチューザー

xamarin_filepicker_uwp

xamarin_filepicker_uwp2

割といい感じだ。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です