在Xamarin表單中選擇或選擇多個圖像

Question

我使用“Plugin.Media.CrossPlatform”nuget來訪問相機並用Xamarin Forms拍照。 但目前，它一次只需要一張圖片，只上傳最后拍攝的圖片。 我想添加多個捕獲並允許用戶從最近捕獲的圖像中選擇特定圖片。 這個插件在Android和IOS這兩個平台上怎么可能？

此外，我添加了選擇模式，如果用戶想要從圖庫中選擇圖片。 但是存在同樣的問題。 我想一次選擇多個圖像並在兩個平台上上傳。 Xamarin Forms中的這個工具怎么樣？ 這個任務有沒有例子或博客？

我正在使用這個包。

Answer 1

MediaPlugin不允許多次拍攝或拍攝多張照片。

您必須實現平台方法並使用Dependency Service訪問它們，就像這樣。 DependencyService.Get<IDoMultipleStuff>().TakePictures();

對於Android，您可以使用INTENT_ACTION_STILL_IMAGE_CAMERA拍攝多張照片：

Intent intent = new Intent(
    MediaStore.INTENT_ACTION_STILL_IMAGE_CAMERA);
this.startActivity(intent);

對於iOS，您可以使用PhotoPicker ，它可以讓您在返回應用程序之前拍攝多張照片。

在Android中，您可以通過在Intent中添加額外的ExtraAllowMultiple來選擇多個圖像

var imageIntent = new Intent(Intent.ActionPick);
imageIntent.SetType ("image/*");
imageIntent.PutExtra (Intent.ExtraAllowMultiple, true);
imageIntent.SetAction (Intent.ActionGetContent);
((Activity)Forms.Context).StartActivityForResult(Intent.CreateChooser (imageIntent, "Select photo"), 0);

對於iOS，您可以通過這種方式使用ELCImagePicker 。

var picker = ELCImagePickerViewController.Create();
picker.MaximumImagesCount = 15;

picker.Completion.ContinueWith (t => {
  if (t.IsCanceled || t.Exception != null) {
    // no pictures for you!
  } else {
     var items = t.Result as List<AssetResult>;
   }
});

PresentViewController (picker, true, null);

Answer 2

Xamarin Android表單從Camera獲取多張圖片，這是它的解決方案。

public partial class App : Application
{
   // public static App Instance;

    public App ()
    {
        MainPage = new CameraGallery.MainPage();
        InitializeComponent();

    }
}

MainPage.xaml中

//請安裝FlowListView和ffimageloading nuget pckg

<?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:local="clr-namespace:CameraGallery"
             x:Class="CameraGallery.MainPage"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"> 

            <StackLayout x:Name="CameraLayout">
                <flv:FlowListView FlowColumnCount="3" x:Name="listItemsCam" 
                        SeparatorVisibility="None"
                        HasUnevenRows="false" RowHeight="100" >
                    <flv:FlowListView.FlowColumnTemplate>
                        <DataTemplate >
                            <ffimageloading:CachedImage  DownsampleToViewSize="true" AbsoluteLayout.LayoutFlags="All" HeightRequest="100" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="{Binding .}"  Aspect="AspectFill" HorizontalOptions="FillAndExpand">
                            </ffimageloading:CachedImage>
                        </DataTemplate>
                    </flv:FlowListView.FlowColumnTemplate>
                </flv:FlowListView>
                <!--<Image x:Name="image" IsVisible="False"></Image>-->
            </StackLayout>
</ContentPage>  

MainPage.xaml.cs中

public partial class MainPage : ContentPage
    {
        ObservableCollection<string> camImageCollection;
        public static MainPage Instance;

        public MainPage()
        {
            InitializeComponent();
            Instance = this;

            var btn = new Button
            {
                Text = "Snap!",
                Command = new Command(o => ShouldTakePicture()),
            };
            CameraLayout.Children.Add(btn);  

            camImageCollection = new ObservableCollection<string>();
        }
        public event Action ShouldTakePicture = () => { };

        public void ShowImage(string[] filepath)
        {
           foreach(var item in filepath)
             camImageCollection.Add(item);
             listItemsCam.FlowItemsSource = camImageCollection;
        }
    }

現在轉到你的MainActivity.cs里面的android項目

[Activity(Label = "CameraGallery", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        public static int OPENCAMERACODE = 102;
        //inside OnCreate after LoadApplication(new App()); add these lines
         protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
            UserDialogs.Init(this);
            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);

            FlowListView.Init();
            CachedImageRenderer.Init(false);
            LoadApplication(new App());
            MainPage.Instance.ShouldTakePicture += () =>
            {
                ICursor cursor = loadCursor();
                image_count_before = cursor.Count;
                cursor.Close();
                Intent intent = new Intent(MediaStore.IntentActionStillImageCamera);
                IList<ResolveInfo> activities = PackageManager.QueryIntentActivities(intent, 0);
                if(activities.Count >0)
                    StartActivityForResult(Intent.CreateChooser(intent, "Camera Capture"), OPENCAMERACODE);
            };
        }
        public ICursor loadCursor()
        {
            string[] columns = new string[] { MediaStore.Images.ImageColumns.Data, MediaStore.Images.ImageColumns.Id };
            string orderBy = MediaStore.Images.ImageColumns.DateAdded;
            return ContentResolver.Query(MediaStore.Images.Media.ExternalContentUri, columns, null, null, orderBy);
        }
        private void exitingCamera()
        {
            ICursor cursor = loadCursor();
            string[] paths = getImagePaths(cursor, image_count_before);
            MainPage.Instance.ShowImage(paths);// this parameter pass to MainPage.xaml.cs
            cursor.Close();
        }
        public string[] getImagePaths(ICursor cursor, int startPosition)
        {
            int size = cursor.Count - startPosition;
            if (size <= 0) return null;
            string[] paths = new string[size];

            int dataColumnIndex = cursor.GetColumnIndex(MediaStore.Images.ImageColumns.Data);
            for (int i = startPosition; i < cursor.Count; i++)
            {
                cursor.MoveToPosition(i);

                paths[i - startPosition] = cursor.GetString(dataColumnIndex);
            }
            return paths;
        }
        //inside OnActivityResult method do this
        protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
        {
            base.OnActivityResult(requestCode, resultCode, data);
            switch (requestCode)
            {
                case 102:
                        exitingCamera();
                    break;
            }
        }
    }