关于xamarin:MASA-MAUI-Plugin-八Android相册多选照片Intent-方式

背景

MAUI 的呈现，赋予了宽广.Net 开发者开发多平台利用的能力，MAUI 是 Xamarin.Forms 演变而来，然而相比 Xamarin 性能更好，可扩展性更强，构造更简略。然而 MAUI 对于平台相干的实现并不残缺。所以 MASA 团队发展了一个实验性我的项目，意在对微软 MAUI 的补充和扩大

我的项目地址https://github.com/BlazorComp…

每个性能都有独自的 demo 演示我的项目，思考到 app 安装文件体积（尽管 MAUI 曾经集成裁剪性能，然而该性能对于代码自身有影响），届时每一个性能都会以独自的 nuget 包的模式提供，不便测试，当初我的项目才刚刚开始，然而置信很快就会有能够交付的内容啦。

前言

本系列文章面向挪动开发小白，从零开始进行平台相干性能开发，演示如何参考平台的官网文档应用 MAUI 技术来开发相应性能。

介绍

我的项目中有须要从相册多选图片的需要，MAUI 提供的 MediaPicker.PickPhotoAsync 无多选性能，FilePicker.PickMultipleAsync尽管能够实现多选，然而多选文件须要长按，而且没有预览和返回按钮，用户交互成果不好。作为安卓开发小白，自己目前找到两种 UI 交互良好而且不须要定制选取界面的办法和大家分享。

一、MAUI 实现形式演示成果

MediaPicker.Default.PickPhotoAsync 成果

FilePicker.Default.PickMultipleAsync 成果

二、实现形式

思路

https://developer.android.goo…

咱们参考一下官网文档，上面为抉择多张照片或者多个视频的示例

JAVA 代码
// Launches photo picker in multi-select mode.
// This means that user can select multiple photos/videos, up to the limit
// specified by the app in the extra (10 in this example).
final int maxNumPhotosAndVideos = 10;
Intent intent = new Intent(MediaStore.ACTION_PICK_IMAGES);
intent.putExtra(MediaStore.EXTRA_PICK_IMAGES_MAX, maxNumPhotosAndVideos);
startActivityForResult(intent, PHOTO_PICKER_MULTI_SELECT_REQUEST_CODE);

解决照片选择器后果

JAVA 代码
// onActivityResult() handles callbacks from the photo picker.
@Override
protected void onActivityResult(int requestCode, int resultCode, final Intent data) {if (resultCode != Activity.RESULT_OK) {
        // Handle error
        return;
    }

    switch(requestCode) {
        case REQUEST_PHOTO_PICKER_SINGLE_SELECT:
            // Get photo picker response for single select.
            Uri currentUri = data.getData();

            // Do stuff with the photo/video URI.
            return;
        case REQUEST_PHOTO_PICKER_MULTI_SELECT:
            // Get photo picker response for multi select
            for (int i = 0; i < data.getClipData().getItemCount(); i++) {Uri currentUri = data.getClipData().getItemAt(i).getUri();

                // Do stuff with each photo/video URI.
            }
            return;
    }
}

限定抉择内容范畴
默认状况下，照片选择器会既显示照片又显示视频。您还能够在 setType() 办法中设置 MIME 类型，以便按“仅显示照片”或“仅显示视频”进行过滤

JAVA 代码
// Launches photo picker for videos only in single select mode.
Intent intent = new Intent(MediaStore.ACTION_PICK_IMAGES);
intent.setType("video/*");
startActivityForResult(intent, PHOTO_PICKER_VIDEO_SINGLE_SELECT_REQUEST_CODE);

// Apps can also change the mimeType to allow users to select
// images only - intent.setType("image/*");
// or a specific mimeType - intent.setType("image/gif");

总结流程如下：
1、通过 Intent(MediaStore.ACTION_PICK_IMAGES) 初始化一个关上相册的 Intent
2、intent.setType 设置过滤条件
3、通过startActivityForResult 关上新的 Activity（关上相册），并通过重写onActivityResult 获取选取照片的返回数据
4、从返回的Intent 中拿到文件的Uri 从而获取文件内容
留神：在一个 Activity 中，可能会应用 startActivityForResult() 办法关上多个不同的Activity 解决不同的业务 , 这时能够在 onActivityResult 中通过 requestCode 辨别不同业务。

编写实现代码

新建 MAUI Blazor 我的项目 MediaPickSample，新建Service 文件夹，增加 IPhotoPickerService.cs 接口，增加 GetImageAsync1-3，前两种为应用 MAUI 的两种形式实现，用做比照，不过多介绍，本文重点关注Intent 形式实现的GetImageAsync3。示例办法的返回值为文件名 + 文件 base64 的字典模式。

namespace MediaPickSample.Service
{
    public interface IPhotoPickerService
    {
        /// <summary>
        /// Maui-MediaPicker
        /// </summary>
        Task<Dictionary<string, string>> GetImageAsync1();

        /// <summary>
        /// MMaui-FilePicker
        /// </summary>
        Task<Dictionary<string, string>> GetImageAsync2();

