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

selectedBackgroundColor implemented

Browse Source
This commit is contained in:
Vladimir Enchev
2015-03-05 13:49:53 +02:00
parent 6cb4dc15d9
commit 3c822de142
5 changed files with 64 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<TabEntry.view>
<StackLayout>
<SegmentedBar selectedIndex="1" style="background-color: red; color: white">
<SegmentedBar selectedIndex="1" style="background-color: red; color: white" selectedBackgroundColor="green">
<SegmentedBar.items>
<SegmentedBarEntry title="MAY 3" />
<SegmentedBarEntry title="MAY 4" />

11
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";
@@ -34,7 +35,15 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
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))
}

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

@@ -57,10 +57,44 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
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);
}
}
}
}
(<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;

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

@@ -4,6 +4,7 @@
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.
@@ -24,6 +25,11 @@ 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.
*/

13
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;
@@ -40,6 +41,18 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
}
(<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;