Skip to content

Commit a227dff

Browse files
author
Vladimir Enchev
committed
Merge pull request NativeScript#149 from NativeScript/search-bar-styling
Search bar styling
2 parents e9d2b82 + 2d98402 commit a227dff

File tree

8 files changed

+218
-12
lines changed

8 files changed

+218
-12
lines changed

‎apps/TelerikNEXT/main-page.xml

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,31 @@
2323
</tsb:SideBar.slideContent>
2424

2525
<tsb:SideBar.mainContent>
26-
<GridLayout rows="auto, auto, *">
26+
<GridLayout rows="auto, auto, auto, *">
2727

28-
<SegmentedBar selectedIndex="{{ selectedIndex }}" >
28+
<SegmentedBar selectedIndex="{{ selectedIndex }}" style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
2929
<SegmentedBar.items>
3030
<SegmentedBarItem title="MAY 3" />
3131
<SegmentedBarItem title="MAY 4" />
3232
<SegmentedBarItem title="MAY 5" />
3333
</SegmentedBar.items>
3434
</SegmentedBar>
35-
36-
<StackLayout style="background-color: #fac950;padding: 5;" row="1">
37-
<SearchBar text="{{ search }}" />
38-
</StackLayout>
3935

40-
<ListView items="{{ sessions }}" row="2">
36+
<Label row="1" style="horizontal-align: center;margin: 5;">
37+
<Label.formattedText>
38+
<FormattedString fontSize="18" foregroundColor="#fac950">
39+
<FormattedString.spans>
40+
<Span text="WORKSHOPS" fontAttributes="Bold" />
41+
</FormattedString.spans>
42+
</FormattedString>
43+
</Label.formattedText>
44+
</Label>
45+
46+
<SearchBar text="{{ search }}" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
47+
48+
<ListView items="{{ sessions }}" row="3">
4149
<ListView.itemTemplate>
42-
<GridLayout columns="*, auto" style.backgroundColor="{{ canBeFavorited ? '#ffffff' : '#fffbf0' }}">
50+
<GridLayout columns="*, auto">
4351
<StackLayout>
4452

4553
<Label>

‎ui/search-bar/search-bar-common.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
import view = require("ui/core/view");
33
import dependencyObservable = require("ui/core/dependency-observable");
44
import proxy = require("ui/core/proxy");
5+
import color = require("color");
56

67
export module knownEvents {
78
export var submit = "submit";
89
export var clear = "clear";
910
}
1011

