It doesn't show me the border and shadow of the CardView, it shows just a long line.
I have also shared the code that I have been trying with Nativescript for Angular:
<StackLayout>
<ListView [items]="locs">
<ng-template let-item="item">
<CardView class="card-style" margin="10" radius="50">
<GridLayout class="card-layout" rows="*,*,*,*,*,*" columns="*,*">
<Image width="100" height="100" [src]="item.image" col="0" row="0" rowSpan="6"></Image>
<Label [text]="item.name" fontWeight="Bold" col="1" row="0"></Label>
<Label [text]="'Local: ' + item.local" fontWeight="Bold" col="1" row="1"></Label>
<Label [text]="item.address" fontWeight="Bold" col="1" row="2"></Label>
<Label [text]="item.phone" fontWeight="Bold" col="1" row="3"></Label>
<Label [text]="item.city" col="1" row="4"></Label>
<Label textWrap="true" [text]="item.schedule" col="1" row="5"></Label>
</GridLayout>
</CardView>
</ng-template>
</ListView>
The next lines it should be added in the component.ts file:
import { registerElement } from '#nativescript/angular';
import { CardView } from '#nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);
Related
I am using texture view where I display a preview of camera. I need that preview in my page called IntercomCallPage. I am using custom renderer by name MyCustomStackLayout. This is my xaml code
<custom:MyCustomStackLayout x:Name="stack_layout" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="15">
<!--<ImageButton x:Name="btnMenu" Source="menu.png" WidthRequest="32" HeightRequest="28" Margin="11,0,15,0" Clicked="btnMenu_Clicked" HorizontalOptions="Start" BackgroundColor="Transparent"/>-->
<Label Text="Lobby" FontSize="34" x:Name="title" FontAttributes="Bold" HorizontalTextAlignment="Start" Margin="20,6,0,2" TextColor="Black"/>
<Image HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Source="VideoUser1.png"/>
<StackLayout Orientation="Horizontal" VerticalOptions="Fill" HorizontalOptions="CenterAndExpand">
<Button BackgroundColor="Transparent" x:Name="speaker" Text="" ImageSource="Speaker.png" Clicked="speaker_Clicked" HorizontalOptions="Center" />
<Button BackgroundColor="Transparent" x:Name="mute" Text="" ImageSource="Mute.png" Clicked="mute_Clicked" HorizontalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center">
<Button BackgroundColor="Transparent" x:Name="TerminateCall" Text="" ImageSource="CallDecline.png" Clicked="TerminateCall_Clicked" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Fill" HorizontalOptions="Fill" Margin="15,0,0,0">
<Button x:Name="video" Text="Start Video" Clicked="OnVideoClicked" HorizontalOptions="Center" IsVisible="True" BackgroundColor="White"/>
<Button x:Name="record" Text="Start Record" Clicked="record_Clicked" HorizontalOptions="Center" IsVisible="True" BackgroundColor="White" />
<Button x:Name="stoprecord" Text="Stop Record" Clicked="stoprecord_Clicked" HorizontalOptions="Center" IsVisible="True" BackgroundColor="White" />
</StackLayout>
</custom:MyCustomStackLayout>
This is my MyCustomStackLayoutRenderer code where I have written code to display the texture view in my Stacklayout
[Obsolete]
public class MyCustomStackLayoutRenderer: VisualElementRenderer<StackLayout>
{
TextureView displayCamera;
public Core Core
{
get
{
return Manager.Core;
}
}
public LinphoneManager Manager { get; set; }
//public MyCustomStackLayoutRenderer
//{
//}
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
App app = new App(this.Handle);
//app.getLayoutView().Children.Add(fl);
app.Core.NativeVideoWindowId = displayCamera.Handle;
app.Core.VideoDisplayEnabled = true;
}
}
I have no clue why it is not displaying the texture view. Any suggestions?
I need to have a button at the bottom of the screen, but as soon as I tap on a textfield, keyboard shows up and lifts the button with it. I've tried using a button, another stacklayout, a scrollview wrapping it all... nothing's working and I feel I'm not understanding layouts correctly.
It's the gray button -> I want the gray button there
But it always comes up with the keyboard, see?
It's my understanding that this should be a scrollview so it remains at it's bottom position, but if I add a ScrollView to the gridLayout so it scrolls, it doesn't work.
Here's the code. Thank you in advance.
<ActionBar android:title="Entrega {{id}}/{{detalleRuta.delegacion}}/{{detalleRuta.tipoAlbaran}}">
<ActionItem>
<Label *ngIf="!entrega.foto" cssClass="mdi icon-cam" [text]="'mdi-add-a-photo' | fonticon" ios.position="right" (tap)="getFoto()"></Label>
<Label *ngIf="entrega.foto" cssClass="mdi icon-cam" [text]="'mdi-photo' | fonticon" ios.position="right" (tap)="showFoto()"></Label>
</ActionItem>
<ActionItem>
<Label class="mdi icon-map" [text]="'mdi-event-busy' | fonticon" ios.position="right" (tap)="cancelarEntrega()"></Label>
</ActionItem>
</ActionBar>
<GridLayout rows="auto,*, 50" loaded="pageLoaded">
<ListView row="0" [items]="detalle">
<template let-item="item">
<StackLayout orientation="vertical" class="info-entrega">
<Label *ngIf="item.fechaActual" [text]="'Fecha ' + item.fechaActual"></Label>
<Label *ngIf="item.horaActual" [text]="'Hora ' + item.horaActual"></Label>
</StackLayout>
</template>
</ListView>
<TabView row="1" selectedIndex="0" selectedColor="#00B4E6" *ngIf="!noEntregado">
<StackLayout *tabItem="{title: 'Cliente'}">
<ScrollView>
<StackLayout class="formulario">
<TextField [(ngModel)]="entrega.nombreCliente" hint="Nombre Cliente" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField [(ngModel)]="entrega.DNICliente" hint="DNI Cliente" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField [(ngModel)]="entrega.emailCliente" hint="Email Cliente" keyboardType="email" autocorrect="false" autocapitalizationType="none"></TextField>
<Button style="width:100%" class="btn {{ entrega.firmaCliente ? 'conFirma' : 'sinFirma' }}" text="Firma Cliente" (tap)="firmaCliente(false)"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout *tabItem="{title: 'Empleado'}">
<ScrollView>
<StackLayout class="form-config">
<TextField class="input-config" [(ngModel)]="entrega.nombreEmpleado" hint="Nombre Empleado" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField class="input-config" [(ngModel)]="entrega.DNIEmpleado" hint="Dni Empleado" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<Button style="width:100%" cssClass="btn {{ entrega.firmaEmpleado ? 'conFirma' : 'sinFirma' }}" text="Firma Empleado" (tap)="firmaEmpleado(false)"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout *tabItem="{title: 'Importes'}">
<ScrollView *ngIf="detalleRuta.importePdte != 0">
<StackLayout class="form-config">
<StackLayout>
<Label *ngIf="entrega.impMetalico" class="impMetalico" [text]="'Metálico ' + impMetalicoCurrency"></Label>
<TextField id="impMetalico" keyboardType="number" [(ngModel)]="entrega.impMetalico" hint="Importe en Metálico" (textChange)="cambioMetalico($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impTarjeta" class="impTarjeta" [text]="'Tarjeta ' + impTarjetaCurrency"></Label>
<TextField id="impTarjeta" keyboardType="number" [(ngModel)]="entrega.impTarjeta" hint="Importe en Tarjeta" (textChange)="cambioTarjeta($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impVale" class="impVale" [text]="'Vale ' + impValeCurrency"></Label>
<TextField id="impVale" keyboardType="number" [(ngModel)]="entrega.impVale" hint="Importe en Vale" (textChange)="cambioVale($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impOtros" class="impOtros" [text]="'Otros ' + impOtrosCurrency"></Label>
<TextField id="impOtros" keyboardType="number" [(ngModel)]="entrega.impOtros" hint="Importe en Otros" (textChange)="cambioOtros($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.total" class="total" [text]="'Total ' + totalCurrency"></Label>
</StackLayout>
<StackLayout class="sumTotal">
<Label *ngIf="sumTotal" class="total" [text]="'Total ' + sumTotal | myCurrency"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
<StackLayout *ngIf="detalleRuta.importePdte == 0">
<Label class="sinImporte" text="El importe Pendiente es de 0€"></Label>
</StackLayout>
</StackLayout>
</TabView>
<Button row="2" *ngIf="!noEntregado" class="btn" text="Confirmar Entrega" (tap)="submit()"></Button>
<StackLayout row="1" *ngIf="noEntregado">
<ScrollView class="scrollView">
<StackLayout class="form-config">
<Label *ngIf="desc" class="desc" text="{{desc}}"></Label>
<Button style="width:100%" text="Motivo" (tap)="getMotivos()"></Button>
<StackLayout class="input-field">
<TextView hint="Observación." returnKeyType="send" [(ngModel)]="entrega.obsNoEntrega" editable="true" class="input input-border"></TextView>
</StackLayout>
<Button class="btn" text="Cancelar Entrega" (tap)="cancel()"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
</GridLayout>
<ActivityIndicator class="activity-indicator" width="100" [busy]="isLoading" height="100"></ActivityIndicator>
This is how i managed my keyboard to not push button up while the textfield get focus.
<StackLayout>
<ScrollView >
<CardView shadowColor="#FE00FC" elevation="20" id="container" row="1">
<GridLayout rows="auto auto auto auto auto auto auto">
<TextField row="1" hint="User Name" keyboardType="email" autocorrect="false" autocapitalizationType="none" returnKeyType="next" [(ngModel)]="user.name"></TextField>
<TextField row="2" hint="Password" id="pass" keyboardType="email" secure="true" [(ngModel)]="user.password"></TextField>
<Button row="3" text="Login" class="submit-button" (tap)="submit()"></Button>
</GridLayout>
</CardView>
</ScrollView>
</StackLayout>
I'm facing a pretty weird problem trying to catch taps on certain images on my screen first here is my xaml code for a popup window implemented as a View :
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NumbersRaceXamarin.YesNoPopupMessages">
<ContentView.Content>
<RelativeLayout HeightRequest="190" WidthRequest="280">
<Image x:Name="bg" Source="compbar_01.png" Aspect="Fill" HeightRequest="190" WidthRequest="330" Opacity="0.9" InputTransparent ="true"/>
<StackLayout WidthRequest="280" Spacing="0" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width , Factor=0.1,Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height , Factor=0.02,Constant=0}">
<Label x:Name="message" FontSize="15"></Label>
<StackLayout WidthRequest="70" HeightRequest="30" Orientation="Horizontal" HorizontalOptions="Center">
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
<Image x:Name="minus" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="30" WidthRequest="30"/>
<Label x:Name="minusTB" Text="-" FontSize="16" HeightRequest="30" WidthRequest="30" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
<Label x:Name="qtyTB" Text="1" FontSize="8" HeightRequest="30" WidthRequest="30" BackgroundColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
<Image x:Name="plus" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="30" WidthRequest="30" IsEnabled="true"/>
<Label x:Name="plusTB" Text="+" FontSize="16" HeightRequest="30" WidthRequest="30" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
</StackLayout>
<StackLayout x:Name="coinAmountSeg" HeightRequest="40" WidthRequest="90" Orientation="Horizontal" HorizontalOptions="Center" IsVisible="true">
<Label x:Name="coinsAmountTB" Text="1200" HeightRequest="35" WidthRequest="40" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
<Image x:Name="coinsPackIM" Source="coins_01.png" HeightRequest="35" WidthRequest="25"/>
</StackLayout>
<StackLayout x:Name="yesNoBtSeg" HeightRequest="32" WidthRequest="150" Orientation="Horizontal" HorizontalOptions="Center" IsVisible="true">
<RelativeLayout HorizontalOptions="Center" >
<Image x:Name="yesBt" x:Uid="yesBt" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="32" WidthRequest="80"></Image>
<Label x:Name="yesTB" Text="OK" FontSize="20" HeightRequest="32" TextColor="Yellow" WidthRequest="80" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout >
<RelativeLayout HorizontalOptions="Center" >
<Image x:Name="noBt" x:Uid="noBt" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="32" WidthRequest="80"></Image>
<Label x:Name="noTB" Text="CANCEL" FontSize="20" HeightRequest="32" TextColor="Yellow" WidthRequest="80" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
</StackLayout>
</StackLayout>
</RelativeLayout>
</ContentView.Content>
</ContentView>
and here is how I try to catch the events from plus and minus ok and cancel images:
var minusTap = new TapGestureRecognizer();
var plusTap = new TapGestureRecognizer();
var okTap = new TapGestureRecognizer();
var cancelTap = new TapGestureRecognizer();
minusTap.Tapped += minusBtn_Click;
plusTap.Tapped += plusBtn_Click;
okTap.Tapped += okBtn_Click;
cancelTap.Tapped += cancelBtn_Click;
noBt.GestureRecognizers.Add(cancelTap);
plus.GestureRecognizers.Add(plusTap);
minus.GestureRecognizers.Add(minusTap);
yesBt.GestureRecognizers.Add(okTap);
private void okBtn_Click(object sender, EventArgs e)
{
tcs.SetResult(1);
}
private void cancelBtn_Click(object sender, EventArgs e)
{
tcs.SetResult(0);
}
private void minusBtn_Click(object sender, EventArgs e)
{
if (int.Parse(qtyTB.Text) > 1)
{
coinsAmountTB.Text = "" + (int.Parse(coinsAmountTB.Text) - itemCost);
qtyTB.Text = (int.Parse(qtyTB.Text) - 1) + "";
}
}
private void plusBtn_Click(object sender, EventArgs e)
{
if (int.Parse(qtyTB.Text) < max)
{
coinsAmountTB.Text = "" + (int.Parse(coinsAmountTB.Text) + itemCost);
qtyTB.Text = (int.Parse(qtyTB.Text) + 1) + "";
}
}
the problem is really strange the tap events work fine on the ok cancel and minus buttons but won't fire when taping the plus image for some reason.
I thought something was overlapping and "stealing" the taps on the plus button but I can't find anything like that .
BTW I'm trying this on android not trying on other devices.
anyone have any idea how and why this happens?
Ok so I found the silly problem thought I'd share my solution in case anyone encounter the same issue.
the problem was that the stacklayout that contains the buttons had less width than the elements it contained so the last element the plus in this case was out of the stacklayout bounds and that caused it to not get the tap gesture
<StackLayout WidthRequest="70" HeightRequest="30" Orientation="Horizontal" HorizontalOptions="Center">
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
this line here I just changed the WidthRequest to 100 instead of 70 because it has 3 elements 30 width each .
Hope this helps someone
I had the same problem, also caused by the parent element having less size than the tap-enabled child.
In my case, I had an absolute layout (Inner) inside another absolute layout (Outer). I was then adding the tap-enabled child elements programmatically to Inner in the code-behind.
<AbsoluteLayout x:Name="Outer">
<AbsoluteLayout x:Name="Inner" />
</AbsoluteLayout>
Because Inner had no AbsoluteLayout.LayoutBounds specified, it seems the interaction cycle ignored the children. This was not obvious to me because the child elements were visible.
This worked:
<AbsoluteLayout x:Name="Outer">
<AbsoluteLayout x:Name="Inner"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
However, I ended up putting my tap target elements in the Outer container, which also resolved the issue, as Outer is enclosed by a ContentPage.
I want to create a list view NativeScript with custom item view. I'm using GridLayout to do that.
The problem is: There is large space between rows item.
These are what I've done:
XML:
<Page loaded="loaded">
<ActionBar title="Welcome">
<android>
<NavigationButton android.systemIcon="ic_menu_emoticons" icon="res://icon" tap="showSlideout"/>
</android>
</ActionBar>
<ListView items="{{ items }}">
<ListView.itemTemplate>
<GridLayout rows="auto" columns="auto,*" class="threads-list-wrapper" height="100">
<Image row="0" col="0" src="{{ photo }}"></Image>
<StackLayout row="0" col="1" class="" orientation="vertical">
<Label class="h1" text="{{title}}"></Label>
<Label text="{{ body }}"></Label>
<Label text="{{ date }}"></Label>
</StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
CSS
.threads-list-wrapper {
padding: 15;
}
.threads-list-wrapper > Image {
height: 64;
width: 64;
margin-right: 15;
}
CODE:
var observableModule = require("data/observable");
var model = new observableModule.Observable();
exports.loaded = function (args) {
var items = [
{
photo: 'res://icon',
title: 'Ardiansyah Putra',
body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
date: 'Just Now'
},
{
photo: 'res://icon',
title: 'Bagus Putra',
body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
date: '12 Jan'
}
];
var page = args.object;
model.set("items", items);
page.bindingContext = model;
};
RESULT:
Not sure what exactly is causing the white space in your case , but here is a snippet where after stripping all the CSS there are no extra white spaces generated in the list-view template.
<GridLayout rows="*" columns="*, *">
<Image col="0" src="res://icon" stretch="none" />
<StackLayout col="1" >
<Label class="h1" text="{{title}}"></Label>
<Label text="{{ body }}"></Label>
<Label text="{{ date }}"></Label>
</StackLayout>
</GridLayout>
i want to show number or date from bindingcontex array. with this code :
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="aspectFill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
array pakets fron JSON with value textValue = 'XXXX', numberValue = 3000, dateValue = '2016-06-04'
Both of numberValue and dateValue not show, but textValue show to screen.
What the problems about it ? How to use namber or date in Label Nativescript.
Thanks anyway
I tested this in a test app; and I have the following code, pretty close to unmodified:
Here is the XML:
<Page id="Page" onloaded="pageLoaded" class="">
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="fill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
</Page>
Here is the JavaScript:
var Observable = require('data/observable').Observable;
var myData = new Observable();
exports.pageLoaded = function(args) {
var page = args.object;
myData.pakets = [
{foto: '~/SO587/nslogo.png', textValue: 'Text', numberValue: 2330, dateValue: '2016-01-01'},
{foto: '~/SO587/gswn.png', textValue: 'Text', numberValue: 2230, dateValue: new Date()},
];
page.bindingContext = myData;
};
And here is how it looks: As you can see from the above data, I have Text, number, Text Date and the second data line has Text, number and a real Date field.
Problems on CSS. i am add with this :
label {
font-family: 'Roboto', Roboto;
}
And work weel.
Thanks Mr. #nathanael