From 3c822de142af559c8d75a6c9b23f363de44dcc9a Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Thu, 5 Mar 2015 13:49:53 +0200 Subject: [PATCH] selectedBackgroundColor implemented --- apps/tests/xml-declaration/mainPage.xml | 2 +- ui/segmented-bar/segmented-bar-common.ts | 11 +++++++- ui/segmented-bar/segmented-bar.android.ts | 34 +++++++++++++++++++++++ ui/segmented-bar/segmented-bar.d.ts | 6 ++++ ui/segmented-bar/segmented-bar.ios.ts | 13 +++++++++ 5 files changed, 64 insertions(+), 2 deletions(-) diff --git a/apps/tests/xml-declaration/mainPage.xml b/apps/tests/xml-declaration/mainPage.xml index af886c501..856bfb094 100644 --- a/apps/tests/xml-declaration/mainPage.xml +++ b/apps/tests/xml-declaration/mainPage.xml @@ -7,7 +7,7 @@ - + diff --git a/ui/segmented-bar/segmented-bar-common.ts b/ui/segmented-bar/segmented-bar-common.ts index 9eedd4c3f..a1c9e22e9 100644 --- a/ui/segmented-bar/segmented-bar-common.ts +++ b/ui/segmented-bar/segmented-bar-common.ts @@ -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(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)) } \ No newline at end of file diff --git a/ui/segmented-bar/segmented-bar.android.ts b/ui/segmented-bar/segmented-bar.android.ts index 2303023db..dcfe550d9 100644 --- a/ui/segmented-bar/segmented-bar.android.ts +++ b/ui/segmented-bar/segmented-bar.android.ts @@ -57,10 +57,44 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { view.android.setOnTabChangedListener(null); view.android.setOnTabChangedListener(view._listener); + + if (view.selectedBackgroundColor) { + var tabHost = view.android; + + for (var tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { + var vg = 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] = (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); + } + } } } (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; diff --git a/ui/segmented-bar/segmented-bar.d.ts b/ui/segmented-bar/segmented-bar.d.ts index 75d5c34ee..d7f654a7d 100644 --- a/ui/segmented-bar/segmented-bar.d.ts +++ b/ui/segmented-bar/segmented-bar.d.ts @@ -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. */ diff --git a/ui/segmented-bar/segmented-bar.ios.ts b/ui/segmented-bar/segmented-bar.ios.ts index f108fcc46..1996e7c3f 100644 --- a/ui/segmented-bar/segmented-bar.ios.ts +++ b/ui/segmented-bar/segmented-bar.ios.ts @@ -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) { } (common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged; +function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { + var view = data.object; + if (!view.ios) { + return; + } + + if (data.newValue instanceof color.Color) { + view.ios.tintColor = (data.newValue).ios; + } +} +(common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged; + export class SegmentedBar extends common.SegmentedBar { private _ios: UISegmentedControl; private _selectionHandler: NSObject;