ExyteMediaPicker 2.2.3

ExyteMediaPicker 2.2.3

×

由 Exyte 维护。

ExyteMediaPicker 2.2.3

     

媒体选择器

可定制的媒体选择器的 SwiftUI 库。

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

特性

  • 照片和视频选择器
  • 单选和多选
  • 全屏视图
  • 实时照片预览和捕捉
  • 完全自定义

MediaPicker 与 PhotosPicker

  • iOS 16 的 PhotosPicker 只提供一个按钮，而我们这个库提供整个视图，这意味着您可以将其构建到自己的屏幕中，并按需进行自定义。
  • PhotosPicker 允许您从图库中选择照片——没有相机。
  • MediaPicker 提供一个默认外观的图库选择器，可以管理相册，并且还有一个拍摄照片/视频的相机视图。

！SPM 命名更改！

SPM 包现在称为 ExyteMediaPicker 而不是 MediaPicker，对此带来的不便深表歉意。

使用方法

  1. 添加一个布尔类型的绑定来控制选择器的显示状态。
  2. 添加 Media 数组来保存选择（[Media]）。
  3. 初始化媒体选择器并按您喜欢的方式显示它——例如，使用 .sheet 修饰符
.sheet(isPresented: $showMediaPicker) {
    MediaPicker(
        isPresented: $showMediaPicker,
        onChange: { medias = $0 }
    )
}

媒体模型

图库将返回一个 Media 结构体数组以供您按需使用。它有以下字段和方法（所有方法都使用 async/await API）

  • type - .image 或 .video
  • duration - .image 为 nil
  • getURL() - 返回媒体 URL（如需则自动存储在临时目录中）
  • getThumbnailURL() - 返回媒体缩略图的 URL（对于图像，直接返回图像本身）
  • getData() - 返回媒体的 Data 表示形式
  • getThumbnailData() - 返回媒体缩略图的 Data 表示形式

模式

此库允许您同时使用照片库和相机

图片网格

默认图片网格屏幕包含包含“完成”和“取消”按钮的标准标题，以及照片和专辑之间的简单切换器。用于基本的即用型选择器（查看示例项目中的默认选择器使用示例）。这可以自定义（参见“初始化 - 视图构建器”部分）

相机

拍摄一张照片后，您将看到其预览和一个小的加号图标，通过触摸它，您可以返回到相机模式并继续拍摄您喜欢的任何数量的照片。完成后，按“完成”，然后您可以滚动查看之前拍摄的所有照片，并在确认您想使用它们之前先使用它们。您拍摄的这些照片的预览屏幕也可以自定义（参见“初始化 - 视图构建器”部分）

初始化 - 必要参数

isPresented - 一个绑定，用于确定选择器是否应该显示
onChange - 一个闭包，每次选择变化时返回所选的媒体

初始化 - 可选视图构建器

您可以通过传递两个视图构建器来向媒体选择器屏幕添加您自己的按钮和其他元素。您可以自定义的第一个屏幕是默认的照片网格视图。传递一个类似这样的 albumSelectionBuilder 闭包以替换标准的一个

MediaPicker(
    isPresented: $isPresented,
    onChange: { selectedMedia = $0 },
    albumSelectionBuilder: { defaultHeaderView, albumSelectionView, isInFullscreen in
        VStack {
            if !isInFullscreen {
                defaultHeaderView
            }
            albumSelectionView
            Spacer()
            footerView
        }
        .background(Color.black)
    }
)

albumSelectionBuilder 为您提供两个视图来使用

  • defaultHeaderView - 带有照片/相册模式切换器的默认外观的 header
  • albumSelectionView - 照片网格本身
  • isInFullscreen - 是否显示全屏照片详细信息屏幕。例如，在全屏模式下隐藏标题。

可以自定义的第二个屏幕是在拍照后看到的屏幕。传递 cameraSelectionBuilder 类似于以下内容

MediaPicker(
    isPresented: $isPresented,
    onChange: { selectedMedia = $0 },
    cameraSelectionBuilder: { addMoreClosure, cancelClosure, cameraSelectionView in
        VStack {
            HStack {
                Spacer()
                Button("Done", action: { isPresented = false })
            }
            cameraSelectionView
            HStack {
                Button("Cancel", action: cancelClosure)
                Spacer()
                Button(action: addMoreClosure) {
                    Text("Take more photos")
                }
            }
        }
    }
)

