javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

got to layouts

Browse Source
This commit is contained in:
Hristo Hristov
2016-12-09 17:57:17 +02:00
parent 07e2102c5d
commit 19ee47ba24
76 changed files with 941 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
tns-core-modules/ui/tab-view/tab-view-common.ts
View File

@@ -53,7 +53,7 @@ export abstract class TabViewItemBase extends Bindable implements TabViewItemDef
}
export module knownCollections {
export let items = "items";
export const items = "items";
}
export class TabViewBase extends View implements TabViewDefinition, AddArrayFromBuilder {
@@ -61,8 +61,8 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
public items: TabViewItemDefinition[];
public selectedIndex: number;
public selectedColor: Color;
public tabsBackgroundColor: Color;
public androidOffscreenTabLimit: number;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
protected previousItems: TabViewItemDefinition[];
@@ -133,15 +133,15 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
}
}
public _onBindingContextChanged(oldValue: any, newValue: any) {
super._onBindingContextChanged(oldValue, newValue);
if (this.items && this.items.length > 0) {
// public _onBindingContextChanged(oldValue: any, newValue: any) {
// super._onBindingContextChanged(oldValue, newValue);
// if (this.items && this.items.length > 0) {
for (let i = 0, length = this.items.length; i < length; i++) {
this.items[i].bindingContext = newValue;
}
}
}
// for (let i = 0, length = this.items.length; i < length; i++) {
// this.items[i].bindingContext = newValue;
// }
// }
// }
public onItemsPropertyChanged(oldValue: TabViewItemDefinition[], newValue: TabViewItemDefinition[]) {
this.previousItems = oldValue;
@@ -179,6 +179,15 @@ export const selectedIndexProperty = new CoercibleProperty<TabViewBase, number>(
});
selectedIndexProperty.register(TabViewBase);
export const iosIconRenderingModeProperty = new Property<TabViewBase, "automatic" | "alwaysOriginal" | "alwaysTemplate">({name: "iosIconRenderingMode", defaultValue: "automatic" });
iosIconRenderingModeProperty.register(TabViewBase);
export const androidOffscreenTabLimitProperty = new Property<TabViewBase, number>({
name: "androidOffscreenTabLimit", defaultValue: 1, affectsLayout: isIOS,
valueConverter: (v) => parseInt(v)
});
androidOffscreenTabLimitProperty.register(TabViewBase);
export const tabTextColorProperty = new CssProperty<Style, Color>({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
tabTextColorProperty.register(Style);

94
tns-core-modules/ui/tab-view/tab-view.android.ts
View File

@@ -1,8 +1,11 @@
import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, selectedColorProperty, tabsBackgroundColorProperty, traceCategory,
View, colorProperty, fontInternalProperty, layout, Bindable, isIOS, Color, Font } from "./tab-view-common"
import {
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty,
androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty,
fontInternalProperty, traceCategory, View, colorProperty, layout, Bindable, isIOS, Color, Font, traceEnabled, traceWrite
} from "./tab-view-common"
import { textTransformProperty, TextTransform, getTransformedText } from "ui/text-base";
import { fromFileOrResource } from "image-source";
import { enabled as traceEnabled, write as traceWrite } from "trace";
import { RESOURCE_PREFIX, ad } from "utils/utils";
export * from "./tab-view-common";
@@ -203,9 +206,6 @@ export class TabView extends TabViewBase {
}
this._viewPager = new android.support.v4.view.ViewPager(this._context);
if (this._androidOffscreenTabLimit !== 1) {
this._viewPager.setOffscreenPageLimit(this._androidOffscreenTabLimit);
}
this._viewPager.setId(this._androidViewId);
let lp = new org.nativescript.widgets.CommonLayoutParams();
lp.row = 1;
@@ -263,7 +263,7 @@ export class TabView extends TabViewBase {
}
let nativeSelectedIndex = this._viewPager.getCurrentItem();
let selectedIndex = this.selectedIndex;
let selectedIndex = this.selectedIndex;
if (selectedIndex < 0) {
this.selectedIndex = nativeSelectedIndex;
}
@@ -298,6 +298,13 @@ export class TabView extends TabViewBase {
return result;
}
get [androidOffscreenTabLimitProperty.native](): number {
return this._viewPager.getOffscreenPageLimit();
}
set [androidOffscreenTabLimitProperty.native](value: number) {
this._viewPager.setOffscreenPageLimit(value);
}
get [selectedIndexProperty.native](): number {
return -1;
}
@@ -315,20 +322,18 @@ export class TabView extends TabViewBase {
this._onItemsPropertyChangedSetNativeValue();
}
get [selectedColorProperty.native](): number {
//from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html
return 0xFF33B5E5;
get [tabTextColorProperty.native](): number {
return this._tabLayout.getTabTextColor();
}
set [selectedColorProperty.native](value: number | Color) {
let tabLayout = this._tabLayout;
set [colorProperty.native](value: number | Color) {
let color = value instanceof Color ? value.android : value;
tabLayout.setSelectedIndicatorColors([color]);
this._tabLayout.setTabTextColor(color);
}
get [tabsBackgroundColorProperty.native](): android.graphics.drawable.Drawable {
get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable {
return this._tabLayout.getBackground();
}
set [tabsBackgroundColorProperty.native](value: android.graphics.drawable.Drawable | Color) {
set [tabBackgroundColorProperty.native](value: android.graphics.drawable.Drawable | Color) {
if (value instanceof Color) {
this._tabLayout.setBackgroundColor(value.android);
} else {
@@ -336,30 +341,25 @@ export class TabView extends TabViewBase {
}
}
get [colorProperty.native](): number {
let items = this.items;
if (items && items.length > 0) {
let tv = this._tabLayout.getTextViewForItemAt(0);
if (tv) {
return tv.getTextColors().getDefaultColor();
}
}
return undefined;
get [selectedTabTextColorProperty.native](): number {
return this._tabLayout.getSelectedTabTextColor();
}
set [colorProperty.native](value: number | Color) {
let items = this.items;
if (items && items.length > 0) {
let color = value instanceof Color ? value.android : value;
let tabLayout = this._tabLayout;
for (let i = 0, length = items.length; i < length; i++) {
let tv = tabLayout.getTextViewForItemAt(i);
tv.setTextColor(color);
}
}
set [selectedTabTextColorProperty.native](value: number | Color) {
let color = value instanceof Color ? value.android : value;
this._tabLayout.setTabTextColor(color);
}
get [androidSelectedTabHighlightColorProperty.native](): number {
//from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html
return 0xFF33B5E5;
}
set [androidSelectedTabHighlightColorProperty.native](value: number | Color) {
let tabLayout = this._tabLayout;
let color = value instanceof Color ? value.android : value;
tabLayout.setSelectedIndicatorColors([color]);
}
// TODO: Move this to TabViewItem
get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
let items = this.items;
if (items && items.length > 0) {
@@ -404,4 +404,22 @@ export class TabView extends TabViewBase {
}
}
}
}
// TODO: Move this to TabViewItem
get [textTransformProperty.native](): TextTransform {
return "none";
}
set [textTransformProperty.native](value: TextTransform) {
let tabLayout = this._tabLayout;
let items = this.items;
if (!items) {
return;
}
for (let i = 0, count = items.length; i < count; i++) {
const textView = tabLayout.getTextViewForItemAt(i);
const result = getTransformedText(items[i].title, value);
textView.setText(result);
}
}
}

54
tns-core-modules/ui/tab-view/tab-view.d.ts vendored
View File

@@ -2,8 +2,8 @@
* Contains the TabView class, which represents a standard content component with tabs.
*/
declare module "ui/tab-view" {
import { View, Bindable, Property, EventData, Color } from "ui/core/view";
import { View, Bindable, Property, CssProperty, Style, EventData, Color } from "ui/core/view";
/**
* Represents a tab view entry.
*/
@@ -53,41 +53,6 @@ declare module "ui/tab-view" {
*/
selectedIndex: number;
/**
* [Deprecated. Please use `selectedTabTextColor` to color the titles of the tabs on both platforms and `androidSelectedTabHighlightColor` to color the horizontal line at the bottom of the tab on Android.] Gets or sets the color used for selected item.
*/
selectedColor: Color;
/**
* [Deprecated. Please use `tabBackgroundColor` instead] Gets or sets the color used for background of the tab items.
*/
tabsBackgroundColor: Color;
/**
* Gets or sets the text color of the tabs titles.
*/
tabTextColor: color.Color;
/**
* Gets or sets the background color of the tabs.
*/
tabBackgroundColor: color.Color;
/**
* Gets or sets the text color of the selected tab title.
*/
selectedTabTextColor: color.Color;
/**
* Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
*/
androidSelectedTabHighlightColor: color.Color;
/**
* Gets or sets the text transform of the tab titles.
*/
textTransform: string;
/**
* Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
*/
@@ -105,7 +70,7 @@ declare module "ui/tab-view" {
* - alwaysOriginal
* - alwaysTemplate
*/
iosIconRenderingMode: string;
iosIconRenderingMode: "automatic" | "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.
@@ -132,8 +97,13 @@ declare module "ui/tab-view" {
on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
}
export const itemsProperty: Property<TabView, TabViewItem[]>;
export const selectedIndexProperty: Property<TabView, number>;
export const selectedColorProperty: Property<TabView, Color>;
export const tabsBackgroundColorProperty: Property<TabView, Color>;
export const itemsProperty: Property<TabView, TabViewItem[]>;
export const selectedIndexProperty: Property<TabView, number>;
export const tabTextColorProperty: CssProperty<Style, Color>;
export const tabBackgroundColorProperty: CssProperty<Style, Color>;
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">;
}

96
tns-core-modules/ui/tab-view/tab-view.ios.ts
View File

@@ -1,10 +1,13 @@
import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, selectedColorProperty, tabsBackgroundColorProperty, traceCategory,
Font, View, colorProperty, fontInternalProperty, layout, Color } from "./tab-view-common"
import {
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty, traceCategory,
Font, View, colorProperty, fontInternalProperty, layout, Color, traceEnabled, traceWrite, traceCategories
} from "./tab-view-common"
import { textTransformProperty, TextTransform, getTransformedText } from "ui/text-base";
import { fromFileOrResource } from "image-source";
import { Page } from "ui/page";
import { ios } from "utils/utils";
import { enabled as traceEnabled, write as traceWrite, categories as traceCategories } from "trace";
import getter = ios.getter;
@@ -286,26 +289,8 @@ export class TabView extends TabViewBase {
}
}
private _iconRenderingMode: string;
get iosIconRenderingMode(): string {
return this._iconRenderingMode;
}
set iosIconRenderingMode(value: string) {
if (this._iconRenderingMode !== value){
this._iconRenderingMode = value;
this._iconsCache = {};
if (this.items && this.items.length){
for (let i = 0, length = this.items.length; i < length; i++) {
if (this.items[i].iconSource) {
(<any>this.items[i])._update();
}
}
}
}
}
private _getIconRenderingMode(): UIImageRenderingMode {
switch(this._iconRenderingMode) {
switch (this.iosIconRenderingMode) {
case "alwaysOriginal":
return UIImageRenderingMode.AlwaysOriginal;
case "alwaysTemplate":
@@ -388,9 +373,11 @@ export class TabView extends TabViewBase {
}
private _updateIOSTabBarColorsAndFonts(): void {
const tabBar = this._ios.tabBar;
if (!this.items) {
return;
}
tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
const tabBar = this._ios.tabBar;
const states = getTitleAttributesForStates(this);
for (let i = 0, count = tabBar.items.count; i < count; i++) {
@@ -400,6 +387,18 @@ export class TabView extends TabViewBase {
}
}
private _updateIOSTabBarTextTransform(newValue: TextTransform): void {
if (!this.items) {
return;
}
const tabBar = this.ios.tabBar;
for (let i = 0, count = tabBar.items.count; i < count; i++) {
const item = tabBar.items[i];
item.title = getTransformedText(item.title, newValue);
}
}
private _onItemsPropertyChangedSetNativeValue() {
let oldValue = <TabViewItem[]>this.previousItems;
if (oldValue) {
@@ -432,26 +431,60 @@ export class TabView extends TabViewBase {
this._onItemsPropertyChangedSetNativeValue();
}
get [colorProperty.native](): UIColor {
get [tabTextColorProperty.native](): UIColor {
return null;
}
set [colorProperty.native](value: UIColor) {
set [tabTextColorProperty.native](value: UIColor) {
this._updateIOSTabBarColorsAndFonts();
}
get [tabsBackgroundColorProperty.native](): UIColor {
get [tabBackgroundColorProperty.native](): UIColor {
return this._ios.tabBar.barTintColor;
}
set [tabsBackgroundColorProperty.native](value: UIColor | Color) {
set [tabBackgroundColorProperty.native](value: UIColor | Color) {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
get [selectedTabTextColorProperty.native](): UIColor {
return this._ios.tabBar.tintColor;
}
set [selectedTabTextColorProperty.native](value: UIColor) {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
this._updateIOSTabBarColorsAndFonts();
}
// TODO: Move this to TabViewItem
get [textTransformProperty.native](): TextTransform {
return "none";
}
set [textTransformProperty.native](value: TextTransform) {
this._updateIOSTabBarTextTransform(value);
}
// TODO: Move this to TabViewItem
get [fontInternalProperty.native](): Font {
return null;
}
set [fontInternalProperty.native](value: Font) {
this._updateIOSTabBarColorsAndFonts();
}
// TODO: Move this to TabViewItem
get [iosIconRenderingModeProperty.native](): "automatic" | "alwaysOriginal" | "alwaysTemplate" {
return "automatic";
}
set [iosIconRenderingModeProperty.native](value: "automatic" | "alwaysOriginal" | "alwaysTemplate") {
this._iconsCache = {};
let items = this.items;
if (items && items.length) {
for (let i = 0, length = items.length; i < length; i++) {
const item = items[i];
if (items[i].iconSource) {
(<TabViewItem>items[i])._update();
}
}
}
}
}
function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
@@ -461,8 +494,9 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
}
const selectedState = {};
if (tabView.selectedColor instanceof Color) {
selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
let tabItemTextColor = tabView.style.tabTextColor;
if (tabItemTextColor instanceof Color) {
selectedState[UITextAttributeTextColor] = tabItemTextColor.ios;
}
else {
selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
@@ -477,4 +511,4 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
normalState: normalState,
selectedState: selectedState
};
}
}