Here is what my layout looks like:
<template>
<GridLayout rows="auto,*,auto">
<GridLayout row="0" id="topBar" columns="*,*,*">
<!-- my top bar -->
</GridLayout>
<GridLayout rows="*,auto,*" height="100%">
<StackLayout row="0" />
<ScrollView row="1" orientation="vertical">
<StackLayout>
<slot />
</StackLayout>
</ScrollView>
<StackLayout row="2" />
</GridLayout>
<StackLayout row="2">
<!-- my navigation bar -->
</StackLayout>
</GridLayout>
</template>
I want my top bar and navigation bar to take as much height as they need so they can fit their content properly. I want the main content which is a scrollview to take the rest of the height of the page.
Now depending on the screen size, my content either fully fits in the page in which case I want it to be vertically centralized within it's container which is the scrollview taking all the space between the top bar and navigation bar. So in this case there will be some empty space above and below the content, within the scrollview.
or, the content doesn't fully fit within the boundaries of the scrollview in which case The empty space above or below my content within the scrollview should disappear and the content should be scrollable naturally.
This works if the content fits, otherwise it doesn't scroll I think because it sets the height of the scrollview large enough to contain its content so it doesn't overflow anymore. How can I fix this?
Related
I have some general question about layouts in my application I ma trying to make. I have attached a screenshot of how this is suppose to look like. There are 2 headers at the top (search bar with back button), another list of properties (Crag, Grade...). Then we have vertical scrollable table layout.
This is little bit of beginner question, but what layouts would I use to create such page, for example something like this (of course this would need to go in more details to handle all information, but as in rough layout?
<Relative layout>
<Frame layout> search bar </Frame layout>
<Frame layout> list of properties (Crag, Grade...) </Frame layout>
<Table layout> vertical scrollable </Table layout>
</Relative layout>
You can do something like below
<LinearLayout orientation=vertical>
<Toolbar> search bar </Toolbar>
<LinearLayout orientation=horizontal> list of properties (Crag, Grade...) </LinearLayout>
<RecyclerView>
</LinearLayout>
I am developing an app where when user click on cardview layout, detail of that view is opened on that card view layout. I have used nativescript ScrollView for scrolling the views. But, when user click on last cardview layout it should scroll to show detail of cardview layout. It does not automatically scrolls to the last card view detail, due to this the detail of the card view is hidden and user have to scroll manually.
I found this Nativescript scroll to bottom of ScrollView programmatically but i am not able to solve my problem. Below is my code for layout.
<ScrollView id="scrollView" #scrollView orientation="vertical" #scrollView (scroll)="onScroll($event)">
<StackLayout row="0" col="0">
<StackLayout *ngFor="let item of items" class="card-view" id="cardViewLayout">
<GridLayout columns="auto, *, auto" rows="auto,auto,auto" (tap)="toggleDetail(#event)">
</GridLayout>
<GridLayout row="3" col="0" colSpan="3" columns=" *, *" rows="auto,auto" id="detailedData" visibility="hidden" class="cardDetail">
<StackLayout row="0" col="0" class="detailDataStack">
</StackLayout>
</GridLayout>
</StackLayout>
</StackLayout>
</ScrollView>
toggleDetail(args){
var scrollView = this.page.getViewById("scrollView")
var offset = this.scrollView.nativeElement.scrollableHeight;
this.scrollView.nativeElement.scrollToVerticalOffset( this.scrollView.nativeElement.offset+ 120, false);
}
As shown in above when user click on card-view class layout, it is toggling cardDetail class. When there is last item in card-view it should scroll automatically to show the details but it don't automatically scrolls.
In toggleDetail() method i tried to get scrollableHeight, add 120 to that height and make it scroll when user in last item but nothing happened.
Playground Sample app for this
ScrollView Sample app Nativescript Playground
Thank you in advance :)
You are suppose to use verticalOffset not just offset.
this.scrollView.nativeElement.scrollToVerticalOffset(this.scrollView.nativeElement.verticalOffset + 120, false);
just use scrollToVerticalOffset and scrollableHeight
const scrollView = page.getViewById('scroll-view');
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
I have a simple layout which consists of Entry and the Button. The goal is to place Button at the bottom and the Entry in the center of the remaining space. Everything works at start. Here are layout and screenshot.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="ParentAdda.Pages.Test">
<ScrollView x:Name="Qq" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout x:Name="Ww" Orientation="Vertical" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Aquamarine" />
<Entry
FontSize="Medium"
Placeholder="+111111111"
HorizontalOptions="FillAndExpand"
Keyboard="Telephone" />
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Coral" />
<Button Text="Update" Clicked="Button_OnClicked"
HorizontalOptions="Fill"
BorderRadius="20"
BackgroundColor="Lime"
TextColor="White"
FontSize="Large"
FontAttributes="Bold" />
</StackLayout>
</ScrollView>
</ContentPage>
I am also setting WindowSoftInputMode to resize in Android project (in the code, taking into account the bug in Xamarin.Forms when the tag is reset to Pan when set in manifest when using FormsAppCompatActivity)
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
//Remove the status bar underlay in API 21+
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
Window.DecorView.SystemUiVisibility = 0;
var statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
statusBarHeightInfo?.SetValue(this, 0);
Window.SetStatusBarColor(Android.Graphics.Color.Black);
}
}
When Entry gains focus, the page is not resized (though I can scroll to the very bottom when soft keyboard is visible)
When soft keyboard hides the content is resized incorrectly, and occupies just part of the screen.
It looks like the layout process is performed based on bounds before soft keyboard becomes visible/invisible. However, it seems that all Bounds properties (of the Page, ScrollView and StackLayout) as well as ContentSize property of ScrollView has correct numeric values (i traced them in button clicked handler). I tried to call ForceLayout() on different elements in same button clicked handler without luck.
Does anyone know how to fix this issue?
I do think it's how FillAndExpand of VerticalOptions is designed, it is for
element layout when there is excess space available along the Y axis from the parent layout. If multiple children of a layout are set to expand, the extra space is distributed proportionally.
Since you don't have any fixed size, when the keyboard is disappearing, the layout is resized, I guess FillAndExpand will first measure how many extra space along the axis and then distributes the space for the children.
A very simple workaround to solve your issue is to give a fixed size to your StackLayout, but you said
The goal is to place Button at the bottom and the Entry in the center of the remaining space.
If you want to keep the original size here, you can set the height to StackLayout when it is appearing, means override the OnAppearing() method in code behind, for example:
protected override void OnAppearing()
{
base.OnAppearing();
Ww.HeightRequest = Ww.Height;
}
I want to achieve this kinda transparency on my custom view as displayed by alert view for Android application.
Thanks
#Dlucidone I had this solved by using custom overlay from css.
<GridLayout>
<StackLayout>
// All your page content goes here!
</StackLayout>
<StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
<GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
<ActivityIndicator busy="true" />
</GridLayout>
</GridLayout>
Set the dimmer class to background transparent css, with width and height to 100%
Information how to use visible and collapsed
https://www.tjvantoll.com/2015/06/05/nativescript-showing-and-hiding-elements/
BTW there is a problem with android on setting isUserInteractionEnabled
https://github.com/NativeScript/NativeScript/issues/3215
If you need this to show an activity indicator as an overlay with a dimmed background, you could use this one: https://github.com/nstudio/nativescript-loading-indicator
import {LoadingIndicator} from '#nstudio/nativescript-loading-indicator'
const loader = new LoadingIndicator()
loader.show({dimBackground: true})
loader.hide()
I have a Titanium Page, where I am using ScrollView and TableVIew both. But running into a problem -
My ScrollView Portion is about half the page, and I have set Tableview below to it, and when I scroll on Scrollview nothing scrolls up (as it is only half the screen), but when I scroll the TableView, then only tableview gets scrolled and that too in that below portion only. And the above (scrollview portion remains static in its position)
My code is:
<Alloy>
<Window id="main_window" title="Profile" navTintColor="white" backgroundColor="white" barImage="/images/NavBackground.png" orientationModes="Titanium.UI.PORTRAIT">
<ScrollView id="scrollable_view" scrollType="vertical" top="0dp" height="89%" contentWidth="100%">
</ScrollView>
<TableView id='list_rows' top="auto" height="100%" separatorColor="#CCCCCC" >
</TableView>
</Window>
</Alloy>
I have also tried inserting the TableView in Scrollview and setting-up top parameter of tableview to auto and 400dp (in my case).
Put the TableView into the ScrollView and disable the scroll functionality of the TableView.