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

Center View

Browse Source
This commit is contained in:
vakrilov
2015-07-10 18:47:12 +03:00
parent 53dc1c65bf
commit 53c7bebfec
17 changed files with 209 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
CrossPlatformModules.csproj
View File

@ -61,6 +61,9 @@
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
<Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
<ItemGroup>
<TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-stack.ts" />
<TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-segmented.ts" />
<TypeScriptCompile Include="apps\action-bar-demo\pages\center-view.ts" />
<TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
<TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
<TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
@ -70,6 +73,9 @@
<DependentUpon>main-page.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
<Content Include="apps\action-bar-demo\pages\center-view-stack.xml" />
<Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
<Content Include="apps\action-bar-demo\pages\center-view.xml" />
<Content Include="apps\action-bar-demo\pages\data-binding.xml" />
<Content Include="apps\cuteness.unoptimized\reddit-item-view-model.ts" />
<TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-model.d.ts" />
@ -1722,7 +1728,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>

3
apps/action-bar-demo/main-page.xml
View File

@ -7,6 +7,9 @@
<Button tap="itemTap" text="action items icons" tag="action-items-icon" />
<Button tap="itemTap" text="action items text" tag="action-items-text" />
<Button tap="itemTap" text="data binding" tag="data-binding" />
<Button tap="itemTap" text="center view" tag="center-view" />
<Button tap="itemTap" text="center segmented" tag="center-view-segmented" />
<Button tap="itemTap" text="center stack" tag="center-view-stack" />
</StackLayout>
</ScrollView>
</Page>

8
apps/action-bar-demo/pages/center-view-segmented.ts Normal file
View File

@ -0,0 +1,8 @@
import observable = require("data/observable");
import pages = require("ui/page");
export function pageLoaded(args) {
var page = <pages.Page>args.object;
var vm = new observable.Observable();
page.bindingContext = vm;
}

18
apps/action-bar-demo/pages/center-view-segmented.xml Normal file
View File

@ -0,0 +1,18 @@
<Page loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.centerView>
<SegmentedBar selectedIndex="{{ index }}">
<SegmentedBar.items>
<SegmentedBarItem title="Item 1" />
<SegmentedBarItem title="Item 2" />
<SegmentedBarItem title="Item 3" />
</SegmentedBar.items>
</SegmentedBar>
</ActionBar.centerView>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="{{ index }}" />
</StackLayout>
</Page>

8
apps/action-bar-demo/pages/center-view-stack.ts Normal file
View File

@ -0,0 +1,8 @@
import observable = require("data/observable");
import pages = require("ui/page");
export function pageLoaded(args) {
var page = <pages.Page>args.object;
var vm = new observable.Observable();
page.bindingContext = vm;
}

16
apps/action-bar-demo/pages/center-view-stack.xml Normal file
View File

@ -0,0 +1,16 @@
<Page loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.centerView>
<StackLayout orientation="horizontal" verticalAlignment="center" horizontalAlignment="center">
<Button text="1st" />
<Button text="2nd" />
<Button text="3rd" />
</StackLayout>
</ActionBar.centerView>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="do nothong" />
</StackLayout>
</Page>

12
apps/action-bar-demo/pages/center-view.ts Normal file
View File

@ -0,0 +1,12 @@
import observable = require("data/observable");
import pages = require("ui/page");
export function pageLoaded(args) {
var page = <pages.Page>args.object;
var vm = new observable.Observable();
vm.set("centerText", "center text");
vm.set("centerTap", function () {
console.log("Center view tapped!");
});
page.bindingContext = vm;
}

12
apps/action-bar-demo/pages/center-view.xml Normal file
View File

@ -0,0 +1,12 @@
<Page loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.centerView>
<Button text="{{ centerText }}" tap="{{ centerTap }}" />
</ActionBar.centerView>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="do nothing" />
</StackLayout>
</Page>

1
apps/action-bar-demo/pages/page-title-icon.ts
View File

