I have 3 child views in a container view. I would like to fill one child view's width to blank size according to device width.
<View width="Ti.UI.FILL" height="Ti.UI.SIZE" layout="horizontal">
<!-- 1 --><View width="60" height="Ti.UI.SIZE" backgroundColor="yellow" />
<!-- 2 --><View width="Ti.UI.FILL" height="Ti.UI.SIZE" backgroundColor="red" />
<!-- 3 --><View width="80" height="Ti.UI.SIZE" backgroundColor="orange" />
</View>
This code is not working correctly. View is in third place is not showing near the second. is there any method for filling one view not giving actual width size?
I get help from ti.slack. Below approach is working. May be this helps anybody.
<View width="Ti.UI.FILL" height="Ti.UI.SIZE">
<!-- 1 --><View width="60" height="Ti.UI.SIZE" backgroundColor="yellow" left="0" />
<!-- 2 --><View width="Ti.UI.FILL" height="Ti.UI.SIZE" backgroundColor="red" left="60" right="80" />
<!-- 3 --><View width="80" height="Ti.UI.SIZE" backgroundColor="orange" />
</View>
Related
I have in my main App.vue a component, called BottomNavigationBar that is always on screen. Above that, I have a separate Frame that loads up CountryListComponent, which navigates to different parts of that component. The only issue is that some of the content being loaded in the separate Frame is being hidden behind the persistent BottomNavigationBar. I assume I have to adjust the height of the new Frame to lower the height to account for the BottomNavigationBar. I added an #loaded event that called adjustFrameHeight to the Frame but not sure what to run inside of it to adjust the height. What's the best way to do this?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
<Frame #loaded="adjustFrameHeight" id="main-frame" height="90%" v-show="this.selectedTab =='1'">
<CountryListComponent dock="top" #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
<BottomNavigationBar
dock="bottom"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom"
row="1">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
You can try to use a GridLayout instead of the DockLayout.
* will take up the available space on the screen and auto will take up the maximum height of the child component in that row.
<template>
<Page actionBarHidden="true">
<GridLayout rows="*, auto" height="100%">
<Frame row="0" #loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
<CountryListComponent #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
<BottomNavigationBar
row="1"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</GridLayout>
</Page>
</template>
So, it seems like Frame takes 100% of the height of its direct parent.
Just add StackLayout as the parent of the frame
<Page actionBarHidden="true">
<GridLayout rows="*, auto" height="100%">
<StackLayout>
<Frame row="0" #loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
<CountryListComponent #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
</StackLayout>
<BottomNavigationBar
row="1"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</GridLayout>
</Page>
</template>
I just updated to Nativescript 6 and it seems a lot of my stylings are now funky. Is there a breaking changes list somewhere? Here are some examples:
On iOS my "Back" buttons went from white to dark
in Android all nested FlexboxLayout are now not lining up
some images that were in FlexboxLayout and set by height="20" stretch="aspectFit" fill the whole container, ect.
Code Example:
<FlexboxLayout
flexDirection="row"
class="title-bar"
alignContent="center"
justifyContent="space-between"
ref="view"
>
<Label :text="title" class="title-bar-label" />
<FlexboxLayout flexDirection="row">
<Image
src="res://share"
stretch="aspectFit"
width="25"
height="30"
marginRight="20"
v-if="share"
#tap="$emit('share')"
/>
<Image src="res://title_logo" stretch="aspectFit" width="30" />
</FlexboxLayout>
</FlexboxLayout>
Whenever I tap on a entry component while debugging the color when selected is red. I have not set this anywhere so I don't understand why this is happening.
My resource file has this for the color of "TextColor"
<Color x:Key="TextColor">#FFFFFF</Color>
My Xaml for page :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Views.RegisterPage"
BackgroundColor="{StaticResource PrimaryColor}">
<ContentPage.Content>
<FlexLayout Direction="Column" Margin="30"
JustifyContent="Center" >
<StackLayout Margin ="0,0,0,15">
<Entry PlaceholderColor="{StaticResource TextColor}" TextColor="{StaticResource TextColor}" Placeholder="First Name"/>
<Entry PlaceholderColor="{StaticResource TextColor}" TextColor="{StaticResource TextColor}" Placeholder="Last Name " />
<Entry PlaceholderColor="{StaticResource TextColor}" TextColor="{StaticResource TextColor}" Placeholder="E-Mail " />
<Entry PlaceholderColor="{StaticResource TextColor}" TextColor="{StaticResource TextColor}" Placeholder="Password" />
<Entry PlaceholderColor="{StaticResource TextColor}" TextColor="{StaticResource TextColor}" Placeholder="Retype Password" />
</StackLayout>
<StackLayout Margin ="0,30,0,0">
<Button TextColor="{StaticResource TextColor}" BackgroundColor="{StaticResource AccentColor}" Padding="20" Text="Register"/>
</StackLayout>
</FlexLayout>
</ContentPage.Content>
How it looks
That particular color in android represents the Accent Color. You can override android styles for accent color to define that color.
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#your-color-here </item>
</style>
</resources>
You should be able to find Styles.xml file in your Xamarin Android Specific project inside resources folder. Hope this helps.
Note : This will change the accent color of other controls as well. If you only want to change such color for Entry only. You have to write the Custom Renderer for that. Let me know If you want to go that way.
Consider the next xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
<!-- UI Decalration -->
<AbsoluteLayout>
<GridLayout zIndex="99" height="100" width="100" backgroundColor="red"></GridLayout>
<GridLayout zIndex="1" height="200" width="200" backgroundColor="green"></GridLayout>
</AbsoluteLayout>
</Page>
In my understanding the red square should be visible, but it's hidden behind the green one. Am I doing something wrong?
Declare z-index as CSS property so all elements should be rendered as espected.
For example :
page.css
.lower-grid {
z-index: 1;
}
.upper-grid {
z-index: 99;
}
page.xml
<AbsoluteLayout>
<GridLayout class="upper-grid" height="100" width="100" backgroundColor="red" />
<GridLayout class="lower-grid" height="200" width="200" backgroundColor="green" />
</AbsoluteLayout>
This solution worked out for me - keep in mind that z-index is supported for Android API 21 and above.
I got it working by using gridlayout and then repeating the same row number. The order of the items then determines the z-index playground demo:
<GridLayout rows="*, *, *" columns="*">
<GridLayout row="0" col="0" height="300" backgroundColor="black" />
<GridLayout row="1" col="0" height="300" backgroundColor="red" />
<GridLayout row="2" col="0" height="300" backgroundColor="green" />
<GridLayout row="0" col="0" height="100" backgroundColor="blue" margin="100" /> <!-- displays on top of the first row 0 -->
</GridLayout>
I have the following code(wp7-silverlight). I try to bind a slider to those 2 controls' Angle property, but for some reason the inner control doesn't seems to receive the data, only the parent control. When I put them side by side(not nested), those work properly. Any idea why only the outer control can get the data from the slider?
<rotate:RotatableUserControl Width="400"
Height="400"
x:Name="RotatableUserControl"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Canvas Background="Red">
<rotate:RotatableUserControl Width="50"
Height="50"
x:Name="childeRotate3"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Grid Background="Yellow" />
</rotate:RotatableUserControl>
</Canvas>
</rotate:RotatableUserControl>
I am not sure why you can't bind it nested, but you could try to set the canvas Datacontext to the SliderObject and the bind the Value to the nested rotate:RotatableUserControl, that may work!
<rotate:RotatableUserControl Width="400"
Height="400"
x:Name="RotatableUserControl"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Canvas Background="Red" Datacontext={Binding ElementName=SliderObject, Path=Value}">
<rotate:RotatableUserControl Width="50"
Height="50"
x:Name="childeRotate3"
Angle="{Binding}">
<Grid Background="Yellow" />
</rotate:RotatableUserControl>
</Canvas>
</rotate:RotatableUserControl>