Customizing View Elements

You can extend existing NativeScript UI elements to customize their behavior or appearance.

This guide demonstrates how to customize the font size and highlight color of the ListPicker element.

Customizing an Existing View Element

To customize an existing element such as ListPicker, follow a similar process as described in the Creating Custom Native Elements guide.

Directory Structure

Begin by creating a new folder structure for your customized ListPicker:

bash

./list-picker-custom
├──common.ts
├──index.android.ts
├──index.d.ts
└──index.ios.ts

Adjusting Font Size on iOS

To modify the font size for a ListPicker on iOS, first refer to Apple's UIPickerView documentation. Since NativeScript's ListPicker directly utilizes UIPickerView, any native iOS modifications apply.

For instance, this Stack Overflow solution describes how to change the font size.

Extending ListPicker for Custom Font Size

Create the following implementation in index.ios.ts, extending the default ListPicker:

typescript

import { ListPicker } from'@nativescript/core'
import { selectedIndexProperty } from'@nativescript/core/ui/list-picker/list-picker-common'

exportclassCustomListPickerextendsListPicker {
private_delegate:ListPickerDelegateImpl
private_dataSource:ListPickerDataSource

initNativeView() {
this._delegate = ListPickerDelegateImpl.initWithOwner(newWeakRef(this))
this.nativeViewProtected.delegate =this._delegate

this._dataSource = ListPickerDataSource.initWithOwner(newWeakRef(this))
this.nativeViewProtected.dataSource =this._dataSource
 }

onLoaded() {
super.onLoaded()
// Customize highlight color
for (let i =0; i <this.nativeViewProtected.subviews.count; i++) {
constsubview=this.nativeViewProtected.subviews.objectAtIndex(
 i,
 ) asUIView
if (subview.frame.size.height <=34) {
// Tip: https://www.uicolor.io
 subview.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(
0,
0.66,
1,
0.4,
 )
 }
 }
 }
}

@NativeClass
classListPickerDelegateImplextendsNSObjectimplementsUIPickerViewDelegate {
staticObjCProtocols= [UIPickerViewDelegate]
private_owner:WeakRef<ListPicker>

staticinitWithOwner(owner:WeakRef<ListPicker>):ListPickerDelegateImpl {
constdelegate= <ListPickerDelegateImpl>ListPickerDelegateImpl.new()
 delegate._owner = owner
return delegate
 }

pickerViewViewForRowForComponentReusingView(
pickerView:UIPickerView,
row:number,
 ):UIView {
constowner=this._owner?.deref()
constlabel= UILabel.new()
 label.font = UIFont.systemFontOfSize(26) // Custom font size
 label.text = owner?.items[row]
 label.textAlignment = NSTextAlignment.Center
return label
 }

pickerViewDidSelectRowInComponent(
pickerView:UIPickerView,
row:number,
 ):void {
constowner=this._owner?.deref()
if (owner) {
 selectedIndexProperty.nativeValueChange(owner, row)
 owner.updateSelectedValue(row)
 }
 }
}

@NativeClass
classListPickerDataSourceextendsNSObjectimplementsUIPickerViewDataSource {
staticObjCProtocols= [UIPickerViewDataSource]
private_owner:WeakRef<ListPicker>

staticinitWithOwner(owner:WeakRef<ListPicker>):ListPickerDataSource {
constdataSource= <ListPickerDataSource>ListPickerDataSource.new()
 dataSource._owner = owner
return dataSource
 }

numberOfComponentsInPickerView():number {
return1
 }

pickerViewNumberOfRowsInComponent():number {
constowner=this._owner?.deref()
return owner?.items?.length||0
 }
}

In this code, the font size is customized in the delegate's pickerViewViewForRowForComponentReusingView method:

typescript

label.font = UIFont.systemFontOfSize(26)

Customizing Highlight Color

You can also customize the highlight color by modifying the subviews' background colors in the onLoaded() lifecycle hook (shown in the example above). Adjust RGB and alpha values to achieve your desired color.

Registering Your Custom Element

Interactive StackBlitz Example

Experiment live with this custom ListPicker in this StackBlitz demo. Modify the font size or highlight color directly and observe the immediate changes.

[フレーム]