I've got a TabView in my NativeScript page. The tabs content is programmatically populated.
How to hide / collapse the tabs buttons (because the tabs are switched programmatically)?
see Image above of TabView buttons bar - which needs to be collapsed
You can try
For ios:
var myTabView = page.getViewById("myTabView")
myTabView.ios.tabBar.hidden = true;
For android
myTabView.android.removeViewAt(1);
A better solution for android (I hope i translated it correctly from my working nativescript angular code)
const tabLayout = myTabView.android.tabLayout;
// use native android methods to hide the tabLayout containing the tab buttons
if(isFullscreen) {
tabLayout.setVisibility(android.view.View.GONE);
} else {
tabLayout.setVisibility(android.view.View.VISIBLE);
}
Related
I am using a swipe gesture to turn pages. It works great on ios. However, the Android version isn't working where there is a scrollview in play.
I am using Nativescript Pro UI to have a side-drawer. I want to put the gesture on the
Inside of the tkMainContent there is a scrollview.
Swipe doesn't even log a console.log event when I swipe inside the scrollview area. Is there a way to get it to work for Android?
Here is my typescript code:
let cbView = this.contentbody.nativeElement;
cbView.on('swipe', (args: SwipeGestureEventData) =>{
console.log("Swipe Direction: " + args.direction);
let topNextView = cbView.getViewById('topNext');
let topBackView = cbView.getViewById('topBack');
this.playerService.setIsBusyLoading(false);
if(args.direction === 1) {
topBackView.notify({eventName: 'tap', object: topBackView});
}
if(args.direction === 2) {
topNextView.notify({eventName: 'tap', object: topNextView});
}
});
}
As I said I"m not getting Swipe Direction 2 when swiping on Android. If I swipe above where I have the scrollview start, such as in the heading of my document, then it picks up the swipe.
I am trying to implement Images carousel View as per the below image.
I want to display multiple images using carousel view with highlighted dots when user scroll the images (Highlight the respective dot below the image) in Xamarin IOS.
I tried with iCarousel - Xamarin Component ( iCarousel Link ) to display images with dots. Here i am able to display the images in carousel view. Can any one suggest me to resolve this issue.
You can add a UIPageControl underneath the iCarousel view:
UIPageControl pageControl = new UIPageControl(frame));
pageControl.Pages = carousel.NumberOfItems;
pageControl.CurrentPage = carousel.CurrentItemIndex;
// For some reason I needed to set the back ground color
// for ValueChanged event to fire if you want pages to
// change when the UIPageControl is tapped.
pageControl.BackgroundColor = UIColor.Black;
View.AddSubview(pageControl);
Then handle the carousel.ScrollEnd event:
carousel.ScrollEnd += (sender, e) =>
{
pageControl.CurrentPage = carousel.CurrentItemIndex;
};
And if you want to be able to change the page by tapping the UIPageControl:
pageControl.ValueChanged += (sender, e) =>
{
carousel.CurrentItemIndex = pageControl.CurrentPage;
};
With a UIPageControl, you tap on the left or right of the control to go to the previous or next page, but you can't go to a specific page by clicking a dot. See: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPageControl_Class/index.html
I added the iCarousel Component sample with the UIPageControl added here: https://github.com/jgold6/XamarinSupportSamples/tree/master/iOS-iCarouselWithPageControl
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;
}
I am developing an iPad app using Xamarin.Forms.
I would like my settingspage to be modal so it lay over the previous page like a popup.
I have been trying all solutions I could find and most of them seems to recommend me to call this from a button:
await Navigation.PushModalAsync(ModalSettingsPage);
What happens when I use it is that my settingspage comes in from below as a modal page but not as a popup, it covers the entire screen.
This is my current code:
//Setup button (action bar)
ToolbarItems.Add(new ToolbarItem
{
// Text = "Setup",
Icon = "settings1.png",
Order = ToolbarItemOrder.Default,
Command = new Command(() => Navigation.PushModalAsync(new ModalSettingsPage())) //Action to perfome on click , open modal view
});
Also, does anyone now if there is any good way to positions the ToolbarItems? I have two items and would like each one to be positioned at each side, but by default they are both positioned to the right.
With the evolution of Forms (currently 4.5.0), it has now become simple to push a modalpage which is not fullscreen. Use the following in your code-behind of your xaml contentpage:
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
namespace YourAppWithAModalPage
{
public class ModalPage : ContentPage
{
public ModalPage()
{
// iOS Solution for a ModalPage (popup) which is not fullscreen
On<iOS>().SetModalPresentationStyle(UIModalPresentationStyle.FormSheet);
}
}
}
There is nothing pre-made in Forms to give you a popup like I think you want. Instead, you would have to create this or use a third-party solution. For example, here is a "popup" implementation that might work for you.
I am having an issue with QLPreviewcontroller presentation in iOS 8. When it is pushed, the UINavigationBar gets transparent and the UI of the app gets disturbed (though it is working fine on iOS 7), I am developing in Xamarin.
if (UIDevice.CurrentDevice.CheckSystemVersion (8, 0))
{
DocPreviewViewController docPreivewVC = new DocPreviewViewController (this.Title, downloadedTime, fullFilePath); //DocPreviewViewController is subclass of UIViewController
this.NavigationController.PushViewController (docPreivewVC, true);
}
Here is the Output in iOS 8:
And if I try to Present it by wrapping into a UINavigationContorller , the document gets hide under the QLPreviewControllers toolbar and user has to tap the screen to hide the navigation bar and see the upper portion of document. Is there a way to hide this tool and show only my own UINavigationBar? Is this a known behaviour that the QLPreviewController’s navigation bar always overlaps the document and user has to tap it to reveal the full document?
Here is the code that I have tried:
if (UIDevice.CurrentDevice.CheckSystemVersion (8, 0))
{
DocPreviewViewController docPreivewVC = new DocPreviewViewController (this.Title, downloadedTime, fullFilePath);
UINavigationController nav = new UINavigationController (docPreivewVC);
nav.HidesBarsOnTap = false;
nav.HidesBarsOnSwipe = false;
this.PresentViewController (nav, true, null);
}
iOS 8: Screen shot when used
Kindly give me suggestion how can I achieve the appearance of document as of iOS 7 i.e: Hiding the top toolbar of QLPreviewController and showing only NavigationController's navigation bar like this:
Thanks