1112
export class SearchBar extends view.View implements definition.SearchBar {
13+
public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
1214

1315
public static textProperty = new dependencyObservable.Property(
1416
"text",
@@ -22,4 +24,12 @@ export class SearchBar extends view.View implements definition.SearchBar {
2224
set text(value: string) {
2325
this._setValue(SearchBar.textProperty, value);
2426
}
27+
28+
get textFieldBackgroundColor(): color.Color {
29+
return this._getValue(SearchBar.textFieldBackgroundColorProperty);
30+
}
31+
set textFieldBackgroundColor(value: color.Color) {
32+
this._setValue(SearchBar.textFieldBackgroundColorProperty,
33+
value instanceof color.Color ? value : new color.Color(<any>value));
34+
}
2535
}

‎ui/search-bar/search-bar.android.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import common = require("ui/search-bar/search-bar-common");
22
import dependencyObservable = require("ui/core/dependency-observable");
33
import proxy = require("ui/core/proxy");
4+
import color = require("color");
45

56
var SEARCHTEXT = "searchText";
67
var QUERY = "query";
@@ -18,6 +19,26 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
1819
// register the setNativeValue callbacks
1920
(<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
2021

22+
function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
23+
var bar = <SearchBar>data.object;
24+
if (!bar.android) {
25+
return;
26+
}
27+
28+
if (data.newValue instanceof color.Color) {
29+
_changeSearchViewBackgroundColor(bar.android, (<color.Color>data.newValue).android);
30+
}
31+
}
32+
33+
// register the setNativeValue callbacks
34+
(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
35+
36+
function _changeSearchViewBackgroundColor(bar: android.widget.SearchView, color: number) {
37+
var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
38+
var textView = <android.widget.TextView> bar.findViewById(id);
39+
textView.setBackgroundColor(color);
40+
}
41+
2142
// merge the exports of the common file with the exports of this file
2243
declare var exports;
2344
require("utils/module-merge").merge(common, exports);
@@ -28,6 +49,8 @@ export class SearchBar extends common.SearchBar {
2849
public _createUI() {
2950
this._android = new android.widget.SearchView(this._context);
3051

52+
this._android.setIconified(false);
53+
3154
var that = new WeakRef(this);
3255
this._android.setOnQueryTextListener(new android.widget.SearchView.OnQueryTextListener({
3356
get owner() {
@@ -72,6 +95,10 @@ export class SearchBar extends common.SearchBar {
7295
return true;
7396
}
7497
}));
98+
99+
if (this.textFieldBackgroundColor instanceof color.Color) {
100+
_changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
101+
}
75102
}
76103

77104
get android(): android.widget.SearchView {

‎ui/search-bar/search-bar.d.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ declare module "ui/search-bar" {
55
import view = require("ui/core/view");
66
import observable = require("data/observable");
77
import dependencyObservable = require("ui/core/dependency-observable");
8+
import color = require("color");
89

910
/**
1011
* Known event names.
@@ -30,6 +31,11 @@ declare module "ui/search-bar" {
3031
*/
3132
public static textProperty: dependencyObservable.Property;
3233

34+
/**
35+
* Gets or sets the TextField background color of the SearchBar component.
36+
*/
37+
public static textFieldBackgroundColorProperty: dependencyObservable.Property;
38+
3339
/**
3440
* Gets the native [android widget](http://developer.android.com/reference/android/widget/SearchView.html) that represents the user interface for this component. Valid only when running on Android OS.
3541
*/
@@ -45,6 +51,11 @@ declare module "ui/search-bar" {
4551
*/
4652
text: string;
4753

54+
/**
55+
* Gets or sets the TextField background color of the SearchBar component.
56+
*/
57+
textFieldBackgroundColor: color.Color;
58+
4859
on(event: string, callback: (data: observable.EventData) => void);
4960

5061
/**

‎ui/search-bar/search-bar.ios.ts

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import common = require("ui/search-bar/search-bar-common");
22
import dependencyObservable = require("ui/core/dependency-observable");
33
import proxy = require("ui/core/proxy");
4+
import color = require("color");
45

56
function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
67
var bar = <SearchBar>data.object;
@@ -10,6 +11,16 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
1011
// register the setNativeValue callbacks
1112
(<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
1213

14+
function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
15+
var bar = <SearchBar>data.object;
16+
if (data.newValue instanceof color.Color) {
17+
(<UITextField>bar.ios.valueForKey("_searchField")).backgroundColor = data.newValue.ios;
18+
}
19+
}
20+
21+
// register the setNativeValue callbacks
22+
(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
23+
1324
// merge the exports of the common file with the exports of this file
1425
declare var exports;
1526
require("utils/module-merge").merge(common, exports);
@@ -28,7 +39,7 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
2839
this._owner = owner;
2940
return this;
3041
}
31-
42+
3243
public searchBarTextDidChange(searchBar: UISearchBar, searchText: string) {
3344
this._owner._onPropertyChangedFromNative(common.SearchBar.textProperty, searchText);
3445

@@ -39,12 +50,12 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
3950

4051
this._searchText = searchText;
4152
}
42-
53+
4354
public searchBarCancelButtonClicked(searchBar: UISearchBar) {
4455
searchBar.resignFirstResponder();
4556
this._owner._emit(common.knownEvents.clear);
4657
}
47-
58+
4859
public searchBarSearchButtonClicked(searchBar: UISearchBar) {
4960
searchBar.resignFirstResponder();
5061
this._owner._emit(common.knownEvents.submit);
@@ -58,7 +69,7 @@ export class SearchBar extends common.SearchBar {
5869
constructor() {
5970
super();
6071
this._ios = new UISearchBar();
61-
72+
6273
this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this);
6374
this._ios.delegate = this._delegate;
6475
}

‎ui/segmented-bar/segmented-bar.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ declare module "ui/segmented-bar" {
4040
*/
4141
public static selectedIndexProperty: dependencyObservable.Property;
4242

43+
/**
44+
* Gets or sets the selected background color property of the SegmentedBar.
45+
*/
46+
public static selectedBackgroundColorProperty: dependencyObservable.Property;
47+
4348
/**
4449
* Gets or sets the items dependency property of the SegmentedBar.
4550
*/

‎ui/styling/stylers.android.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,11 +239,85 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
239239
}
240240
}
241241

242+
export class SearchBarStyler implements definition.stylers.Styler {
243+
244+
private static getBackgroundColorProperty(view: view.View): any {
245+
var bar = <android.widget.SearchView>view.android;
246+
return bar.getDrawingCacheBackgroundColor();
247+
}
248+
249+
private static setBackgroundColorProperty(view: view.View, newValue: any) {
250+
var bar = <android.widget.SearchView>view.android;
251+
bar.setBackgroundColor(newValue);
252+
SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, newValue);
253+
}
254+
255+
private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
256+
var bar = <android.widget.SearchView>view.android;
257+
bar.setBackgroundColor(nativeValue);
258+
SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, nativeValue);
259+
}
260+
261+
private static getColorProperty(view: view.View): any {
262+
var bar = <android.widget.SearchView>view.android;
263+
var textView = SearchBarStyler._getSearchViewTextView(bar);
264+
265+
if (textView) {
266+
return textView.getCurrentTextColor();
267+
}
268+
269+
return undefined;
270+
}
271+
272+
private static setColorProperty(view: view.View, newValue: any) {
273+
var bar = <android.widget.SearchView>view.android;
274+
SearchBarStyler._changeSearchViewTextColor(bar, newValue);
275+
}
276+
277+
private static resetColorProperty(view: view.View, nativeValue: any) {
278+
var bar = <android.widget.SearchView>view.android;
279+
SearchBarStyler._changeSearchViewTextColor(bar, nativeValue);
280+
}
281+
282+
public static registerHandlers() {
283+
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
284+
SearchBarStyler.setBackgroundColorProperty,
285+
SearchBarStyler.resetBackgroundColorProperty,
286+
SearchBarStyler.getBackgroundColorProperty), "SearchBar");
287+
288+
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
289+
SearchBarStyler.setColorProperty,
290+
SearchBarStyler.resetColorProperty,
291+
SearchBarStyler.getColorProperty), "SearchBar");
292+
}
293+
294+
private static _getSearchViewTextView(bar: android.widget.SearchView): android.widget.TextView {
295+
var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
296+
return <android.widget.TextView> bar.findViewById(id);
297+
}
298+
299+
private static _changeSearchViewTextColor(bar: android.widget.SearchView, color: number) {
300+
var textView = SearchBarStyler._getSearchViewTextView(bar);
301+
if (textView) {
302+
textView.setTextColor(color);
303+
}
304+
}
305+
306+
private static _changeSearchViewPlateBackgroundColor(bar: android.widget.SearchView, color: number) {
307+
var id = bar.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
308+
var textView = <android.view.View> bar.findViewById(id);
309+
if (textView) {
310+
textView.setBackgroundColor(color);
311+
}
312+
}
313+
}
314+
242315
export function _registerDefaultStylers() {
243316
style.registerNoStylingClass("Frame");
244317
DefaultStyler.registerHandlers();
245318
ButtonStyler.registerHandlers();
246319
TextViewStyler.registerHandlers();
247320
ActivityIndicatorStyler.registerHandlers();
248321
SegmentedBarStyler.registerHandlers();
322+
SearchBarStyler.registerHandlers();
249323
}

