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

Merge pull request #137 from NativeScript/segmented-bar-fixes

Browse Source 
Segmented bar fixes
This commit is contained in:
Vladimir Enchev
2015-03-05 15:33:37 +02:00
parent 4d5d890461 89b7e78689
commit aa1801769c
10 changed files with 217 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/TelerikNEXT/main-page.xml
View File

@ -27,9 +27,9 @@
<SegmentedBar selectedIndex="{{ selectedIndex }}" >
<SegmentedBar.items>
<SegmentedBarEntry title="MAY 3" />
<SegmentedBarEntry title="MAY 4" />
<SegmentedBarEntry title="MAY 5" />
<SegmentedBarItem title="MAY 3" />
<SegmentedBarItem title="MAY 4" />
<SegmentedBarItem title="MAY 5" />
</SegmentedBar.items>
</SegmentedBar>

9
apps/tests/xml-declaration/mainPage.xml
View File

@ -6,6 +6,15 @@
<TabEntry title="Tab 1">
<TabEntry.view>
<StackLayout>
<SegmentedBar selectedIndex="1" style="background-color: red; color: white" selectedBackgroundColor="green">
<SegmentedBar.items>
<SegmentedBarItem title="MAY 3" />
<SegmentedBarItem title="MAY 4" />
<SegmentedBarItem title="MAY 5" />
</SegmentedBar.items>
</SegmentedBar>
<ListPicker items="{{ someItems }}" selectedIndex="3"/>
<DatePicker year="1976" month="10" day="30" />
<TimePicker hour="10" minute="34" />

55
color/color.d.ts vendored
View File

