允许/阻止标签的可访问性字体大小调整

Posted 2023-04-14

【中文标题】允许/阻止标签的可访问性字体大小调整

【英文标题】：Allow/prevent accessibility font resizing of a Label

【发布时间】：2019-10-25 19:04:00

【问题描述】：

我正在一个 NativeScript-Vue 应用程序中实现字体大小的可访问性。 我想允许或阻止通过 android 和 ios 的 XML 属性调整标签大小，但平台上的行为和实现是不同的。

Android 默认情况下，所有标签都会缩放。如果我希望标签不调整大小，我需要在loaded 事件中调用函数setTextSize，在this solution 之后。

<Label text="Not resizable" @loaded="$androidFixedLabelSize($event, 70)" />

Vue.prototype.$androidFixedLabelSize = function( object , fontSize) 
    if (object.android)
    object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));

iOS 默认情况下不缩放标签。要调整标签大小，我需要使用nativescript-accessibility-ext 插件并添加属性accessibilityAdjustsFontSize。

<Label text="Resizable" accessibilityAdjustsFontSize="true" />

必须为固定的 Android 添加一个属性，而为可调整大小的 iOS 添加一个属性有点麻烦。

我正在考虑让所有标签默认调整大小，并指定我是否希望不通过指令或属性调整大小。 我可以通过自定义指令来实现这一点吗？还是别的什么？

---

更新

我能够通过指令在没有硬编码字体大小的情况下防止在 Android 上调整大小，但有一个问题：update 仅针对少数标签触发。 el.nativeView.android 中的 bind 和 inserted 挂钩未定义。

Vue.directive("noresize", 
    update: el => 
        if (el.nativeView.android) 
            el.nativeView.android.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, el.nativeView.fontSize);
         else 
            // iOS code
        
    
);

在 iOS 上，我想简单地设置 accessibilityAdjustsFontSize="false"，但这意味着它默认为 true。

那么接下来的问题是：如何在 iOS 上的所有 Label 组件上设置accessibilityAdjustsFontSize="true"？

【问题讨论】：

您当然可以使用自定义指令来完成，我相信这就是选择 Vue 或 Angular 等框架而不是 NativeScript Core 的全部原因。但是屏幕上有 120 个标签？我希望您了解 ListView 组件，如果可能的话，可以将它用于长列表。另外仅供参考，您可以通过简单地在 CSS 中以 px 指定字体大小来使用 px 单位（字体大小：15px）。

使用自定义指令，我在挂钩中访问的 Label nativeView 对象没有 setTextSize（此外，android 或 ios 属性在 update 挂钩之前显示为未定义）。 ListView 不符合我的 120 最大标签页（最坏的情况）。我没有使用简单的标签进行渲染延迟。最后，通过setTextSize 设置字体大小是我发现的唯一避免自动缩放的方法。

您可能没有使用正确的属性访问它。您可以分享该指令的 Playground 示例吗？在我的应用程序中也有自动缩放支持，我不必在 Android 上做任何事情，不完全确定为什么需要使用 px。 DIP 单元（默认）仍然很好。对于 iOS，我采用了插件逻辑，但在字体级别上实现了相同的逻辑，因此它会针对所有组件自动缩放。

我正在使用setTextSize 和基于this solution 的像素，这是我发现的唯一一种防止自动缩放的解决方法。我没有深入检查代码。仔细观察Android documentation，我发现可以使用 DIP

抱歉，您是要避免自动缩放还是实现它？因为在 iOS 中它默认不处理，如果你想支持自动缩放，你可以使用该插件。

【参考方案1】：

感谢@nota/nativescript-accessibility-ext 的开发者 Morten Sjøgren，我能够添加一个全局事件。可访问性大小调整现在应用于所有 Label 组件，除非属性 noResize 为 true。

app.js

import '@nota/nativescript-accessibility-ext';
import  Label  from 'tns-core-modules/ui/label';

// code

Label.on(Label.loadedEvent, ( object ) => 
    if (object.noResize) 
        if (object.android) 
            object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, object.fontSize);
        
     else 
        object.accessibilityAdjustsFontSize = "true";
    
 );

<Label text="Don't resize" noResize="true" />