SwiftUI之深入解析如何使用accessibilityChartDescriptor视图修饰符为视图构建音频图表

一、DataPoint 结构体

  • 在 SwiftUI 中构建一个简单的条形图视图开始,该视图使用垂直条形显示一组数据点。如下所示,有一个 DataPoint 结构,用于描述条形图视图中的条形,它具有 id、标签、数值和填充颜色:
struct DataPoint: Identifiable {let id = UUID()let label: Stringlet value: Doublelet color: Color
}

二、BarChartView 结构体

  • 接下来,可以定义一个条形图视图,它接受一组 DataPoint 结构体实例并将它们显示出来,如下所示,有一个 BarChartView,它接收一组 DataPoint 实例并将它们显示为水平堆栈中不同高度的圆角矩形:
struct BarChartView: View {let dataPoints: [DataPoint]var body: some View {HStack(alignment: .bottom) {ForEach(dataPoints) { point inVStack {RoundedRectangle(cornerRadius: 8, style: .continuous).fill(point.color).frame(height: point.value * 50)Text(point.label)}}}}
}

三、ContentView 结构体

  • 在 SwiftUI 中可以轻松构建条形图视图,接下来尝试使用带有示例数据的新 BarChartView,如下所示,创建了一组 DataPoint 实例的示例数组,并将其传递给 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")}
}
  • 最后,可以开始为条形图视图实现音频图表功能,音频图表可以通过旋钮菜单获得。要使用旋钮,请在 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.0let max = dataPoints.map(\.value).max() ?? 0.0let 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 的实例。首先,通过使用 AXCategoricalDataAxisDescriptor 和 AXNumericDataAxisDescriptor 类型定义 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 协议的实例设置为描述图表的实例。结果如下:

在这里插入图片描述

六、总结

  • 音频图表功能对于视力受损的用户来说是一项重大改进。音频图表功能的好处是,可以将其用于任何想要的视图,甚至包括图像视图,只需创建 AXChartDescriptor 类型的实例。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Notepad++ v7.7.1 安装及添加插件

1、notepad_v7.7.1.zip npp.7.7.1.Installer.x64.exe npp.7.7.1.Installer.x86.exe notepad_v7.7.1.ziphttps://www.123pan.com/s/VTMXjv-X6H6v.html 2、notepad插件包_64bit_4.zip ComparePlugin ---->文件对比插件 ComparePlugin.dllNppFTP ---->FTP、FTPES和SFTP …

Mac上安装 Node.js 的版本管理工具 n,以及 n 使用,的使用

安装 最近刚更换 Mac 本进行项目的开发,刚上手 Mac 本还不是很熟练,需要安装 Node.js 的包管理工具 在 Windows 上我是实用的 nvm 来管理的 Node 版本,但是我尝试下载 Nvm ,发现下载安装后的 Nvm 无法使用,提示 “Th…

HDU - 2063 过山车(Java JS Python C)

题目来源 Problem - 2063 (hdu.edu.cn) 题目描述 RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了。 可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个男生做partner和她同坐…

git打tag以及拉取tag

场景:某次git代码发布后定版记录,将发版所在的commit时候代码打上tag记录,方便后期切换到对应tag代码位置。 查看所有tag名 git tag// 1.1.0 // 1.0.0查看tag和描述 git tag -l -n//1.0.0 云监管一期项目完结 //1.1.0 …

c语言-指针练习题

目录 前言一、题目一二、题目二总结 前言 为了巩固c语言中关于指针知识点的掌握,本篇文章记录关于指针的练习题。 一、题目一 有n个整数,使前面各数顺序往后移动m个位置,最后m个数变成最前面的m个数 写一函数实现以上功能,在主函…

什么是谐波减速机?日本Harmonic哈默纳科谐波减速机有哪些优点?

一、什么是谐波减速机? 谐波减速装置最早期被叫做“strain wave gearing”,直译过来为“应变波齿轮”。其后被HarmonicDrive Systems 公司大规模商业实用化后,经过二次翻译后,中文名称才将其称为“谐波齿轮传动”。 谐波减速机是…

Java后端开发——Ajax、jQuery和JSON

Java后端开发——Ajax、jQuery和JSON 概述 Ajax全称是Asynchronous Javascript and XML,即异步的JavaScript和 XML。Ajax是一种Web应用技术,该技术是在JavaScript、DOM、服务器配合下,实现浏览器向服务器发送异步请求。 Ajax异步请求方式不…

Elasticsearch 8.X进阶搜索之“图搜图”实战

Elasticsearch 8.X “图搜图”实战 1、什么是图搜图? "图搜图"指的是通过图像搜索的一种方法,用户可以通过上传一张图片,搜索引擎会返回类似或者相关的图片结果。这种搜索方式不需要用户输入文字,而是通过比较图片的视…

查看进程对应的路径查看端口号对应的进程ubuntu 安装ssh共享WiFi设置MyBatis 使用map类型作为参数,复杂查询(导出数据)

Linux 查询当前进程所在的路径 top 命令查询相应的进程号pid ps -ef |grep 进程名 lsof -I:端口号 netstat -anp|grep 端口号 cd /proc/进程id cwd 进程运行目录 exe 执行程序的绝对路径 cmdline 程序运行时输入的命令行命令 environ 记录了进程运行时的环境变量 fd 目录下是进…

小梅哥Xilinx FPGA学习笔记20——无源蜂鸣器驱动设计与验证(音乐发生器设计)

目录 一:章节导读 二:无源蜂鸣器驱动原理 三:PWM 发生器模块设计 3.1 PWM 发生器模块框图 3.2 PWM 发生器模块接口功能描述 3.3 PWM波生成设计文件代码 3.4 测试仿真文件 3.5 测试仿真结果 3.6 板级调试与验证之顶层文件设计 四&am…

支持 input 函数的在线 python 运行环境 - 基于队列

支持 input 函数的在线 python 运行环境 - 基于队列 思路两次用户输入三次用户输入 实现前端使用 vue element uiWindows 环境的执行器子进程需要执行的代码 代码仓库参考 本文提供了一种方式来实现支持 input 函数,即支持用户输的在线 python 运行环境。效果如下图…

UE5.1_UMG序列帧动画制作

UE5.1_UMG序列帧动画制作 UMG序列帧动画制作相对比较简单,不像视频帧需要创建媒体播放器那么复杂,以下简要说明: 1. 事件函数 2. 准备序列帧装入数组 3. 构造调用事件函数 4. 预览 序列帧UMG0105 5. 完成!按需配置即可。