I'm using NativeScript with Angular.
Is there an attribute to specify on Labels/buttons to ignore the font increase due to accessibility settings?
I need a solution for both android and ios.
Thank you!
If anybody interested, I found a workaround of using FormattedString for Labels, this object does not scale.
I just had a look a NativeScript own code and noticed this:
https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/text-base/text-base.android.ts#L216
You could try this:
HTML:
<Label text="Fixed size text" (loaded)="fixedFontSize($event)"></Label>
TypeScript
import { Label } from 'ui/label';
...
fixedFontSize({object}, fontSize = 20) {
const label = <Label>object;
if (label.android) {
label.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}
}
This should lock the fontSize of the label, until the CSS is changed.
Related
First, change the theme of IOS to the light, access the app, and look at the header, and there is a border bottom style in the header.
However, if you change the theme to dark and look at the header, there is no border bottom.
IOS Dark Mode
IOS Light Mode
Is navigation related to the theme of the device?
Example from #react-navigation documentation
Using the operating system preferences
On iOS 13+ and Android 10+, you can get user's preferred color scheme ('dark' or 'light') with the (Appearance API).
Try this example on Snack
import { useColorScheme } from 'react-native';
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from '#react-navigation/native';
export default () => {
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
{/* content */}
</NavigationContainer>
);
};
I am implementing font size accessibility in a NativeScript-Vue app.
I want to allow or prevent Label resizing through an XML attribute for both Android and iOS, but behavior and implementation on the platforms are different.
Android
All labels are scaled by default. If I want a label not to resize, I need to call the function setTextSize in the loaded event, following 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
Labels are not scaled by default. To resize a label, I need to use nativescript-accessibility-ext plugin and add the attribute accessibilityAdjustsFontSize.
<Label text="Resizable" accessibilityAdjustsFontSize="true" />
Having to add one attribute for fixed Android and one for resizable iOS is a bit cumbersome.
I was thinking of having all labels resizable by default, and specify if I want one not to resize through a directive or an attribute.
Can I achieve this through a custom directive? Or something else?
Update
I was able to prevent resizing on Android through a directive without hardcoding font size, but there is a problem: update is triggered only for few labels. el.nativeView.android in bind and inserted hooks is undefined.
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
}
}
});
On iOS, I would like to simply set accessibilityAdjustsFontSize="false", but this implies that it is true by default.
So the next question is: how do I set accessibilityAdjustsFontSize="true" on all Label components on iOS?
Thanks to Morten Sjøgren, developer of #nota/nativescript-accessibility-ext, I was able to add a global event. Accessibility resizing is now applied on all Label components, unless the attribute noResize is 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" />
I'm trying to change the height of the progress component in nativescript like this:
<Progress value="{{ progress }}" maxValue="{{totalTime}}" height="100">
</Progress>
But the height property has no effect. How do I change the height of this component?
You can change the height of ProgressBar using the height property (due to some spcific in the native controls).
However one of the gret advantages of NativeScript is that you have direct access to the native APIs for both iOS and Android. So after some small research here is how I managed to change the default scale (there might be even better approaches - this is one of the shortest I came upon).
TypeScript example:
Use the laoded event to get the reference to your progress bar in the code behind.
<Progress minValue="0" maxValue="100" value="25" loaded="onProgressLoaded"/>
Then in the code behind access the native controls
import { Progress } from 'ui/progress';
import { isAndroid, isIOS } from "platform"
declare let CGAffineTransformMakeScale: any; // or use tns-platform-declarations instead of casting to any
export function onProgressLoaded(args: EventData) {
let progress = <Progress>args.object;
if (isAndroid) {
progress.android.setScaleY(5); // progress.android === android.widget.ProgressBar
} else if (isIOS) {
let transform = CGAffineTransformMakeScale(1.0, 5.0);
progress.ios.transform = transform; // progress.ios === UIProgressView
}
}
Full demo app can be found here
You can directly set scaleY attribute of the progress element.
Example:
<Progress scaleY="2" value="{{ progress }}" maxValue="{{totalTime}}" height="100"></Progress>
This will make it 2 times wider in the vertical (Y) axis.
Can the size of the activity indicator be changed in Nativescript iOS?
Also the color.
It sure can, I did something like this in my main view:
if (frameModule.topmost().ios) {
var indicator = page.getViewById("indicator");
indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.UIActivityIndicatorViewStyleWhiteLarge;
indicator.ios.color = new colorModule.Color("#FFFFFF").ios;
}
I have this in my app.css which seems to do the trick for the color (I had no need to change the size yet):
ActivityIndicator {
color: #4CC55B;
}
I'm using Qooxdoo 3.0.1 in a standalone application, and need to change the tooltip "hide" timeout for tooltips on a qx.ui.table.Table header. Since the hideTimeout property of Tooltip says it is themable I figured I'd modify the Appearance theme (created by create-application.py like this:
qx.Theme.define("projrep.theme.Appearance", {
extend : qx.theme.modern.Appearance,
appearances :
{
"tooltip" : // from "AppearanceID" for Tooltip
{
base : true,
style : function(states, styles)
{
return { hideTimeout : 10000 };
}
}
}
});
The "style" method gets called, so I know the theme is being used, but tooltips still show for 4 seconds, not ten. There aren't any warnings on the console... any suggestions? Thanks!
Ok, after restarting the browser the tooltips now stay up for 10 seconds... I guess it was a cache problem. Sorry about that, the given code seems to work to change tooltip hide times globally using a theme.