In this post, I will detail a simple way you can put in another list view that allows the user to jump quickly to a contact.
First the XML
<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" backgroundColor="transparent" xmlns:imageButton="helpers/buttonhelper"> <GridLayout columns="*" rows="auto,*" width="320" height="500" cssClass="popup"> <GridLayout columns="auto,*" rows="auto" cssClass="popuptitle" row="0" col="0"> <Image src="{{image}}" cssClass="iconwhite" col="0"/> <Label text="{{title}}" textWrap="true" col="1"/> </GridLayout> <StackLayout row="1" col="0" cssClass="popupouter"> <GridLayout columns="*,30" rows="auto,*,auto,auto,auto" cssClass="popupinner"> <SearchBar text="{{search}}" row="0" col="0" colSpan="2" visibility="{{searchVisibility}}"/> <ListView row="1" col="0" items="{{values}}" id="listView" marginBottom="5"> </ListView> <ListView row="1" col="1" items="{{letters}}" id="listViewLetters" marginBottom="5" cssClass="itembreak"> </ListView> <Label text="{{name}}" row="2" col="0" colSpan="2" cssClass="itembreak" textWrap="true"/> <Label text="{{key}}" row="3" col="0" colSpan="2" cssClass="itemtitle" textWrap="true"/> <StackLayout orientation="horizontal" horizontalAlignment="center" row="4" col="0" colSpan="2"> <imageButton:ImageButton textPadded="{{languageData.OK}}" tap="{{ok}}" icon="tick"/> <imageButton:ImageButton textPadded="{{languageData.Cancel}}" tap="{{cancel}}" icon="cross"/> </StackLayout> </GridLayout> </StackLayout> </GridLayout> </Page>Then relevant sections of the code.
export interface IKeyLetter { letter: string; index: number; } var listLettersObservable: observableArray.ObservableArray<IKeyLetter> = new observableArray.ObservableArray<IKeyLetter>(); .... .... .... // loop through list of contacts and make up list of first letters updateKeys() { listLettersObservable.splice(0); var observableKeys: Array<IKeyLetter> = []; var firstLetter = ""; for (var i = 0, imax = listOptionsObservable.length; i < imax; i++) { var listOption = listOptionsObservable.getItem(i); var letter = listOption.contact.name.substr(0, 1).toUpperCase(); if (letter != firstLetter) { observableKeys.push({ letter: letter, index: i }); firstLetter = letter; } } listLettersObservable.push(observableKeys); } .... .... .... // Add label with letter to listview listViewLetters.on(listview.ListView.itemLoadingEvent,(args: listview.ItemEventData) => { var observableKey = listLettersObservable.getItem(args.index); var labelAdd = new label.Label(); labelAdd.text = observableKey.letter; args.view = labelAdd; }); // when letter tapped, scroll other list to item required listViewLetters.on(listview.ListView.itemTapEvent,(args: listview.ItemEventData) => { var keyLetter = listLettersObservable.getItem(args.index); if (platform.device.os == platform.platformNames.android) { this.listView.android.setSelection(keyLetter.index); } if (platform.device.os == platform.platformNames.ios) { var indexPath = new NSIndexPath(keyLetter.index); this.listView.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(indexPath, UITableViewScrollPosition.UITableViewScrollPositionTop, true); } });
No comments:
Post a Comment