MASA MAUI Plugin (八)Android相册多选照片(Intent 方式)

news2024/11/28 18:57:15

背景

MAUI的出现,赋予了广大.Net开发者开发多平台应用的能力,MAUI 是Xamarin.Forms演变而来,但是相比Xamarin性能更好,可扩展性更强,结构更简单。但是MAUI对于平台相关的实现并不完整。所以MASA团队开展了一个实验性项目,意在对微软MAUI的补充和扩展

项目地址https://github.com/BlazorComponent/MASA.Blazor/tree/feature/Maui/src/Masa.Blazor.Maui.Plugin

每个功能都有单独的demo演示项目,考虑到app安装文件体积(虽然MAUI已经集成裁剪功能,但是该功能对于代码本身有影响),届时每一个功能都会以单独的nuget包的形式提供,方便测试,现在项目才刚刚开始,但是相信很快就会有可以交付的内容啦。

前言

本系列文章面向移动开发小白,从零开始进行平台相关功能开发,演示如何参考平台的官方文档使用MAUI技术来开发相应功能。

介绍

项目中有需要从相册多选图片的需求,MAUI提供的MediaPicker.PickPhotoAsync无多选功能,FilePicker.PickMultipleAsync虽然可以实现多选,但是多选文件需要长按,而且没有预览和返回按钮,用户交互效果不好。作为安卓开发小白,本人目前找到两种UI交互良好而且不需要定制选取界面的方法和大家分享。

一、MAUI实现方式演示效果

MediaPicker.Default.PickPhotoAsync 效果
在这里插入图片描述
FilePicker.Default.PickMultipleAsync 效果

在这里插入图片描述

二、实现方式

思路

https://developer.android.google.cn/about/versions/13/features/photopicker?hl=zh-cn

我们参考一下官方文档,下面为选择多张照片或者多个视频的示例

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.google.cn/guide/topics/providers/content-provider-basics?hl=zh-cn

下面开始实现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.google.cn/guide/components/intents-common?hl=zh-cn

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

https://developer.android.com/reference/android/content/Intent#setDataAndType(android.net.Uri,%20java.lang.String)

intent.PutExtra 设置可以多选
然后就可以通过MainActivity的静态实例InstanceStartActivityForResult方法启动这个intent了,我们这里通过Intent.CreateChooserIntent设置了一个标题,并传递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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/364119.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录NO49 | 动态规划 _LeetCode1143.最长公共子序列 1035.不相交的线 53. 最大子序和

动态规划 _LeetCode1143.最长公共子序列 1035.不相交的线 53. 最大子序和今天继续子序列问题&#xff01; 1143.最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符…

docker全解

目录说明docker简介为什么是docker容器与虚拟机比较容器发展简史传统虚拟机技术容器虚拟化技术docker能干什么带来技术职级的变化开发/运维&#xff08;Devops)新一代开发工程师Docker应用场景why docker&#xff1f;docker的优势docker和dockerHub官网Docker安装CentOS Docker…

10 种 Spring事务失效场景

10 种 Spring事务失效场景 1.概述 Spring针对Java Transaction API (JTA)、JDBC、Hibernate和Java Persistence API(JPA)等事务 API&#xff0c;实现了一致的编程模型&#xff0c;而Spring的声明式事务功能更是提供了极其方便的事务配置方式&#xff0c;配合Spring Boot的自动…

supervisor看守进程

supervisor可以用于看守正在运行的服务&#xff0c;如果服务以外停止&#xff0c;他会在设置的时间间隔内重新启动该服务。 本测试使用的系统是TencentOS3.1. 安装supervisor最简单方法是使用yum。 yum install supervisor supervisor需要python3支持&#xff0c;因此请先确…

【Android玩机】跟大家聊聊面具Magisk的使用(安装、隐藏)

目录:1、Magisk中文网2、隐藏面具和Root&#xff08;一共3种方法&#xff09;1、Magisk中文网 &#xff08;1&#xff09;首先Magisk有一个中文网&#xff0c;对新手非常友好 &#xff08;2&#xff09;这网站里面主要包含&#xff1a;6 部分 &#xff08;3&#xff09;按照他给…

c++常用stl算法

1、头文件 这些算法通常包含在头文件<algorithm> <functional> <numeric>中。 2、常用遍历算法 for_each(v.begin(),v.end(), 元素处理函数/仿函数) 注意&#xff1a;在使用transform转存时&#xff0c;目标容器需要提取开辟合适的空间。 void printfunc(…

【C++】类和对象入门必知

面向过程和面向对象的初步认识类的引入类的定义类的访问限定符封装类的作用域类的实例化类对象模型this指针C语言和C实现Stack的对比面向过程和面向对象的初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解…

【归一化小记】,batchnorm,layernorm,IN,GN,分布式归一化...

BatchNorm 最早在全连接网络中被提出&#xff0c;对每个神经元的输入做归一化。扩展到 CNN 中&#xff0c;就是对每个卷积核的输入做归一化&#xff0c;或者说在 channel 之外的所有维度做归一化。 BN 带来的好处有很多&#xff0c;这里简单列举几个&#xff1a; 防止过拟合&am…

