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

Themes and styling

Browse Source
This commit is contained in:
vakrilov
2015-09-01 15:01:15 +03:00
parent 254e4a55a1
commit ff9ee707c0
6 changed files with 112 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
org.nativescript.widgets.d.ts vendored
View File

@ -143,11 +143,20 @@
setBorderWidth(width: number): void;
}
export class SlidingTabLayout extends android.widget.HorizontalScrollView {
export class TabLayout extends android.widget.HorizontalScrollView {
constructor(context: android.content.Context);
constructor(context: android.content.Context, attrs: android.util.IAttributeSet);
constructor(context: android.content.Context, attrs: android.util.IAttributeSet, defStyle: number);
setDistributeEvenly(distributeEvenly: boolean): void;
setViewPager(viewPager: android.support.v4.view.ViewPager): void;
setSelectedIndicatorColors(color: Array<number>): void;
setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
}
export class TabItemSpec {
title: string;
iconId: number;
iconDrawable: android.graphics.drawable.Drawable;
}
}
}

7
ui/action-bar/action-bar.android.ts
View File

@ -10,7 +10,6 @@ import dts = require("ui/action-bar");
import view = require("ui/core/view");
var ACTION_ITEM_ID_OFFSET = 1000;
var API_LVL = android.os.Build.VERSION.SDK_INT;
global.moduleMerge(common, exports);
@ -299,11 +298,9 @@ function getIconVisibility(iconVisibility: string): boolean {
case enums.AndroidActionBarIconVisibility.always:
return true;
case enums.AndroidActionBarIconVisibility.never:
return false;
case enums.AndroidActionBarIconVisibility.auto:
case enums.AndroidActionBarIconVisibility.never:
default:
return API_LVL <= 20;
return false;
}
}

1
ui/page/page.android.ts
View File

@ -4,7 +4,6 @@ import view = require("ui/core/view");
import trace = require("trace");
import color = require("color");
import actionBarModule = require("ui/action-bar");
import types = require("utils/types");
import gridModule = require("ui/layouts/grid-layout");
import enums = require("ui/enums");

60
ui/tab-view/tab-view.android.ts
View File