cameraSelectionBuilder 给您以下参数

  • addMoreClosure - 您可以在这个按钮上调用这个闭包，它将像默认的加号图标在相机选择预览屏幕上那样工作
  • cancelClosure - 如果确认，则显示确认对话框并返回照片网格屏幕
  • cameraSelectionView - 可滑动相机照片预览集合本身

在创建 MediaPicker 时，您可以传递一个、两个或零个这些参数。（参见示例项目中的自定义选择器以获取使用示例）

可用的修饰符

showLiveCameraCell - 在相册网格的左上角显示实时相机视频单元格
mediaSelectionType - 限制显示的媒体类型：.photo，.video 或两者都显示
mediaSelectionStyle - 以显示所选/未选择媒体状态的方式：计数器或简单的勾选标记
mediaSelectionLimit - 允许的最大选择数量，'nil' 表示无限制选择

可用的修饰符 - 过滤

applyFilter((Media) async -> Media?) - 向每个媒体对象传递一个闭包进行单独应用。闭包的返回类型为 Media?：如果想要在图片网格中显示该媒体，则闭包应返回 Media；如果想要排除该媒体，则返回 。应用到每个媒体上的代码可以是异步的（使用 async/await 语法，如示例项目中所示 FilterMediaPicker） applyFilter(([Media]) async -> [Media]) - 与之相同，但将闭包应用于整个媒体数组。也可以用于排序。

可用的修饰符 - 屏幕旋转

如果您的应用限制了屏幕旋转，您可以跳过这一部分。

我们建议锁定 MediaPicker 的方向，因为默认的旋转动画在相机屏幕上看起来不好。目前 SwiftUI 没有提供锁定屏幕方向的方法，因此该库有一个具有 orientationHandler 参数的初始化器 - 该闭包在进入/离开 MediaPicker 内的相机屏幕时被调用。在这个过程中，您需要使用 AppDelegate 来锁定/解锁旋转 - 请参阅示例项目以获取实现方法。

可用的修饰符：管理相册

albums - 用户相册列表（如相册应用中所示），如果您想以不同于 showingDefaultHeader 的方式显示它们。
pickerMode - 如果不打算使用默认标题，请设置此值。可用选项包括
* .photos - 显示默认照片网格
* .albums - 显示包含各个相册预览照片的相册列表
* .album(Album) - 显示单个相册
* .camera - 显示全屏相机遮罩

* .cameraSelection - 显示用相机拍摄的图片预览（请参阅示例项目中的自定义选择器以获取实现方法）

mediaPickerTheme - 颜色设置。示例用法（请参阅 MediaPickerTheme 以获取所有可用设置）

MediaPicker(...)
  .mediaPickerTheme(
      main: .init(
          background: .black
      ),
      selection: .init(
          emptyTint: .white,
          emptyBackground: .black.opacity(0.25),
          selectedTint: Color("CustomPurple")
      )
  )

以下是一个示例，说明如何自定义颜色和元素以创建具有自定义外观的选择器

示例

尝试使用MediaPicker示例

  • 克隆仓库 https://github.com/exyte/MediaPicker.git
  • 在Xcode中打开 Examples/Examples.xcworkspace
  • 运行它！

安装

Swift包管理器

dependencies: [
    .package(url: "https://github.com/exyte/ExyteMediaPicker.git")
]

CocoaPods

pod 'ExyteMediaPicker'

Carthage

github "Exyte/MediaPicker"

需求

  • iOS 15+
  • Xcode 13+

我们的其他开源 SwiftUI 库

PopupView - Toasts and popups library
Grid - 最强大的 Grid 容器
ScalingHeaderScrollView - 带有粘性标题的滚动视图，滚动时标题缩小
AnimatedTabBar - 带有预设动画的 tabbar
Chat - 可完全自定义消息单元格、输入视图和内置媒体选择器的聊天 UI 框架
ConcentricOnboarding - 动画引导流程
FloatingButton - 浮动按钮菜单
ActivityIndicatorView - 一系列动态加载指示器
ProgressIndicatorView - 一系列动态进度指示器
SVGView - SVG 解析器
LiquidSwipe - 液态导航动画