【HTML】HTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )

文章目录一、textarea 文本域控件二、select 下拉列表控件一、textarea 文本域控件 textarea 文本域 控件 是 多行文本输入框 , 标签语法格式如下 : <textarea cols"每行文字字符数" rows"文本行数">多行文本内容 </textarea>实际开发中 并不…

聚观早报 | 嘀嗒出行重启赴港IPO;饿了么到店业务将与高德合并

点击蓝字 / 关注我们今日要闻&#xff1a;嘀嗒出行重启赴港 IPO&#xff1b;饿了么到店业务将与高德合并&#xff1b;美团香港骑手月收入高达3.5万港元&#xff1b;腾讯或引进Meta旗下VR眼镜Quest 2&#xff1b;苹果将阻止用户免费装开测版iOS 17 嘀嗒出行重启赴港 IPO 港交所文…

Java企业开发学习笔记(2)利用组件注解符精简Spring配置文件

该文章主要为完成实训任务&#xff0c;详细实现过程及结果见【http://t.csdn.cn/iSeSH】 文章目录一、 利用组件注解符精简Spring配置文件1.1 创建新包1.2 复制四个类1.3 修改杀龙任务类1.4 修改救美任务类1.5 修改勇敢骑士类1.6 修改救美骑士类1.7 创建Spring配置文件1.8 创建…

【数据库】redis数据持久化

目录 数据持久化 一&#xff0c; RDB 1&#xff0c; 什么是RDB 2&#xff0c;持久化流程 3&#xff0c; 相关配置 案例演示&#xff1a; 4&#xff0c; 备份和恢复 1、备份 2、恢复 3&#xff0c;优势 4&#xff0c; 劣势 二&#xff0c;AOF 1&#xff0c;什么是A…

Java笔记026-集合/数组、Collection接口、ArrayList、Vector、LinkedList

集合集合的理解和好处保存多个数据使用的是数组&#xff0c;分析数组的弊端数组1、长度开始必须指定&#xff0c;而且一旦指定&#xff0c;不能更改2、保存的必须为同一类型的元素3、使用数组进行增加/删除元素的示意代码-比较麻烦Person数组扩容示意代码Person[] pers new Pe…

ChatGPT三个关键技术

情景学习&#xff08;In-context learning&#xff09; 对于一些LLM没有见过的新任务&#xff0c;只需要设计一些任务的语言描述&#xff0c;并给出几个任务实例&#xff0c;作为模型的输入&#xff0c;即可让模型从给定的情景中学习新任务并给出满意的回答结果。这种训练方式能…

论文笔记:How transferable are features in deep neural networks? 2014年NIP文章

文章目录一、背景介绍二、方法介绍三、实验论证四、结论五、感想参考文献一、背景介绍 1.问题介绍&#xff1a; 许多在自然图像上训练的深度神经网络都表现出一个奇怪的共同现象&#xff1a;在第一层&#xff0c;它们学习类似于Gabor过滤器和color blobs的特征。这样的第一层特…

c++提高篇——list容器

一、基本概念 功能:将数据进行链式存储 链表&#xff08;(list)是一种物理存储单元上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接实现的&#xff0c;链表由一系列结点组成。 结点的组成:一个是存储数据元素的数据域&#xff0c;另一个是存储下一个…

3DVR营销是什么?是否成为市场热门?

在当今市场经济环境中&#xff0c;营销对于在企业发展中的作用至关重要。市场是企业发展的战场&#xff0c;谁能在市场营销方面做得更好&#xff0c;就能够吸引公域平台流量、占据主流市场、开拓新局面从而稳定现有规模。这将确保企业不被市场淘汰&#xff0c;而是能够可持续性…

CSS(配合html的网页编程)

续上一篇博客,CSS是前端三大将中其中的一位,主要负责前端的皮,也就是负责html的装饰.一、基本语法规则也就是:选择器若干属性声明(选中一个元素然然后进行属性声明)CSS代码是放在style标签中,它可以放在head中也可以放在body中 ,可以放到代码的任意位置.color也就是设置想要输入…

如何描述元素与元素间的逻辑关系?

逻辑结构反映的是数据元素之间的关系&#xff0c;它们与数据元素在计算机中的存储位置无关&#xff0c;是数据结构在用户面前所呈现的形式。根据不同的逻辑结构来分&#xff0c;数据结构可分为集合、线性结构、树形结构和图形结构4种形式&#xff0c;接下来分别进行简要介绍。 …

宝塔搭建实战php源码云切程序转码m3u8生程序开源源码

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 今天给大家分享一套php云切片转码的源码&#xff0c;分享自己的视频但是由于视频文件太大&#xff0c;服务器带宽太小&#xff0c;导致分享困难&#xff0c;部署这套系统后&#xff0c;就可以在上传视频后切成ts格…