        /// <summary>
        /// Intent
        /// </summary>
        Task<Dictionary<string, string>> GetImageAsync3();}
}

因为 StartActivityForResult 须要在 MainActivity 中调用，咱们先定义一个 MainActivity 的动态示例 Instance，不便在业务中应用。
编辑 Platforms->Android->MainActivity.cs 文件

    public class MainActivity : MauiAppCompatActivity
    {internal static MainActivity Instance { get; private set;}
        public static readonly int PickImageId = 1000;
        public TaskCompletionSource<Dictionary<string, string>> PickImageTaskCompletionSource {set; get;}
        
        protected override void OnCreate(Bundle savedInstanceState)
        {
            Instance = this;
            base.OnCreate(savedInstanceState);
        }

        protected override void OnActivityResult(int requestCode, Result resultCode, Android.Content.Intent intent)
        {base.OnActivityResult(requestCode, resultCode, intent);

            if (requestCode == PickImageId)
            {if ((resultCode == Result.Ok) && (intent != null))
                {
                    var imageNames = intent.ClipData;

                    if (imageNames != null)
                    {var uris = new List<Android.Net.Uri>();

                        for (int i = 0; i < imageNames.ItemCount; i++)
                        {var imageUri = imageNames.GetItemAt(i).Uri;
                            uris.Add(imageUri);
                        }

                        var fileList = Instance.GetImageDicFromUris(uris);
                        PickImageTaskCompletionSource.SetResult(fileList);
                    }
                }
                else
                {PickImageTaskCompletionSource.SetResult(new Dictionary<string, string>());
                }
            }
        }
    }

首先咱们定义了 MainActivity 的动态实例 Instance，并在OnCreate 事件中赋值
而后增加重写办法 OnActivityResult，通过requestCode == PickImageId 判断是从相册选取多个文件的业务（咱们关注的业务），通过 intent.ClipData 获取数据，而后遍历这些数据顺次通过 GetItemAt(i).Uri 获取所有的文件 Uri，而后再通过咱们封装的GetImageDicFromUris 办法获取所有文件的内容。GetImageDicFromUris办法如下

        protected Dictionary<string, string> GetImageDicFromUris(List<Android.Net.Uri> list)
        {Dictionary<string, string> fileList = new Dictionary<string, string>();
            for (int i = 0; i < list.Count; i++)
            {var imageUri = list[i];
                var documentFile = DocumentFile.FromSingleUri(Instance, imageUri);
                if (documentFile != null)
                {using (var stream = Instance.ContentResolver.OpenInputStream(imageUri))
                    {stream.Seek(0, SeekOrigin.Begin);
                        var bs = new byte[stream.Length];
                        var log = Convert.ToInt32(stream.Length);
                        stream.Read(bs, 0, log);
                        var base64Str = Convert.ToBase64String(bs);
                        fileList.Add($"{Guid.NewGuid()}.{Path.GetExtension(documentFile.Name)}", base64Str);
                    }
                }
            }
            return fileList;
        }

DocumentFile位于 AndroidX.DocumentFile.Provider 命名空间，FromSingleUri办法通过 Uri 返回 DocumentFile，而后通过ContentResolver.OpenInputStream 读出文件流
ContentResolver 的内容比拟多，能够参考官网文档，这里咱们简略了解它是一个内容提供程序即可

https://developer.android.goo…

上面开始实现 IPhotoPickerService 接口
在Platforms->Android 新建AndroidPhotoPickerService.cs

namespace MediaPickSample.PlatformsAndroid
{
    public class AndroidPhotoPickerService : IPhotoPickerService
    {
        /// <summary>
        /// Maui-MediaPicker
        /// </summary>
        public async Task<Dictionary<string, string>> GetImageAsync1()
        {...}
        
        /// <summary>
        /// MMaui-FilePicker
        /// </summary>
        public async Task<Dictionary<string, string>> GetImageAsync2()
        {...}
        
        /// <summary>
        /// Intent
        /// </summary>
        public Task<Dictionary<string, string>> GetImageAsync3()
        {Intent intent = new Intent(Intent.ActionPick);
            intent.SetDataAndType(MediaStore.Images.Media.ExternalContentUri, "image/*");
            intent.PutExtra(Intent.ExtraAllowMultiple,true);
            MainActivity.Instance.StartActivityForResult(Intent.CreateChooser(intent, "Select Picture"),
                MainActivity.PickImageId);
            MainActivity.Instance.PickImageTaskCompletionSource = new TaskCompletionSource<Dictionary<string, string>>();
            return MainActivity.Instance.PickImageTaskCompletionSource.Task;
        }
    }
}

咱们只关注 Intent 实现的 GetImageAsync3 办法

首先先初始化一个 Intent.ActionPick 类型的 Intent，抉择数据咱们须要应用ACTION_PICK 类型。
常见的 Intent 类型参考官网文档

https://developer.android.goo…

intent.SetDataAndType办法设置 Intent 的数据和 MIME 数据类型

https://developer.android.com…(android.net.Uri,%20java.lang.String)