@ -4,8 +4,14 @@ import dependencyObservable = require("ui/core/dependency-observable");
import view = require("ui/core/view");
import trace = require("trace");
import types = require("utils/types");
import utils = require("utils/utils");
import imageSource = require("image-source");
var VIEWS_STATES = "_viewStates";
var ACCENT_COLOR = "colorAccent";
var PRIMARY_COLOR = "colorPrimary";
var DEFAULT_ELEVATION = 4;
//var RESOURCE_PREFIX = "res://";
global.moduleMerge(common, exports);
@ -142,7 +148,7 @@ class PageChangedListener extends android.support.v4.view.ViewPager.SimpleOnPage
export class TabView extends common.TabView {
private _grid: org.nativescript.widgets.GridLayout;
private _tabLayout: org.nativescript.widgets.SlidingTabLayout;
private _tabLayout: org.nativescript.widgets.TabLayout;
private _viewPager: android.support.v4.view.ViewPager;
private _pagerAdapter: android.support.v4.view.PagerAdapter;
private _androidViewId: number;
@ -160,10 +166,21 @@ export class TabView extends common.TabView {
this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
this._tabLayout = new org.nativescript.widgets.SlidingTabLayout(this._context);
this._tabLayout.setDistributeEvenly(true);
this._tabLayout = new org.nativescript.widgets.TabLayout(this._context);
this._grid.addView(this._tabLayout);
this.setElevation();
let accentColor = utils.ad.resources.getPalleteColor(ACCENT_COLOR, this._context);
if (accentColor) {
this._tabLayout.setSelectedIndicatorColors([accentColor]);
}
let primaryColor = utils.ad.resources.getPalleteColor(PRIMARY_COLOR, this._context);
if (primaryColor) {
this._tabLayout.setBackgroundColor(primaryColor);
}
this._viewPager = new android.support.v4.view.ViewPager(this._context);
var lp = new org.nativescript.widgets.CommonLayoutParams()
lp.row = 1;
@ -179,26 +196,39 @@ export class TabView extends common.TabView {
(<any>this._viewPager).addOnPageChangeListener(this._pageChagedListener);
}
private setElevation() {
var compat = <any>android.support.v4.view.ViewCompat;
if (compat.setElevation) {
let val = DEFAULT_ELEVATION * utils.layout.getDisplayDensity();
compat.setElevation(this._grid, val);
compat.setElevation(this._tabLayout, val);
}
}
public _onItemsPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
trace.write("TabView._onItemsPropertyChangedSetNativeValue(" + data.oldValue + " ---> " + data.newValue + ");", common.traceCategory);
if (data.oldValue) {
this._viewPager.setAdapter(null);
this._pagerAdapter = null;
this._tabLayout.setViewPager(null);
this._tabLayout.setItems(null, null);
}
if (data.newValue) {
var items: Array<definition.TabViewItem> = data.newValue;
var tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
items.forEach((item, idx, arr) => {
if (types.isNullOrUndefined(item.view)) {
throw new Error("View of TabViewItem at index " + idx + " is " + item.view);
}
tabItems.push(this.createTabItem(item));
});
this._pagerAdapter = new PagerAdapterClass(this, data.newValue);
this._viewPager.setAdapter(this._pagerAdapter);
this._tabLayout.setViewPager(this._viewPager);
this._tabLayout.setItems(tabItems, this._viewPager);
}
this._updateSelectedIndexOnItemsPropertyChanged(data.newValue);
@ -221,4 +251,24 @@ export class TabView extends common.TabView {
var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
this.notify(args);
}
private createTabItem(item: definition.TabViewItem): org.nativescript.widgets.TabItemSpec {
var result = new org.nativescript.widgets.TabItemSpec();
result.title = item.title;
if (item.iconSource) {
if (item.iconSource.indexOf(utils.RESOURCE_PREFIX) === 0) {
result.iconId = utils.ad.resources.getDrawableId(item.iconSource.substr(utils.RESOURCE_PREFIX.length));
}
else {
var is = imageSource.fromFileOrResource(item.iconSource);
if (is) {
result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
}
}
}
return result;
}
}

35
utils/utils.android.ts
View File

@ -1,4 +1,5 @@
import common = require("utils/utils-common");
import trace = require("trace");
global.moduleMerge(common, exports);
@ -76,6 +77,9 @@ export module ad {
}
export module resources {
var attr;
var attrCache = new Map<string, number>();
export function getDrawableId(name) {
return getId(":drawable/" + name);
}
@ -90,6 +94,37 @@ export module ad {
var uri = packageName + name;
return resources.getIdentifier(uri, null, null);
}
export function getPalleteColor(name: string, context: android.content.Context): number {
if (attrCache.has(name)) {
return attrCache.get(name);
}
var result = 0;
try {
if (!attr) {
attr = java.lang.Class.forName("android.support.v7.appcompat.R$attr")
}
let colorID = 0;
let field = attr.getField(name);
if (field) {
colorID = field.getInt(null);
}
if (colorID) {
let typedValue = new android.util.TypedValue();
context.getTheme().resolveAttribute(colorID, typedValue, true);
result = typedValue.data;
}
}
catch (ex) {
trace.write("Cannot get pallete color: " + name, trace.categories.Error, trace.messageType.error);
}
attrCache.set(name, result);
return result;
}
}
}

7
utils/utils.d.ts vendored
View File

@ -88,11 +88,18 @@
* @param name - Name of the resource.
*/
export function getStringId(name)
/**
* Gets the id from a given name.
* @param name - Name of the resource.
*/
export function getId(name: string): number;
/**
* Gets a color from the current theme.
* @param name - Name of the color resource.
*/
export function getPalleteColor(name: string, context: android.content.Context): number;
}
export function async<T>(doInBackground: () => T, callback: (result: T) => void);