How is it possible to achieve item shadows in a RadListView? To have a shadow of each item and the shadow is not stripped between the items or on the side paddings.
For Android:
XML:
<lv:RadListView xmlns:lv="nativescript-ui-listview" loaded="listLoaded">
<lv:RadListView.itemTemplate>
<StackLayout loaded="itemLoaded">
...
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
JS:
function listLoaded(args) {
var list = args.object;
list.androidListView.setClipToPadding(false);
list.androidListView.setClipChildren(false);
}
function itemLoaded(args) {
var item = args.object;
item.nativeView.setOutlineProvider(android.view.ViewOutlineProvider.BOUNDS);
item.nativeView.setClipToOutline(false);
}
exports.listLoaded = listLoaded;
exports.itemloaded = itemLoaded;
This creates a nics unstripped shadow to every direction:
Related
I have a grid on my page with a few items.
I want to change the location/span of these items in C#.
On Xaml I can do this:
<Grid>
<Label Grid.Row="1" Grid.RowSpan="2"/>
</Grid>
I could do grd.Children.Remove and then grd.Children.Add in the new position, but is there another way?
public MyPage()
{
var grid = new Grid();
var lbl1 = new Label { Text= "lbl1" };
var lbl2 = new Label { Text = "lbl2" };
grid.Children.Add(lbl1);
grid.Children.Add(lbl2);
Grid.SetRow(lbl1, 1);
Grid.SetRow(lbl2, 0);
this.Content = grid;
}
However I would recommend not to do it dynamically but once in the constructor. More info in the official doc.
On my nativescript app - I have a button at the bottom of a screen. On the screen there is a Text area. When the user taps in the Text Area, a virtual keyboard appears. At this point, I want the button at the bottom to move up and appear just on top of the virtual keyboard. Any suggestions on how I can achieve this in both android and iOS?
Code
<GridLayout>
<ActionBar title="" backgroundColor="#f82462" top="0" left="0">
<NavigationButton (tap)="goBack()"></NavigationButton>
</ActionBar>
<GridLayout rows="*, auto">
<GridLayout row ='0' rows="auto *" columns="">
<GridLayout row="0" rows="" columns="">
<Button text="Top Button" (tap)="goNext()"></Button>
</GridLayout>
<GridLayout row="1" backgroundColor="#f82462">
<TextView [(ngModel)]="xyz" class="input" hint="Write your question as a complete sentence.Click on camera to add images if required." returnkeyType="done" id="questionText"></TextView>
</GridLayout>
</GridLayout>
<StackLayout row='1'>
<Button text="Next" (tap)="goNext()"></Button>
</StackLayout>
</GridLayout>
I am not able to test this right now, but have you tried to wrap everything inside the main GridLayout in <ScrollView> ... </ScrollView>
I also encountered this problem for my instant chat application, here is the solution : https://gist.github.com/elvticc/0c789d08d57b1f4d9273f7d93a7083ec
// Also use IQKeyboardManager to customize the iOS keyboard
// See https://github.com/tjvantoll/nativescript-IQKeyboardManager
// let iqKeyboard: IQKeyboardManager = IQKeyboardManager.sharedManager();
// iqKeyboard.toolbarDoneBarButtonItemText = "OK";
// iqKeyboard.canAdjustAdditionalSafeAreaInsets = true;
// iqKeyboard.shouldFixInteractivePopGestureRecognizer = true;
// Angular
[...]
import { OnInit, OnDestroy, ElementRef, ViewChild } from "#angular/core";
[...]
// NativeScript
[...]
import { ios as iosApp } from "tns-core-modules/application/application";
[...]
#ViewChild("element") private _element: ElementRef<StackLayout>; // FlexboxLayout, GridLayout, etc.
private _keyboardHeight: number = 0;
private _elementHeight: number = 0;
private _observerIDs: Array<object> = new Array();
// Start events when the component is ready
ngOnInit(): void {
// iOS keyboard events
if (iosApp) {
let eventNames: Array<string> = [
UIKeyboardWillShowNotification,
UIKeyboardDidShowNotification,
UIKeyboardWillHideNotification
];
// Catch the keyboard height before it appears
this._observerIDs.push({
event: eventNames[0],
id: iosApp.addNotificationObserver(eventNames[0], (event) => {
let currHeight: number = this._keyboardHeight,
newHeight: number = event.userInfo.valueForKey(UIKeyboardFrameEndUserInfoKey).CGRectValue.size.height;
if (currHeight != newHeight) {
this._keyboardHeight = newHeight;
}
})
});
// Position the element according to the height of the keyboard
this._observerIDs.push({
event: eventNames[1],
id: iosApp.addNotificationObserver(eventNames[1], (event) => {
if (this._elementHeight == 0) {
this._elementHeight = this._element.nativeElement.getActualSize().height;
}
this._element.nativeElement.height = this._keyboardHeight + this._elementHeight;
})
});
// Reposition the element according to its starting height
this._observerIDs.push({
event: eventNames[2],
id: iosApp.addNotificationObserver(eventNames[2], () => {
this._element.nativeElement.height = this._elementHeight; // or "auto";
})
});
}
}
// Stop events to avoid a memory leak
ngOnDestroy(): void {
if (iosApp) {
let index: number = 0;
for (index; index < this._observerIDs.length; index++) {
let observerId: number = this._observerIDs[index]['id'],
eventName: string = this._observerIDs[index]['event'];
iosApp.removeNotificationObserver(observerId, eventName);
}
}
}
Marcel Ploch's original : https://gist.github.com/marcel-ploch/bf914dd62355049a0e5efb4885ca4c6e
I am developing a chat app, when list loaded and when a new item added to list I need to scroll to bottom of list. I can do that with this.
scrollToBottom() {
let lv = <ListView>frame.topmost().getViewById('messageList');
lv.scrollToIndex(this.store.items.getValue().length - 1)
}
But it showing bottom of list instant
There is a guide to do that on IOS but not on Android
private srollListView(position: number) {
if (this._listView.ios) {
this._listView.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(
NSIndexPath.indexPathForItemInSection(position, 0),
UITableViewScrollPosition.UITableViewScrollPositionTop,
true
);
}
else {
this._listView.scrollToIndex(position);
}
}
link to guide: http://nuvious.com/Blog/2016/4/4/how-to-make-the-nativescript-listview-scrolltoindex-animated-on-ios
Is there any way to do that on Android?
You could use smoothScrollToPosition android method, which provides smooth scroll for the ListView, which you need. I am providing sample code.
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout>
<ListView items="{{ source }}" id="lvid" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
<ListView.itemTemplate>
<StackLayout>
<Label text="{{title}}" textWrap="true" />
</StackLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>
</Page>
main-page.ts
import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {ListView} from "ui/list-view"
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
let page = <Page>args.object;
var array=[];
for(var i=0;i<100;i++){
array.push({title:"title"+i});
}
page.bindingContext = {source:array};
setTimeout(function(){
var listview:ListView =<ListView> page.getViewById("lvid");
listview.android.smoothScrollToPosition(60);
}, 4000)
}
Just to let everyone who are still looking for this know, they have added the scrollToIndexAnimated method to ListView since v4.2.0
https://github.com/NativeScript/NativeScript/blob/master/CHANGELOG.md#420-2018-08-08
I am new to NativeScript and I need to be able to change the text of a label. I am confused about how to do this and need help. How can I do this? Thanks in advance!
First way:
You can set an id for the label that you want to get, and reference it in controller file(which is .js) by using getViewById:
In page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
<Label id="myLabel" text="" />
</Page>
In page.js:
function onLoaded(args) {
var page = args.object;
var myLabel = page.getViewById("myLabel");
myLabel.text = "Hello World";
}
exports.onLoaded = onLoaded
Second way:
You bind a context(an Observable object) to page.xml and set the text of label by one of that context's properties. By this way when you change the value of property, the label will update the text by itself:
In page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
<Label text="{{ myText }}" />
</Page>
In page.js:
var Observable = require("data/observable").Observable;
function onLoaded(args) {
var page = args.object;
var context = new Observable({
myText: "Hello World"
})
page.bindingContext = context;
//Change label's text
context.set("myText", "Goodbye World");
}
exports.onLoaded = onLoaded;
I’m trying to get a NativeScript <ListView> to be transparent on iOS and I’m failing. I found an old thread on the topic at https://groups.google.com/forum/#!topic/nativescript/-MIWcQo-l6k, but when I try the solution it doesn’t work for me. Here’s my complete code:
/* app.css */
Page { background-color: black; }
<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
<ListView id="list-view" items="{{ items }}" itemLoading="itemLoading">
<ListView.itemTemplate>
<Label text="{{ name }}" />
</ListView.itemTemplate>
</ListView>
</Page>
// main-page.js
var ios = require("utils/utils");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var page;
var items = new ObservableArray([]);
var pageData = new Observable();
exports.loaded = function(args) {
page = args.object;
page.bindingContext = pageData;
// Toss a few numbers in the list for testing
items.push({ name: "1" });
items.push({ name: "2" });
items.push({ name: "3" });
pageData.set("items", items);
};
exports.itemLoading = function(args) {
var cell = args.ios;
if (cell) {
// Use ios.getter for iOS 9/10 API compatibility
cell.backgroundColor = ios.getter(UIColor.clearColor);
}
}
Any help would be appreciated. Thanks!
Don't forget to set the listview to transparent, seems to have a backgroundcolor itself
ListView{
background-color: transparent;
}
Currently with NativeScript 2.4 the following works
var cell = args.ios;
if (cell) {
cell.selectionStyle = UITableViewCellSelectionStyleNone
}
And if you want to change the selection highlight color here is a simple approach, I have not tested performance but it works okay on an iPhone 6.
import { Color } from 'color';
cell.selectedBackgroundView = UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
let blue = new Color('#3489db');
cell.selectedBackgroundView.backgroundColor = blue.ios
Not sure if there are better ways to do this, but this is what worked for me with NativeScript 2.4 on iOS to both A) make the ListView background transparent, and B) change the color when an item is tapped:
let lvItemLoading = (args) => {
let cell = args.ios;
if (cell) {
// Make the iOS listview background transparent
cell.backgroundColor = ios.getter(cell, UIColor.clearColor);
// Create new background view for selected state
let bgSelectedView = UIView.alloc().init();
bgSelectedView.backgroundColor = new Color("#777777").ios;
bgSelectedView.layer.masksToBounds = true;
cell.selectedBackgroundView = bgSelectedView;
}
};