Allow/prevent 标签的无障碍字体大小调整
Allow/prevent accessibility font resizing of a Label
我正在 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
仅针对少数标签触发。 bind
和 inserted
中的 el.nativeView.android
挂钩未定义。
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"
,但这意味着它默认为真。
所以下一个问题是:如何在 iOS 上的所有 Label 组件上设置 accessibilityAdjustsFontSize="true"
?
感谢 @nota/nativescript-accessibility-ext 的开发者 Morten Sjøgren,我能够添加一个全局事件。辅助功能大小调整现在应用于所有 Label 组件,除非属性 noResize
为真。
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" />
我正在 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
仅针对少数标签触发。 bind
和 inserted
中的 el.nativeView.android
挂钩未定义。
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"
,但这意味着它默认为真。
所以下一个问题是:如何在 iOS 上的所有 Label 组件上设置 accessibilityAdjustsFontSize="true"
?
感谢 @nota/nativescript-accessibility-ext 的开发者 Morten Sjøgren,我能够添加一个全局事件。辅助功能大小调整现在应用于所有 Label 组件,除非属性 noResize
为真。
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" />