intent.PutExtra 设置能够多选
而后就能够通过MainActivity 的动态实例 Instance 的StartActivityForResult办法启动这个 intent 了，咱们这里通过 Intent.CreateChooser 给Intent设置了一个题目，并传递 requestCode 用以辨别业务。
### 编写演示代码
批改 Index.razor 文件，界面应用的是 MASA Blazor

@page "/"
@using Masa.BuildingBlocks.Storage.ObjectStorage;
@using MediaPickSample.Service;

<MCard Color="#FFFFFF" Class="mx-auto rounded-3 mt-3" Elevation="0">
    <MCardText>
        <div class="d-flex" style="flex-wrap: wrap">
            @if (_phoneDictionary.Any())
            {@foreach (var phone in _phoneDictionary)
                {
                    <div style="position: relative; height: 90px; width: 90px;" class="mr-2 mb-2">
                        <MImage Src="@phone.Value" AspectRatio="1" Class="grey lighten-2">
                            <PlaceholderContent>
                                <MRow Class="fill-height" Align="@AlignTypes.Center" Justify="@JustifyTypes.Center">
                                    <MProgressCircular Indeterminate></MProgressCircular>
                                </MRow>
                            </PlaceholderContent>
                        </MImage>
                        <MButton Small Icon Tile Style="position: absolute; top: 0; right: 0; background: #000000; opacity: 0.5;" Dark OnClick="() => RemoveItem(phone.Key)">
                            <MIcon>
                                mdi-close
                            </MIcon>
                        </MButton>
                    </div>
                }
            }
            <MBottomSheet>
                <ActivatorContent>
                    <MButton XLarge Icon Style="background: #F7F8FA;border-radius: 2px; height:80px;width:80px;" @attributes="@context.Attrs">
                        <MIcon XLarge Color="#D8D8D8">mdi-camera</MIcon>
                    </MButton>
                </ActivatorContent>
                <ChildContent>
                    <MCard>
                        <MList>
                            <MListItem OnClick="GetImageAsync1"><MListItemContent><MListItemTitle>Maui-MediaPicker</MListItemTitle></MListItemContent></MListItem>
                            <MListItem OnClick="GetImageAsync2"><MListItemContent><MListItemTitle>Maui-FilePicker</MListItemTitle></MListItemContent></MListItem>
                            <MListItem OnClick="GetImageAsync3"><MListItemContent><MListItemTitle>Intent</MListItemTitle></MListItemContent></MListItem>
                        </MList>
                    </MCard>
                </ChildContent>
            </MBottomSheet>
        </div>
    </MCardText>
</MCard>
@code {[Inject]
    private IPhotoPickerService _photoPickerService {get; set;}
    [Inject]
    private IClient _client {get; set;}
    private Dictionary<string, string> _phoneDictionary {get; set;} = new Dictionary<string, string>();

    private async Task GetImageAsync1()
    {...}
    private async Task GetImageAsync2()
    {...}
    private async Task GetImageAsync3()
    {var photoDic = await _photoPickerService.GetImageAsync3();
        foreach (var photo in photoDic)
        {var fileUrl = await UploadImageAsync(photo.Value, Path.GetExtension(photo.Key));
            _phoneDictionary.Add(photo.Key, fileUrl);
        }
    }
    private void RemoveItem(string key)
    {_phoneDictionary.Remove(key);
    }

    private async Task<string> UploadImageAsync(string fileBase64, string fileExtension)
    {byte[] fileBytes = Convert.FromBase64String(fileBase64);
        var newFileName = $"{Guid.NewGuid() + fileExtension}";
        var newFileFullPath = $"images/xxx/xxx/{newFileName}";
        using (var fileStream = new MemoryStream(fileBytes))
        {
            try
            {await InvokeAsync(StateHasChanged);

                await _client.PutObjectAsync("xxx", newFileFullPath, fileStream);

                return $"https://img-cdn.xxx.cn/{newFileFullPath}";
            }
            catch (Exception ex)
            {if (ex.Message.Contains("x-oss-hash-crc64ecma"))
                {return $"https://img-cdn.xxx.cn/{newFileFullPath}";
                }
                else
                {return string.Empty;}
            }
        }
    }
}

代码比较简单，不过多介绍，这里的 UploadImageAsync 办法应用的是 Masa.BuildingBlocks.Storage 提供的 SDK 实现上传到阿里云存储。
不要遗记在 MauiProgram.cs 增加依赖注入

#if ANDROID
            builder.Services.AddSingleton<IPhotoPickerService, AndroidPhotoPickerService>();
#endif

在 AndroidManifest.xml 增加必要的权限 -android.permission.READ_EXTERNAL_STORAG，并增加android:usesCleartextTraffic=”true”（上传阿里云应用）

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:usesCleartextTraffic="true"  android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

</manifest>

三、演示成果

下一篇咱们介绍另外一种实现形式。

如果你对咱们的 MASA Framework 感兴趣，无论是代码奉献、应用、提 Issue，欢送分割咱们

WeChat：MasaStackTechOps
QQ：7424099