‎ui/styling/stylers.ios.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -489,6 +489,65 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
489489
}
490490
}
491491

492+
export class SearchBarStyler implements definition.stylers.Styler {
493+
494+
private static setBackgroundColorProperty(view: view.View, newValue: any) {
495+
var bar = <UISearchBar>view.ios;
496+
bar.barTintColor = newValue;
497+
}
498+
499+
private static getBackgroundColorProperty(view: view.View): any {
500+
var bar = <UISearchBar>view.ios;
501+
return bar.barTintColor;
502+
}
503+
504+
private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
505+
var bar = <UISearchBar>view.ios;
506+
bar.barTintColor = nativeValue;
507+
}
508+
509+
private static getColorProperty(view: view.View): any {
510+
var bar = <UISearchBar>view.ios;
511+
512+
var sf = <UITextField>bar.valueForKey("_searchField");
513+
if (sf) {
514+
return sf.textColor;
515+
}
516+
517+
return undefined;
518+
}
519+
520+
private static setColorProperty(view: view.View, newValue: any) {
521+
var bar = <UISearchBar>view.ios;
522+
523+
var sf = <UITextField>bar.valueForKey("_searchField");
524+
if (sf) {
525+
sf.textColor = newValue;
526+
}
527+
}
528+
529+
private static resetColorProperty(view: view.View, nativeValue: any) {
530+
var bar = <UISearchBar>view.ios;
531+
532+
var sf = <UITextField>bar.valueForKey("_searchField");
533+
if (sf) {
534+
sf.textColor = nativeValue;
535+
}
536+
}
537+
538+
public static registerHandlers() {
539+
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
540+
SearchBarStyler.setBackgroundColorProperty,
541+
SearchBarStyler.resetBackgroundColorProperty,
542+
SearchBarStyler.getBackgroundColorProperty), "SearchBar");
543+
544+
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
545+
SearchBarStyler.setColorProperty,
546+
SearchBarStyler.resetColorProperty,
547+
SearchBarStyler.getColorProperty), "SearchBar");
548+
}
549+
}
550+
492551
export function _registerDefaultStylers() {
493552
style.registerNoStylingClass("Frame");
494553
DefaultStyler.registerHandlers();
@@ -497,4 +556,5 @@ export function _registerDefaultStylers() {
497556
TextFieldStyler.registerHandlers();
498557
TextViewStyler.registerHandlers();
499558
SegmentedBarStyler.registerHandlers();
559+
SearchBarStyler.registerHandlers();
500560
}

0 commit comments

Comments
 (0)