I have this ScrollView:
<ScrollView orientation="horizontal" horizontalAlignment="center" android:layoutDirection="rtl">
I try change direction scrollView , but not work for me.
But exist private function isLayoutRtl in
tns-core-modules-widgets
private boolean isLayoutRtl() {
return (this.getLayoutDirection() == LAYOUT_DIRECTION_RTL);
}
I can change orientation horizontal ,But not change scroll rtl.
mor information visit link.
How change directoin RTL scroll in scroll View?
Tanks
The direction can be set by the orientation property. Is that indeed what you need? https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview.html#orientation
I searched a lot and didn't find an official solution. But to keep things working, scroll to the end of the scrollView after loading it:
onScrollViewLoaded(){
setTimeout(()=>{
let scrollView = this.$refs.scrollView.nativeView;
scrollView.scrollToHorizontalOffset(scrollView.scrollableWidth, false)
},1);
},
try to add css transform: scaleX(-1.0) to scrollview
Related
I'm trying to mount a view using VerticalStackLayout, but the second (Border) disappears when I add another CollectionView sample element, how can I resolve this, if I comment out the first element(CollectionView) the second appears pasted at the top.
Yes, that is because the CollectionView automatically full fill the page. So you couldn't see the Border.
Some workaround here:
1.You could set the HeightRequest for the CollectionView:
<CollectionView x:Name="CollectionViewTransactions" ... HeightRequest="300">
2.if there is more item in CollectionView, you could put it in a ScrollView:
<ScrollView Orientation="Vertical">
<CollectionView x:Name="CollectionViewTransactions" ... HeightRequest="300">
</ScrollView>
3.You may also customize the HeightRequest for CollectionView depending on the count of item. The following code is just for example.
In xaml fileļ¼set binding for HeightRequest
<CollectionView x:Name="CollectionViewTransactions" HeightRequest="{Binding Height}" ...>
In ViewModel, define a property for height and update it when adding a new item:
public int Height
{
get
{
return height;
}
set
{
height = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Height)));
}
}
public void SetNewHeight()
{
Height = 70 * ItemCollection.Count; //
}
All of the above three ways can show border below the CollectionView. You could have a try based on your design
For more info, you could refer to CollectionView.
Hope it works for you.
I have a CarouselView in which I call an object with individual and completely different Views.
The only elements my ContentPage has, are the CarouselView itself, and a bottombar with a gradient above it (notice gradient in following image).
I have done this in a way in which this gradient dissapears when the page's scrolling space becomes 0 (when I have scrolled to the end of the page).
The problem is that when I swipe between items in the CarouselView, the CarouselView always maintains the height of the very first View that is called in.
This means that, in a View with MORE height than the 1st one, when scrolling up (after being at the very bottom, and therefore not showing a gradient) the gradient will only show again once it hits the height value of the 1st page.
In a View with LESS height than the 1st one, the page will allow me to scroll down until I reach the height value of the 1st page, even if there are not enough elements on the page to even need a scroll.
Essentially, what I am asking for, is if there is a way in which I can, in some way, "refresh" the height of the Page every time a scroll is complete to another View in the CarouselView, resolving my height issues in smaller views, and my gradient issues in larger views.
Main ContentPage Code Behind (Gradient)
public double ScrollingSpace
{
get
{
return MainScrollView.ContentSize.Height - MainScrollView.Height;
}
set { }
}
// Removes gradient when scroll is complete
private void OnScrolled(object sender, ScrolledEventArgs e)
{
if (ScrollingSpace <= e.ScrollY) // Touched bottom
EndPageGradient.SetValue(IsVisibleProperty, false); // the view is GONE, not invisible
else
EndPageGradient.SetValue(IsVisibleProperty, true);
}
// Removes gradient if page is not large enough to need scroll
protected override void OnAppearing()
{
if (ScrollingSpace <= 0)
EndPageGradient.SetValue(IsVisibleProperty, false); // the view is GONE, not invisible
}
Main ContentPage CarouselView XAML
<CarouselView
ItemsSource="{Binding ViewList}"
Loop="False">
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Main ContentPage ViewModel (List with Views for CarouselView)
ViewList = new List<ContentView>()
{
new Step1(),
new Step2(),
new Step3(),
new Step4(),
new Step5(),
new Step6(),
new Step7(),
new Step8()
};
Thanks in advance!
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;
}
}
I'm making app using with Xamarin.forms.
What I'm doing is really hard. Can't figure out so far.
I want to add two view(or page) into scrollview(vertical) and size of each view is equal with screen size. So If I scroll down, second view show up and first view will be hidden.
How to make it with using xaml?
I tried stacklayout, grid, relative, absolute.
Nothing works. (I believe there is some way to do it)
Thanks.
The solution I used for this was, to create a StackLayout with vertical orientation inside a ScrollView. Inside it I have a two StackLayout.
<ScrollView>
<StackLayout Orientation="Vertical" Spacing="0">
<StackLayout x:Name="FirstStack" BackgroundColor="Red">
</StackLayout>
<StackLayout x:Name="SecondStack" BackgroundColor="Blue">
</StackLayout>
</StackLayout>
</ScrollView>
After this I setted programmatically the Height for each page.
To get the screen Height i did it the simpler way (just to test it) but you should do it in a better way.
On iOS inside FinishedLaunching:
App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
On Android inside MainActivity (need to be tweaked + 0.07f):
App.ScreenHeight = (int)(Resources.DisplayMetrics.HeightPixels / (Resources.DisplayMetrics.Density + 0.07f));
In you Application:
public partial class App : Application
{
public static int ScreenHeight;
And finally in the Page:
public ScrollVerticalPage()
{
InitializeComponent();
FirstStack.HeightRequest = App.ScreenHeight;
SecondStack.HeightRequest = App.ScreenHeight;
}
Final result here.
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;
}