How to toggle the UITabBar translucent property with NativeScript? - nativescript

I want my TabView bar to be the same color as my layout. There was a flat boolean added to NS to make this possible with the ActionBar, but how can I achieve this with my tab bar as well? If I set the tab-background-color property to black, I want it to actually be black, not dark grey due to the translucent property explained here: https://developer.apple.com/documentation/uikit/uitabbar/1623458-translucent?language=objc
I've found many posts/articles about solving this for the ActionBar but haven't seen anything about tabs yet

Try this on loaded event of TabView
onTabViewLoaded(args) {
const tabView = args.object;
if (tabView.ios) {
tabView.ios.tabBar.translucent = true; // false;
}
}

Related

RadListView loadOnDemandMode indicator background color

When using RadListView with loadOnDemandMode="auto", how do I change the background color of the activity indicator in iOS?
In Android platform it seems to be the same as the background color, but in iOS it's white
collectionView.visibleCells returns ExtendedLoadOnDemandCell as its first element which contains the activityindicator used in loadOnDemand mode.
Below is the code to set the activity indicator's color and backgroundColor to transparent
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.color = UIColor.clearColor;
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.backgroundColor = UIColor.clearColor;
Set this on the tkListLoadOnDemandTemplate's loaded event. You might also have to wrap it in a setTimeout incase it fires too early.
<GridLayout *tkListLoadOnDemandTemplate (loaded)="onLoadOnDemandLoaded($event)"></GridLayout>
onLoadOnDemandLoaded(args) {
setTimeout(() => {
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.color = UIColor.clearColor;
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.backgroundColor = UIColor.clearColor;
});
}

Setting backgroundcolor not possible

I'm filling a grid with views.
This takes some time.
During the filling, the background stays black.
When views are added, the black background goes aways accordingly.
However, I would like the grid's backgroundcolor to be White instead of Black.
No matter what I do, I just don't seem to be able to set the backgroundcolor.
I've set the NavigationPage's backgroundcolor to Color.White, and I've set the Grid's backgroundcolor to Color.White.
What else could I do to make the backgroundcolor white?
I'm not sure if the mistake is really on my side.
Here you can see what's happening:
First the grid's background is black. When views are added, the black background is overdrawn by the views.
On the right side you can see that 5 views have already loaded.
The 6nd view has not yet loaded, so the background is still black.
[![enter image description here][1]][1]
Edit:
In the NavigationPage / ContentPage I have this:
public MainPage()
{
this.BackgroundColor = Color.White;
In this MainPage, I have a Grid ("_BigGridAsLayout") in which a custom bottom navbar is placed. This "_BigGridAsLayout" occupies the entire page:
_BigGridAsLayout = new Grid()
{
BackgroundColor = Color.White,
}
(...)
_BigGridAsLayout.Children.Add(_CellGrid,0,0);
_BigGridAsLayout.Children.Add(_NavBar,0,1);
this.Content = _BigGridAsLayout;
Then I add "clsGridCell" views to the "_CellGrid".
"clsGridCell" looks like this:
public clsGridCell(eImageAlignment uImageAlignment)
{
this.BackgroundColor = Color.White;
BackgroundColor = Color.White;
Add the background color of the view (added in the grid ) to whatever color you want .

NSTextView not changing font size or colour from NSFontPanel

I created a basic NSTextView, I selected the following options in Interface Builder:
Editable
Selectable
Field Editor
Rich Text
Undo
Graphics
Non-contiguous Layout
Font Panel
Ruler
Inspector Bar
I set the NSViewController to be the delegate of the NSTextView and the only other custom thing I've done for this NSTextView is to enable inserting tabs and new lines (by accepting First responder):
func textView(_ textView: NSTextView, doCommandBy commandSelector: Selector) -> Bool {
if commandSelector == #selector(insertNewline(_:)) {
textView.insertNewlineIgnoringFieldEditor(self)
return true
} else if commandSelector == #selector(insertTab(_:)) {
textView.insertTabIgnoringFieldEditor(self)
return true
} //else if commandSelector == #selector(changeColor(_:)) {
//textView.setTextColor(NSFontPanel.colo, range: <#T##NSRange#>)
//}
return false
}
When I try to use the commands from the Font Panel + Inspector Bar, All the commands work fine except changing Font size or colour, is there anything that could be wrong? Or do I need to do extra binding/delegates, etc for this to work?
It is strange because if I change the Font itself (of a selected text) or the weight, it works fine (no coding was needed).
Update
I've found the root of the problem causing this. I'm displaying the TextView in a ViewController that is displayed using a Modal segue. If I change from Modal to Show, the size and colour work fine. There's also no need for the extra commands for insert new line and tab.
Is there any reason why this is the case? Is there any customisation that should be done to the segue to avoid this? And, why is the view controller presentation affecting the behaviour of the font panel?
NSFontPanel has a 'worksWhenModal' property which sounds as if it might be set to 'false'.
A Boolean that indicates whether the receiver allows fonts to be changed in modal windows and panels.
Documentation:

iOS Statusbar text color when there is no Actionbar

I want to color my Statusbar text white. This is no problem when i have an Actionbar, but when i set the actionbar to hidden, the color is black again.
This is the code i used:
<page actionBarHidden="true" backgroundSpanUnderStatusBar="true"></page>
And this is the javascript code:
var navigationBar = frameModule.topmost().ios.controller.navigationBar;
navigationBar.barStyle = 1;
Question: How to color the statusbar when there is no actionbar?
You could find solution of this behavior in this GitHub issue:here

Disable ScrollView bounce NativeScript

Looking for a way to disable the ScrollView bounce or overflow that happens when scrolling reaches the top or bottom of the scroll view.
here how to set the settings in android.
Android scrollview remove blue light
Here is a code snippet that might do the trick for you:
if (this.content.ios instanceof UIScrollView) {
this.content.ios.alwaysBounceVertical = false;
}
Of course you need to get an instance of the <ScrollView> component from NativeScript and then the native iOS instance.
I have a small utility library that has this function and some other handy functions baked into it.
https://github.com/TheOriginalJosh/nativescript-swiss-army-knife
import {SwissArmyKnife} from 'nativescript-swiss-army-knife/nativescript-swiss-army-knife';
...
let scrollView = page.getViewById('myScrollView');
SwissArmyKnife.disableScrollBounce(scrollView);
Here is how to do it on iOS and Android.
let scrollView = page.getViewById('myScrollView');
if (app.android) {
scrollView.android.setOverScrollMode(2);
}
else if (app.ios) {
scrollView.ios.bounces = false;
}

Resources