如何在 SwiftUI 中实现音频图表

这篇具有很好参考价值的文章主要介绍了如何在 SwiftUI 中实现音频图表。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如何在 SwiftUI 中实现音频图表,实战,# Swift 集,swiftui,音视频,ios

前言

在可访问性方面,图表是复杂的事物之一。iOS 15 引入了一项名为“音频图表”的新功能。

下面我们将学习如何通过使用 accessibilityChartDescriptor 视图修饰符为任何 SwiftUI 视图构建音频表示,呈现类似自定义条形图视图或图像的图表。

DataPoint 结构体

让我们从在 SwiftUI 中构建一个简单的条形图视图开始,该视图使用垂直条形显示一组数据点。

struct DataPoint: Identifiable {
    let id = UUID()
    let label: String
    let value: Double
    let color: Color
}

在这里,我们有一个 DataPoint 结构,用于描述条形图视图中的条形。它具有 id、标签、数值和填充颜色。

BarChartView 结构体

接下来,我们可以定义一个条形图视图,它接受一组 DataPoint 结构体实例并将它们显示出来。

struct BarChartView: View {
    let dataPoints: [DataPoint]

    var body: some View {
        HStack(alignment: .bottom) {
            ForEach(dataPoints) { point in
                VStack {
                    RoundedRectangle(cornerRadius: 8, style: .continuous)
                        .fill(point.color)
                        .frame(height: point.value * 50)
                    Text(point.label)
                }
            }
        }
    }
}

如上例所示,我们有一个 BarChartView,它接收一组 DataPoint 实例并将它们显示为水平堆栈中不同高度的圆角矩形。

ContentView 结构体

我们能够在 SwiftUI 中轻松构建条形图视图。接下来让我们尝试使用带有示例数据的新 BarChartView

struct ContentView: View {
    @State private var dataPoints = [
        DataPoint(label: "1", value: 3, color: .red),
        DataPoint(label: "2", value: 5, color: .blue),
        DataPoint(label: "3", value: 2, color: .red),
        DataPoint(label: "4", value: 4, color: .blue),
    ]

    var body: some View {
        BarChartView(dataPoints: dataPoints)
            .accessibilityElement()
            .accessibilityLabel("Chart representing some data")
    }
}

在这里,我们创建了一组 DataPoint 实例的示例数组,并将其传递给 BarChartView。我们还为图表创建了一个可访问元素,并禁用了其子元素的可访问性信息。为了改进图表视图的可访问性体验,我们还添加了可访问性标签。

最后,我们可以开始为我们的条形图视图实现音频图表功能。音频图表可以通过旋钮菜单获得。要使用旋钮,请在 iOS 设备的屏幕上旋转两个手指,就像您在拨盘。VoiceOver 会说出第一个旋钮选项。继续旋转手指以听到更多选项。松开手指选择音频图表。然后在屏幕上上下滑动手指以导航。

音频图表允许用户使用音频组件理解和解释图表数据。VoiceOver 在移动到图表视图中的条形时播放具有不同音调的声音。VoiceOver 对于更大的值使用高音调,对于较小的值使用低音调。这些音调代表数组中的数据。

实现协议

现在,我们可以讨论在 BarChartView 中实现此功能的方法。首先,我们必须创建一个符合 AXChartDescriptorRepresentable 协议的类型。AXChartDescriptorRepresentable 协议只有一个要求,即创建 AXChartDescriptor 类型的实例。AXChartDescriptor 类型的实例表示我们图表中的数据,以 VoiceOver 可以理解和交互的格式呈现。

