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

ui/layouts/layout-base-common.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
         }
     }
 }
+

ui/layouts/layout-base.android.ts

@@ -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`);
+    }
+}

ui/layouts/layout-base.ios.ts

@@ -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;
+        }
+    }
+}