@ -6,53 +6,54 @@ declare module "color" {
* Represents a color object. Stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.
*/
class Color {
constructor(knownColor: string);
constructor(hex: string);
constructor(argb: number);
constructor(alpha: number, red: number, green: number, blue: number);
/**
* Gets the Alpha component (in the [0, 255] range) of this color. This is a read-only property.
*/
/**
* Gets the Alpha component (in the [0, 255] range) of this color. This is a read-only property.
*/
public a: number;
/**
* Gets the Red component (in the [0, 255] range) of this color. This is a read-only property.
*/
/**
* Gets the Red component (in the [0, 255] range) of this color. This is a read-only property.
*/
public r: number;
/**
* Gets the Green component (in the [0, 255] range) of this color. This is a read-only property.
*/
/**
* Gets the Green component (in the [0, 255] range) of this color. This is a read-only property.
*/
public g: number;
/**
* Gets the Blue component (in the [0, 255] range) of this color. This is a read-only property.
*/
/**
* Gets the Blue component (in the [0, 255] range) of this color. This is a read-only property.
*/
public b: number;
/**
* Gets the Hexadecimal string representation of this color. This is a read-only property.
*/
/**
* Gets the Hexadecimal string representation of this color. This is a read-only property.
*/
public hex: string;
/**
* Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property.
*/
/**
* Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property.
*/
public argb: number;
/**
* Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property.
*/
/**
* Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property.
*/
public name: string;
/**
* Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property.
*/
/**
* Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property.
*/
android: number;
/**
* Gets the iOS-specific UIColor value representation. This is a read-only property.
*/
/**
* Gets the iOS-specific UIColor value representation. This is a read-only property.
*/
ios: UIColor;
/**

2
ui/builder/component-builder.ts
View File

@ -30,7 +30,7 @@ var MODULES = {
"Span": "text/span",
"WebView": "ui/web-view",
"SegmentedBar": "ui/segmented-bar",
"SegmentedBarEntry": "ui/segmented-bar",
"SegmentedBarItem": "ui/segmented-bar",
"TimePicker": "ui/time-picker",
"DatePicker": "ui/date-picker",
"ListPicker": "ui/list-picker",

23
ui/segmented-bar/segmented-bar-common.ts
View File

@ -2,6 +2,7 @@
import view = require("ui/core/view");
import proxy = require("ui/core/proxy");
import dependencyObservable = require("ui/core/dependency-observable");
import color = require("color");
export module knownCollections {
export var items = "items";
@ -10,7 +11,13 @@ export module knownCollections {
export class SegmentedBar extends view.View implements definition.SegmentedBar {
public _addArrayFromBuilder(name: string, value: Array<any>) {
if (name === "items") {
this.items = value;
this._setValue(SegmentedBar.itemsProperty, value);
}
}
public _adjustSelectedIndex() {
if (this.selectedIndex > this.items.length - 1) {
this._setValue(SegmentedBar.selectedIndexProperty, this.items.length - 1);
}
}
@ -21,14 +28,22 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
this._setValue(SegmentedBar.selectedIndexProperty, value);
}
get items(): Array<definition.SegmentedBarEntry> {
get items(): Array<definition.SegmentedBarItem> {
return this._getValue(SegmentedBar.itemsProperty);
}
set items(value: Array<definition.SegmentedBarEntry>) {
set items(value: Array<definition.SegmentedBarItem>) {
this._setValue(SegmentedBar.itemsProperty, value);
}
public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(0))
get selectedBackgroundColor(): color.Color {
return this._getValue(SegmentedBar.selectedBackgroundColorProperty);
}
set selectedBackgroundColor(value: color.Color) {
this._setValue(SegmentedBar.selectedBackgroundColorProperty,
value instanceof color.Color ? value : new color.Color(<any>value));
}
public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined))
public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(0))
public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined))
}

89
ui/segmented-bar/segmented-bar.android.ts
View File

@ -9,11 +9,12 @@ require("utils/module-merge").merge(common, exports);
function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <SegmentedBar>data.object;
if (!view.android) {
if (!view.android || !view.items) {
return;
}
var index = <number>data.newValue;
if (types.isNumber(index) && index >= 0 && index <= view.items.length - 1) {
view.android.setCurrentTab(index);
}
@ -28,41 +29,97 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
view.android.clearAllTabs();
for (var i = 0; i < view.items.length; i++) {
var title = view.items[i].title;
var tab = view.android.newTabSpec(i + "");
var newItems = <Array<any>>data.newValue;
tab.setIndicator(title);
if (newItems && newItems.length) {
for (var i = 0; i < newItems.length; i++) {
var title = newItems[i].title;
var tab = view.android.newTabSpec(i + "");
tab.setContent(new android.widget.TabHost.TabContentFactory({
createTabContent: function (tag: string): android.view.View {
var tv = new android.widget.TextView(view._context);
tv.setVisibility(android.view.View.GONE);
return tv;
tab.setIndicator(title);
tab.setContent(new android.widget.TabHost.TabContentFactory({
createTabContent: function (tag: string): android.view.View {
var tv = new android.widget.TextView(view._context);
tv.setVisibility(android.view.View.GONE);
return tv;
}
}));
view.android.addTab(tab);
}
view._adjustSelectedIndex();
if (view.android.getCurrentTab() !== view.selectedIndex) {
view.android.setCurrentTab(view.selectedIndex);
}
view.android.setOnTabChangedListener(null);
view.android.setOnTabChangedListener(view._listener);
if (view.selectedBackgroundColor) {
var tabHost = <android.widget.TabHost>view.android;
for (var tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
var vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
var stateDrawable = new android.graphics.drawable.StateListDrawable();
var arr = java.lang.reflect.Array.newInstance(java.lang.Integer.class.getField("TYPE").get(null), 1);
arr[0] = (<any>android).R.attr.state_selected;
var colorDrawable = new SegmentedBarColorDrawable(view.selectedBackgroundColor.android)
stateDrawable.addState(arr, colorDrawable);
stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
vg.setBackgroundDrawable(stateDrawable);
}
}));
view.android.addTab(tab);
}
}
}
(<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
class SegmentedBarColorDrawable extends android.graphics.drawable.ColorDrawable {
constructor(arg: any) {
super(arg);
return global.__native(this);
}
public draw(canvas: android.graphics.Canvas): void {
var p = new android.graphics.Paint();
p.setColor(this.Color);
p.setStyle(android.graphics.Paint.Style.FILL);
canvas.drawRect(0, this.Bounds.height() - 15, this.Bounds.width(), this.Bounds.height(), p);
}
}
export class SegmentedBar extends common.SegmentedBar {
private _android: OurTabHost;
public _listener: android.widget.TabHost.OnTabChangeListener;
public _createUI() {
this._android = new OurTabHost(this._context, null);
if (this._android.getCurrentTab() !== this.selectedIndex) {
this._android.setCurrentTab(this.selectedIndex);
}
var that = new WeakRef(this);
this._android.setOnTabChangedListener(new android.widget.TabHost.OnTabChangeListener({
this._listener = new android.widget.TabHost.OnTabChangeListener({
onTabChanged: function (id: string) {
var bar = that.get();
if (bar) {
bar.selectedIndex = parseInt(id);
var oldIndex = bar.selectedIndex;
var newIndex = parseInt(id);
if (oldIndex !== newIndex) {
bar._onPropertyChangedFromNative(SegmentedBar.selectedIndexProperty, newIndex);
}
}
}
}));
});
var tabHostLayout = new android.widget.LinearLayout(this._context);
tabHostLayout.setOrientation(android.widget.LinearLayout.VERTICAL);

14
ui/segmented-bar/segmented-bar.d.ts vendored
View File

@ -4,13 +4,14 @@
declare module "ui/segmented-bar" {
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
import color = require("color");
/**
* Represents a SegmentedBar entry.
* Represents a SegmentedBar item.
*/
interface SegmentedBarEntry {
interface SegmentedBarItem {
/**
* Gets or sets the title of the SegmentedBarEntry.
* Gets or sets the title of the SegmentedBarItem.
*/
title: string;
}
@ -24,10 +25,15 @@ declare module "ui/segmented-bar" {
*/
selectedIndex: number;
/**
* Gets or sets the selected background color of the SegmentedBar component.
*/
selectedBackgroundColor: color.Color;
/**
* Gets or sets the items of the SegmentedBar.
*/
items: Array<SegmentedBarEntry>;
items: Array<SegmentedBarItem>;
/**
* Gets or sets the selected index dependency property of the SegmentedBar.

21
ui/segmented-bar/segmented-bar.ios.ts
View File

@ -2,6 +2,7 @@
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import types = require("utils/types");
import color = require("color");
// merge the exports of the common file with the exports of this file
declare var exports;
@ -9,7 +10,7 @@ require("utils/module-merge").merge(common, exports);
function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <SegmentedBar>data.object;
if (!view.ios) {
if (!view.ios || !view.items) {
return;
}
@ -31,9 +32,27 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
for (var i = 0; i < view.items.length; i++) {
view.ios.insertSegmentWithTitleAtIndexAnimated(view.items[i].title, i, false);
}
view._adjustSelectedIndex();
if (view.ios.selectedSegmentIndex !== view.selectedIndex) {
view.ios.selectedSegmentIndex = view.selectedIndex;
}
}
(<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <SegmentedBar>data.object;
if (!view.ios) {
return;
}
if (data.newValue instanceof color.Color) {
view.ios.tintColor = (<color.Color>data.newValue).ios;
}
}
(<proxy.PropertyMetadata>common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged;
export class SegmentedBar extends common.SegmentedBar {
private _ios: UISegmentedControl;
private _selectionHandler: NSObject;

30
ui/styling/stylers.android.ts
View File

@ -210,10 +210,40 @@ export class ActivityIndicatorStyler implements definition.stylers.Styler {
}
}
export class SegmentedBarStyler implements definition.stylers.Styler {
//Text color methods
private static setColorProperty(view: view.View, newValue: any) {
var tabHost = <android.widget.TabHost>view.android;
for (var tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
var tab = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
var t = <android.widget.TextView>tab.getChildAt(1);
t.setTextColor(newValue);
}
}
private static resetColorProperty(view: view.View, nativeValue: any) {
var tabHost = <android.widget.TabHost>view.android;
for (var tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
var tab = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
var t = <android.widget.TextView>tab.getChildAt(1);
t.setTextColor(constants.btn_default);
}
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
SegmentedBarStyler.setColorProperty,
SegmentedBarStyler.resetColorProperty), "SegmentedBar");
}
}
export function _registerDefaultStylers() {
style.registerNoStylingClass("Frame");
DefaultStyler.registerHandlers();
ButtonStyler.registerHandlers();
TextViewStyler.registerHandlers();
ActivityIndicatorStyler.registerHandlers();
SegmentedBarStyler.registerHandlers();
}

24
ui/styling/stylers.ios.ts
View File

@ -466,6 +466,29 @@ export class TextViewStyler implements definition.stylers.Styler {
}
}
export class SegmentedBarStyler implements definition.stylers.Styler {
//Text color methods
private static setColorProperty(view: view.View, newValue: any) {
var bar = <UISegmentedControl>view.ios;
var attrs = NSMutableDictionary.new();
attrs.setValueForKey(newValue, NSForegroundColorAttributeName);
bar.setTitleTextAttributesForState(attrs, UIControlState.UIControlStateNormal);
}
private static resetColorProperty(view: view.View, nativeValue: any) {
var bar = <UISegmentedControl>view.ios;
var attrs = NSMutableDictionary.new();
attrs.setValueForKey(nativeValue, NSForegroundColorAttributeName);
bar.setTitleTextAttributesForState(attrs, UIControlState.UIControlStateNormal);
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
SegmentedBarStyler.setColorProperty,
SegmentedBarStyler.resetColorProperty), "SegmentedBar");
}
}
export function _registerDefaultStylers() {
style.registerNoStylingClass("Frame");
DefaultStyler.registerHandlers();
@ -473,4 +496,5 @@ export function _registerDefaultStylers() {
LabelStyler.registerHandlers();
TextFieldStyler.registerHandlers();
TextViewStyler.registerHandlers();
SegmentedBarStyler.registerHandlers();
}