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 呼び出しボタンの追加

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

2.2 ViewModel

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

using System;
using System.Windows.Input;
using System.Diagnostics;

using Xamarin.Forms;
using System.Net.Http;
using Plugin.FilePicker;

namespace FavoPhrase.ViewModels
{
    public class AboutViewModel : BaseViewModel
    {
        public AboutViewModel()
        {
            Title = "About";
            FilePickCommand = new Command(FilePick);
        }

        private async void FilePick()
        {
            var file = await CrossFilePicker.Current.PickFile();

            if (file != null)
            {
                await Page.DisplayAlert("Selected File", file.FileName, "OK");
            }
        }
        public ICommand FilePickCommand { get; }
        public Page Page
        {
            get;
            set;
        }
    }
}

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!

コメントを残す

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