背景
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 作用
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
