mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 11:42:04 +08:00
Split layout-base to iOS and Android files
clipToBounds for a single view can't be implemented in Android in a straightforward manner Resolves #1829
This commit is contained in:
Rossen Hristov
committed by
Erjan Gavalji
Erjan Gavalji
parent
57d5bd143a
commit
54c65e94d7
@ -829,10 +829,16 @@
|
||||
<TypeScriptCompile Include="ui\layouts\layout.android.ts">
|
||||
<DependentUpon>layout.d.ts</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base.ts">
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base.d.ts" />
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base-common.ts">
|
||||
<DependentUpon>layout-base.d.ts</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base.android.ts">
|
||||
<DependentUpon>layout-base.d.ts</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base.ios.ts">
|
||||
<DependentUpon>layout-base.d.ts</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
<TypeScriptCompile Include="ui\layouts\layout-base.d.ts" />
|
||||
<TypeScriptCompile Include="ui\layouts\stack-layout\stack-layout.ios.ts">
|
||||
<DependentUpon>stack-layout.d.ts</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
@ -1343,7 +1349,9 @@
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include=".gitignore" />
|
||||
<Content Include="apps\template-blank\main-page.xml" />
|
||||
<Content Include="apps\template-blank\main-page.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\tests\small-image.png" />
|
||||
<Content Include="apps\tests\pages\page14.xml">
|
||||
<SubType>Designer</SubType>
|
||||
@ -2222,7 +2230,7 @@
|
||||
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
|
||||
</WebProjectProperties>
|
||||
</FlavorProperties>
|
||||
<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_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" />
|
||||
<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_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" />
|
||||
</VisualStudio>
|
||||
</ProjectExtensions>
|
||||
</Project>
|
||||
@ -583,7 +583,9 @@
|
||||
"ui/layouts/grid-layout/grid-layout.d.ts",
|
||||
"ui/layouts/grid-layout/grid-layout.ios.ts",
|
||||
"ui/layouts/layout-base.d.ts",
|
||||
"ui/layouts/layout-base.ts",
|
||||
"ui/layouts/layout-base-common.ts",
|
||||
"ui/layouts/layout-base.android.ts",
|
||||
"ui/layouts/layout-base.ios.ts",
|
||||
"ui/layouts/layout.android.ts",
|
||||
"ui/layouts/layout.d.ts",
|
||||
"ui/layouts/layout.ios.ts",
|
||||
|
||||
@ -2,16 +2,26 @@
|
||||
import types = require("utils/types");
|
||||
import view = require("ui/core/view");
|
||||
import dependencyObservable = require("ui/core/dependency-observable");
|
||||
import proxy = require("ui/core/proxy");
|
||||
import utils = require("utils/utils");
|
||||
import style = require("ui/styling/style");
|
||||
import * as platformModule from "platform";
|
||||
var platform: typeof platformModule;
|
||||
import {PropertyChangeData, Property } from "ui/core/dependency-observable";
|
||||
import {PropertyMetadata } from "ui/core/proxy";
|
||||
|
||||
var clipToBoundsProperty = new Property(
|
||||
"clipToBounds",
|
||||
"LayoutBase",
|
||||
new PropertyMetadata(true, dependencyObservable.PropertyMetadataSettings.None));
|
||||
|
||||
function onClipToBoundsPropertyChanged(data: PropertyChangeData) {
|
||||
var layout = <LayoutBase>data.object;
|
||||
layout._onClipToBoundsChanged(data.oldValue, data.newValue);
|
||||
}
|
||||
|
||||
(<PropertyMetadata>clipToBoundsProperty.metadata).onSetNativeValue = onClipToBoundsPropertyChanged;
|
||||
|
||||
export class LayoutBase extends view.CustomLayoutView implements definition.LayoutBase, view.AddChildFromBuilder {
|
||||
|
||||
public static clipToBoundsProperty = new dependencyObservable.Property("clipToBounds", "LayoutBase",
|
||||
new proxy.PropertyMetadata(true, dependencyObservable.PropertyMetadataSettings.None, LayoutBase.onClipToBoundsPropertyChanged, null, LayoutBase.onClipToBoundsPropertyChanged));
|
||||
public static clipToBoundsProperty = clipToBoundsProperty;
|
||||
|
||||
private _subViews: Array<view.View> = new Array<view.View>();
|
||||
|
||||
@ -120,21 +130,8 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
|
||||
this._setValue(LayoutBase.clipToBoundsProperty, value);
|
||||
}
|
||||
|
||||
protected onClipToBoundsChanged(oldValue: boolean, newValue: boolean) {
|
||||
if (!this._nativeView) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!platform) {
|
||||
platform = require("platform");
|
||||
}
|
||||
|
||||
if (platform.device.os === platform.platformNames.ios) {
|
||||
this._nativeView.clipsToBounds = newValue;
|
||||
}
|
||||
else if (platform.device.os === platform.platformNames.android) {
|
||||
this._nativeView.setClipChildren(newValue);
|
||||
}
|
||||
public _onClipToBoundsChanged(oldValue: boolean, newValue: boolean) {
|
||||
//
|
||||
}
|
||||
|
||||
public _childIndexToNativeChildIndex(index?: number): number {
|
||||
@ -182,11 +179,6 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
|
||||
|
||||
}
|
||||
|
||||
private static onClipToBoundsPropertyChanged(data: dependencyObservable.PropertyChangeData): void {
|
||||
var layout = <LayoutBase>data.object;
|
||||
layout.onClipToBoundsChanged(data.oldValue, data.newValue);
|
||||
}
|
||||
|
||||
protected static adjustChildrenLayoutParams(layoutBase: LayoutBase, widthMeasureSpec: number, heightMeasureSpec: number): void {
|
||||
let availableWidth = utils.layout.getMeasureSpecSize(widthMeasureSpec);
|
||||
let widthSpec = utils.layout.getMeasureSpecMode(widthMeasureSpec);
|
||||
@ -255,3 +247,4 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
16
ui/layouts/layout-base.android.ts
Normal file
16
ui/layouts/layout-base.android.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import common = require("./layout-base-common");
|
||||
|
||||
export class LayoutBase extends common.LayoutBase {
|
||||
public _onClipToBoundsChanged(oldValue: boolean, newValue: boolean) {
|
||||
// We can't implement this without calling setClipChildren(false) on every ancestor up in the visual tree,
|
||||
// which will kill performance. It will also lead to unwanted side effects such as other totally unrelated
|
||||
// views being affected by setting the parents' setClipChildren to false.
|
||||
// The problem in Android is that a ViewGroup either clips ALL of its children or it does not. Unlike iOS, the clipping
|
||||
// cannot be controlled on a per view basis. So clipToBounds=false will have to be somehow achieved with stacking different
|
||||
// views on top of one another in an AbsoluteLayout or GridLayout. There is always a workaround when playing with layouts.
|
||||
//
|
||||
// The following article explains this in detail:
|
||||
// http://stackoverflow.com/questions/25044085/when-drawing-outside-the-view-clip-bounds-with-android-how-do-i-prevent-underli
|
||||
console.warn(`clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative`);
|
||||
}
|
||||
}
|
||||
9
ui/layouts/layout-base.ios.ts
Normal file
9
ui/layouts/layout-base.ios.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import common = require("./layout-base-common");
|
||||
|
||||
export class LayoutBase extends common.LayoutBase {
|
||||
public _onClipToBoundsChanged(oldValue: boolean, newValue: boolean) {
|
||||
if (this._nativeView) {
|
||||
this._nativeView.clipsToBounds = newValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user