feat(android): tab view icon rendering mode (#9605)

Co-authored-by: wSedlacek <wsedlacekc@gmail.com>
This commit is contained in:
William Sedlacek
2022-02-16 19:10:31 -08:00
committed by Nathan Walker
parent 08028dd9f4
commit 66d8afffc1
9 changed files with 104 additions and 11 deletions

View File

@@ -1,7 +1,7 @@
import { TabViewItem as TabViewItemDefinition } from '.';
import { Font } from '../styling/font';
import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty, androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty, traceCategory, traceMissingIcon } from './tab-view-common';
import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty, androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty, traceCategory, traceMissingIcon, androidIconRenderingModeProperty } from './tab-view-common';
import { textTransformProperty, getTransformedText } from '../text-base';
import { CoreTypes } from '../../core-types';
import { ImageSource } from '../../image-source';
@@ -699,6 +699,16 @@ export class TabView extends TabViewBase {
}
}
private getNativeRenderingMode(mode: 'alwaysOriginal' | 'alwaysTemplate'): number {
switch (mode) {
case 'alwaysTemplate':
return org.nativescript.widgets.TabIconRenderingMode.template;
default:
case 'alwaysOriginal':
return org.nativescript.widgets.TabIconRenderingMode.original;
}
}
public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
this._tabLayout.updateItemAt(index, spec);
}
@@ -710,6 +720,13 @@ export class TabView extends TabViewBase {
this._viewPager.setOffscreenPageLimit(value);
}
[androidIconRenderingModeProperty.getDefault](): 'alwaysOriginal' | 'alwaysTemplate' {
return 'alwaysOriginal';
}
[androidIconRenderingModeProperty.setNative](value: 'alwaysOriginal' | 'alwaysTemplate') {
this._tabLayout.setIconRenderingMode(this.getNativeRenderingMode(value));
}
[selectedIndexProperty.setNative](value: number) {
const smoothScroll = this.androidTabsPosition === 'top';

View File

@@ -112,6 +112,14 @@ export class TabView extends View {
*/
iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
/**
* Gets or sets the rendering mode of tab icons on Android. Defaults to "original"
* Valid values are:
* - alwaysOriginal
* - alwaysTemplate
*/
androidIconRenderingMode: 'alwaysOriginal' | 'alwaysTemplate';
/**
* Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state.
* Tabs beyond this limit will be recreated from the TabView when needed.
@@ -160,3 +168,4 @@ export const selectedTabTextColorProperty: CssProperty<Style, Color>;
export const androidSelectedTabHighlightColorProperty: CssProperty<Style, Color>;
export const androidOffscreenTabLimitProperty: Property<TabView, number>;
export const iosIconRenderingModeProperty: Property<TabView, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>;
export const androidIconRenderingModeProperty: Property<TabView, 'alwaysOriginal' | 'alwaysTemplate'>;

View File

@@ -93,6 +93,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
public androidTabsPosition: 'top' | 'bottom';
public androidSwipeEnabled: boolean;
public iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
public androidIconRenderingMode: 'alwaysOriginal' | 'alwaysTemplate';
get androidSelectedTabHighlightColor(): Color {
return this.style.androidSelectedTabHighlightColor;
@@ -250,6 +251,9 @@ itemsProperty.register(TabViewBase);
export const iosIconRenderingModeProperty = new Property<TabViewBase, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'iosIconRenderingMode', defaultValue: 'automatic' });
iosIconRenderingModeProperty.register(TabViewBase);
export const androidIconRenderingModeProperty = new Property<TabViewBase, 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'androidIconRenderingMode', defaultValue: 'alwaysOriginal' });
androidIconRenderingModeProperty.register(TabViewBase);
export const androidOffscreenTabLimitProperty = new Property<TabViewBase, number>({
name: 'androidOffscreenTabLimit',
defaultValue: 1,