extension ContentView: AXChartDescriptorRepresentable {
    func makeChartDescriptor() -> AXChartDescriptor {
        let xAxis = AXCategoricalDataAxisDescriptor(
            title: "Labels",
            categoryOrder: dataPoints.map(\.label)
        )

        let min = dataPoints.map(\.value).min() ?? 0.0
        let max = dataPoints.map(\.value).max() ?? 0.0

        let yAxis = AXNumericDataAxisDescriptor(
            title: "Values",
            range: min...max,
            gridlinePositions: []
        ) { value in "\(value) points" }

        let series = AXDataSeriesDescriptor(
            name: "",
            isContinuous: false,
            dataPoints: dataPoints.map {
                .init(x: $0.label, y: $0.value)
            }
        )

        return AXChartDescriptor(
            title: "Chart representing some data",
            summary: nil,
            xAxis: xAxis,
            yAxis: yAxis,
            additionalAxes: [],
            series: [series]
        )
    }
}

我们所需做的就是符合 AXChartDescriptorRepresentable 协议,并添加 makeChartDescriptor 函数,该函数返回 AXChartDescriptor 的实例。

首先,我们通过使用 AXCategoricalDataAxisDescriptorAXNumericDataAxisDescriptor 类型定义 X 轴和 Y 轴。我们希望在 X 轴上使用字符串标签,这就是为什么我们使用 AXCategoricalDataAxisDescriptor 类型的原因。在线图的情况下,我们将在两个轴上都使用 AXNumericDataAxisDescriptor 类型。

实现线图

接下来,我们使用 AXDataSeriesDescriptor 类型定义图表中的点。有一个 isContinuous 参数,允许我们定义不同的图表样式。例如,对于条形图,它应该是 false,而对于线图,它应该是 true。

struct ContentView: View {
    @State private var dataPoints = [
        DataPoint(label: "1", value: 3, color: .red),
        DataPoint(label: "2", value: 5, color: .blue),
        DataPoint(label: "3", value: 2, color: .red),
        DataPoint(label: "4", value: 4, color: .blue),
    ]

    var body: some View {
        BarChartView(dataPoints: dataPoints)
            .accessibilityElement()
            .accessibilityLabel("Chart representing some data")
            .accessibilityChartDescriptor(self)
    }
}

作为最后一步,我们使用 accessibilityChartDescriptor 视图修饰符将符合 AXChartDescriptorRepresentable 协议的实例设置为描述我们图表的实例。

示例截图:

如何在 SwiftUI 中实现音频图表,实战,# Swift 集,swiftui,音视频,ios

总结

音频图表功能对于视力受损的用户来说是一项重大改进。音频图表功能的好处是,可以将其用于任何您想要的视图,甚至包括图像视图。只需创建 AXChartDescriptor 类型的实例。文章来源地址https://www.toymoban.com/news/detail-813821.html