@ -18,7 +18,6 @@ export function buttonTap(args: observable.EventData) {
}
}
var j = 0;
export function visibilityTap(args: observable.EventData) {
var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")

44
ui/action-bar/action-bar-common.ts
View File

@ -4,6 +4,9 @@ import bindable = require("ui/core/bindable");
import dependencyObservable = require("ui/core/dependency-observable");
import enums = require("ui/enums");
import proxy = require("ui/core/proxy");
import view = require("ui/core/view");
import style = require("ui/styling/style");
import observable = require("ui/core/dependency-observable");
var ACTION_ITEMS = "actionItems";
@ -21,7 +24,7 @@ function onIconPropertyChanged(data: dependencyObservable.PropertyChangeData) {
actionBar._onIconPropertyChanged();
}
export class ActionBar extends bindable.Bindable implements dts.ActionBar {
export class ActionBar extends view.View implements dts.ActionBar {
public static titleProperty = new dependencyObservable.Property("title", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onTitlePropertyChanged));
public static iconProperty = new dependencyObservable.Property("icon", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
public static androidIconVisibilityProperty = new dependencyObservable.Property("androidIconVisibility", "ActionBar", new proxy.PropertyMetadata("auto", dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
@ -29,6 +32,7 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
private _actionItems: ActionItems;
private _navigationButton: NavigationButton;
private _page: pages.Page;
private _centerView: view.View;
get title(): string {
return this._getValue(ActionBar.titleProperty);
@ -77,6 +81,29 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
throw new Error("actionItems property is read-only");
}
get centerView(): view.View {
return this._centerView;
}
set centerView(value: view.View) {
if (this._centerView !== value) {
if (this._centerView) {
this._removeView(this._centerView);
this._centerView.style._resetValue(style.horizontalAlignmentProperty, observable.ValueSource.Inherited);
this._centerView.style._resetValue(style.verticalAlignmentProperty, observable.ValueSource.Inherited);
}
this._centerView = value;
if (this._centerView) {
this._centerView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
this._centerView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
this._addView(this._centerView);
}
this.updateActionBar();
}
}
get page(): pages.Page {
return this._page;
}
@ -90,6 +117,10 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
}, this._page);
}
get _childrenCount(): number {
return this.centerView ? 1 : 0;
}
constructor() {
super();
this._actionItems = new ActionItems(this);
@ -124,10 +155,13 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
}
public _addChildFromBuilder(name: string, value: any) {
if (value instanceof NavigationButton) {
this.navigationButton = value;
}
if (value instanceof view.View) {
this.centerView = value;
}
}
public _onBindingContextChanged(oldValue: any, newValue: any) {
@ -139,6 +173,12 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
this._actionItems.getItems().forEach((item, i, arr) => { item.bindingContext = newValue; });
}
public _eachChildView(callback: (child: view.View) => boolean) {
if (this.centerView) {
callback(this.centerView);
}
}
public shouldShow(): boolean {
if (this.title ||
this.icon ||

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

@ -51,14 +51,13 @@ export class ActionBar extends common.ActionBar {
this._addActionItems(menu);
// Set title
this._updateTitle(actionBar);
this._updateTitleAndCenterView(actionBar);
// Set home icon
this._updateIcon(actionBar);
// Set navigation button
this._updateNavigationButton(actionBar);
}
public _updateNavigationButton(actionBar: android.app.ActionBar) {
@ -102,13 +101,25 @@ export class ActionBar extends common.ActionBar {
actionBar.setDisplayShowHomeEnabled(visibility);
}
public _updateTitle(actionBar: android.app.ActionBar) {
var title = this.title;
if (types.isDefined(title)) {
actionBar.setTitle(title);
} else {
var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
actionBar.setTitle(defaultLabel);
public _updateTitleAndCenterView(actionBar: android.app.ActionBar) {
if (this.centerView) {
actionBar.setCustomView(this.centerView.android);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
}
else {
actionBar.setCustomView(null);
actionBar.setDisplayShowCustomEnabled(false);
actionBar.setDisplayShowTitleEnabled(true);
// No center view - show the title
var title = this.title;
if (types.isDefined(title)) {
actionBar.setTitle(title);
} else {
var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
actionBar.setTitle(defaultLabel);
}
}
}
@ -119,7 +130,6 @@ export class ActionBar extends common.ActionBar {
var item = items[i];
var menuItem = menu.add(android.view.Menu.NONE, i + ACTION_ITEM_ID_OFFSET, android.view.Menu.NONE, item.text);
if (item.icon) {
var drawableOrId = getDrawableOrResourceId(item.icon, this._appResources);
if (drawableOrId) {
menuItem.setIcon(drawableOrId);
@ -133,7 +143,7 @@ export class ActionBar extends common.ActionBar {
public _onTitlePropertyChanged() {
if (frame.topmost().currentPage === this.page) {
this._updateTitle(frame.topmost().android.actionBar);
this._updateTitleAndCenterView(frame.topmost().android.actionBar);
}
}

4
ui/action-bar/action-bar.d.ts vendored
View File

@ -4,14 +4,16 @@
import dependencyObservable = require("ui/core/dependency-observable");
import bindable = require("ui/core/bindable");
import pages = require("ui/page");
import contentView = require("ui/content-view");
export class ActionBar extends bindable.Bindable implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
title: string;
icon: string;
androidIconVisibility: string;
navigationButton: NavigationButton;
actionItems: ActionItems;
centerView: view.View;
page: pages.Page;

34
ui/action-bar/action-bar.ios.ts
View File

@ -3,6 +3,8 @@ import definition = require("ui/action-bar");
import imageSource = require("image-source");
import frameModule = require("ui/frame");
import enums = require("ui/enums");
import view = require("ui/core/view");
import utils = require("utils/utils");
declare var exports;
require("utils/module-merge").merge(common, exports);
@ -23,6 +25,11 @@ export class ActionBar extends common.ActionBar {
// Set Title
navigationItem.title = this.title;
if (this.centerView && this.centerView.ios) {
console.log("setting center view: " + this.centerView.ios);
navigationItem.titleView = this.centerView.ios;
}
// Find previous ViewController in the navigation stack
var indexOfViewController = navController.viewControllers.indexOfObject(viewController);
if (indexOfViewController !== NSNotFound && indexOfViewController > 0) {
@ -116,6 +123,33 @@ export class ActionBar extends common.ActionBar {
var navigationItem: UINavigationItem = (<UIViewController>this.page.ios).navigationItem;
navigationItem.title = this.title;
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
if (this.centerView) {
var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
view.View.measureChild(this, this.centerView,
utils.layout.makeMeasureSpec(width, utils.layout.AT_MOST),
utils.layout.makeMeasureSpec(this.navigationBarHeight, utils.layout.AT_MOST));
}
this.setMeasuredDimension(0, 0);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public onLayout(left: number, top: number, right: number, bottom: number) {
view.View.layoutChild(this, this.centerView, 0, 0, right - left, this.navigationBarHeight);
super.onLayout(left, top, right, bottom);
}
protected get navigationBarHeight(): number {
var navController = frameModule.topmost().ios.controller;
if(!navController){
return 0;
}
var navigationBar = navController.navigationBar;
return (navigationBar && !navController.navigationBarHidden) ? navigationBar.frame.size.height : 0;
}
}
class TapBarItemHandlerImpl extends NSObject {

4
ui/core/view.ios.ts
View File

@ -172,6 +172,10 @@ export class View extends viewCommon.View {
}
public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
if (!this._nativeView) {
return;
}
var frame = CGRectMake(left, top, right - left, bottom - top);
// This is done because when rotated in iOS7 there is rotation applied on the first subview on the Window which is our frame.nativeView.view.

8
ui/page/page-common.ts
View File

@ -124,7 +124,7 @@ export class Page extends contentView.ContentView implements dts.Page {
cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
}
if (!this._cssFiles[cssFileName]) {
if (fs.File.exists(cssFileName)) {
if (fs.File.exists(cssFileName)) {
new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
this._addCssInternal(r, cssFileName);
this._cssFiles[cssFileName] = true;
@ -214,6 +214,12 @@ export class Page extends contentView.ContentView implements dts.Page {
return this._styleScope;
}
public _eachChildView(callback: (child: view.View) => boolean) {
super._eachChildView(callback);
callback(this.actionBar);
}
private _applyCss() {
if (this._cssApplied) {
return;

10
ui/page/page.ios.ts
View File

@ -155,4 +155,14 @@ export class Page extends pageCommon.Page {
this.requestLayout();
}
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
viewModule.View.measureChild(this, this.actionBar, widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public onLayout(left: number, top: number, right: number, bottom: number) {
viewModule.View.layoutChild(this, this.actionBar, 0, 0, right - left, bottom - top);
super.onLayout(left, top, right, bottom);
}
}

4
ui/styling/background.ios.ts
View File

@ -7,6 +7,10 @@ require("utils/module-merge").merge(common, exports);
export module ios {
export function createBackgroundUIColor(view: viewModule.View): UIColor {
if(!view._nativeView){
return null;
}
var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;