MASA MAUI Plugin （八）Android相册多选照片（Intent 方式）-六虎

背景

MAUI的呈现，赋予了广阔.Net开发者开发多渠道应用的能力，MAUI 是Xamarin.Forms演化而来，可是比较Xamarin性能更好，可扩展性更强，结构更简略。可是MAUI关于渠道相关的完成并不完好。所以MASA团队开展了一个实验性项目，意在对微软MAUI的补充和扩展@

项目地址github.com/BlazorCompo…

每个功用都有独自的demo演示项目，考虑到app安装文件体积（虽然MAUI已经集成裁剪功用，可是该功用关于代码自身有影响），届时每一个功用都会以独自的nuget包的形式供给，便利测验，现在项目才刚刚开端，可是相信很快就会有能够交付的内容啦。

前语

本系列文章面向移动开发小白，从零开端进行渠道相关功用开发，演示怎么参阅渠道的官方文档运用MAUI技能来开发相应功用。

介绍

项目中有需求从相册多选图片的需求，MAUI供给的MediaPicker.PickPhotoAsync无多选功用，FilePicker.PickMultipleAsync虽然能够完成多选，可是多选文件需求长按，并且没有预览和回来按钮，用户交互作用不好。作为安卓开发小白，自己现在找到两种UI交互杰出并且不需求定制选取界面的办法和大家共享。

一、MAUI完成办法演示作用

MediaPicker.Default.PickPhotoAsync 作用

MASA MAUI Plugin （八）Android相册多选照片（Intent 方式）

FilePicker.Default.PickMultipleAsync 作用

二、完成办法

思路

developer.android.google.cn/about/versi…

咱们参阅一下官方文档，下面为挑选多张相片或者多个视频的示例

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的内容比较多，能够参阅官方文档，这儿咱们简略理解它是一个内容供给程序即可

developer.android.google.cn/guide/topic…

下面开端完成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类型参阅官方文档

developer.android.google.cn/guide/compo…

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

developer.android.com/reference/a…

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

MASA MAUI Plugin （八）Android相册多选照片（Intent 方式）

背景

前语

介绍

一、MAUI完成办法演示作用

二、完成办法

思路

编写完成代码

编写演示代码

三、演示作用

相关文章

哪些指标可以揭示经济情况？可以用来指导投资？

Android Drawable代码编写的新姿势

GPT4 提问技巧五：借助外部工具

狂飙！Android 14 第一个预览版已发布～

作者信息