到了这里,关于如何在 SwiftUI 中实现音频图表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SwiftUI Swift CoreData 计算某实体某属性总和

    有一个名为 Item 的实体,它有一个名为 amount 的 Double 属性,向你的 View 添加一个计算属性: 熊猫小账本 一个简洁的记账 App,用于记录日常消费开支收入,使用 iCloud 保存同步数据。 支持备注,自定义时间偶尔忘记记账也没关系。 搜索历史记账,支持分类、金额、备注。 启

    2024年02月07日
    浏览(40)
  • iOS 17(SwiftUI 5.0)带来的图表(Charts)新类型:“大饼”与“甜甜圈”

    WWDC 2023 为我们带来了 iOS 17,也为我们带来了 SwiftUI 5.0。 在 SwiftUI 新版中,Apple 增加了很多重磅功能,也对原有功能做了大幅度升级。 对于 Charts 框架, 新增了饼图(Pie)类型并且加入了图表元素的原生选择功能。 在本篇博文中,就让我们一起来看看 SwiftUI 5.0 中这些激动

    2024年02月08日
    浏览(50)
  • 如何在 SwiftUI 中配置 SwiftData

    在 WWDC 2023 上,Apple 宣布了一个备受期待的新持久性刷新,以一种新的框架形式出现:SwiftData。SwiftData 从 iOS 17 开始提供,允许使用 Swift 类型对应用程序的持久性数据进行建模,并以类型安全和声明性的方式执行 CRUD 操作。 在本文中,将展示如何配置 SwiftData 用于一个 Swift

    2024年02月13日
    浏览(50)
  • 关于iOS:如何使用SwiftUI调整图片大小?

    我在Assets.xcassets中拥有很大的形象。 如何使用SwiftUI调整图像大小以缩小图像? 我试图设置框架,但不起作用: 1 2 Image(room.thumbnailImage)     .frame(width: 32.0, height: 32.0) 在Image上应用任何大小修改之前,应使用.resizable()。 1 2 Image(room.thumbnailImage).resizable() .frame(width: 32.0, height: 3

    2024年02月05日
    浏览(42)
  • 如何在 SwiftUI 中使用 AccessibilityCustomContentKey 修饰符

    SwiftUI 3 发布了许多新的辅助功能 API,我们可以利用这些 API 以轻松的方式显著提高用户体验。本篇文章来聊聊另一个新的 API,我们可以使用 SwiftUI 中的新 accessibilityCustomContent 视图修饰符提供自定义的辅助功能内容。 让我们从一个简单的示例开始,定义 User 结构体以及呈现

    2024年01月15日
    浏览(35)
  • 如何在 SwiftUI 中使用 Touch ID 和 Face ID?

    需要向 Info.plist 文件中添加一个配置,向用户说明为什么要访问 添加 Privacy - Face ID Usage Description 并为其赋予值 $(PRODUCT_NAME) need Touch Id or Face ID permission for app lock 熊猫小账本 一个简洁的记账 App,用于记录日常消费开支收入,使用 iCloud 保存同步数据。 支持备注,自定义时间偶

    2024年02月16日
    浏览(37)
  • 如何将自定义字体添加到 iOS 应用程序(SwiftUI + 得意黑)

    Xcode Version 14.3 (14E222b) SwiftUI 得意黑 Smiley Sans https://github.com/atelier-anchor/smiley-sans/releases https://sarunw.com/posts/how-to-add-custom-fonts-to-ios-app/ 熊猫小账本 一个简洁的记账 App,用于记录日常消费开支收入,使用 iCloud 保存同步数据。 支持备注,自定义时间偶尔忘记记账也没关系。 搜索

    2024年02月13日
    浏览(61)
  • SwiftUI——如何使用新的NavigationStack和NavigationSplitView(如何页面跳转2.0以及如何制作侧栏)

    从 iOS 16 开始,苹果开始弃用原先的 NavigationView ,以后会逐渐完全淘汰掉。现在开始使用 NavigationStack 和 NavigationSplitView 。 NavigationStack 的效果和原本的 NavigationView 一样,而 NavigationSplitView 则和现在 iPadOS 上的 NavigationView 效果一样。 最近在 iPadOS 上面使用 NavigationView ,内容会

    2024年02月04日
    浏览(34)
  • SwiftUI 如何保证 Text 中字符数量相等的字符串显示宽度一定相同?

    在 SwiftUI 中我们往往需要将内容相似的字符串展列出来给用户比较,这些字符串内容各有不同但字符数量始终是相等的,我们希望它们的显示宽度始终保持一致: 如上图所示:即使是等宽字符组成的字符串在字符数量相等时它们的显示宽度仍然可能不一致。但演示中最底部的

    2024年01月17日
    浏览(41)
  • 【SwiftUI模块】0060、SwiftUI基于Firebase搭建一个类似InstagramApp 3/7部分-搭建TabBar

    SwiftUI模块系列 - 已更新60篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI、SwiftUI4.0、Instagram、Firebase 运行环境: SwiftUI4.0 + Xcode14 + MacOS12.6 + iPhone Simulator iPhone 14 Pro Max 使用SwiftUI基于Firebase搭建一个类似InstagramApp 3/7部分-搭建TabBar - 效果 一、运行效果 二、项目结构图

    2024年02月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包