[TIMOB-25635] Android: Multi-View Viewpager (ScrollableView)

android/modules/ui/src/java/ti/modules/titanium/ui/ScrollableViewProxy.java

@@ -27,6 +27,8 @@
 @Kroll.proxy(creatableInModule = UIModule.class,
 	propertyAccessors = {
 		TiC.PROPERTY_CACHE_SIZE,
+		TiC.PROPERTY_CLIP_VIEWS,
+		TiC.PROPERTY_PADDING,
 		TiC.PROPERTY_SHOW_PAGING_CONTROL,
 		TiC.PROPERTY_OVER_SCROLL_MODE
 })
@@ -58,6 +60,7 @@ public ScrollableViewProxy()
 		super();
 		inScroll = new AtomicBoolean(false);
 		defaultValues.put(TiC.PROPERTY_CACHE_SIZE, MIN_CACHE_SIZE);
+		defaultValues.put(TiC.PROPERTY_CLIP_VIEWS, true);
 		defaultValues.put(TiC.PROPERTY_SHOW_PAGING_CONTROL, false);
 		defaultValues.put(TiC.PROPERTY_OVER_SCROLL_MODE, 0);
 	}

android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIScrollableView.java

@@ -7,6 +7,7 @@
 package ti.modules.titanium.ui.widget;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.lang.Math;
 
 import org.appcelerator.kroll.KrollDict;
@@ -75,6 +76,9 @@ public TiUIScrollableView(ScrollableViewProxy proxy)
 		mViews = new ArrayList<TiViewProxy>();
 		mAdapter = new ViewPagerAdapter(activity, mViews);
 		mPager = buildViewPager(activity, mAdapter);
+		if (proxy.hasPropertyAndNotNull(TiC.PROPERTY_CLIP_VIEWS)) {
+			mPager.setClipToPadding(TiConvert.toBoolean(proxy.getProperty(TiC.PROPERTY_CLIP_VIEWS), true));
+		}
 		mContainer.addView(mPager, new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
 
 		// Add paging controls to container.
@@ -396,6 +400,10 @@ public void processProperties(KrollDict d)
 			setPageCacheSize(TiConvert.toInt(d.get(TiC.PROPERTY_CACHE_SIZE)));
 		}
 
+		if (d.containsKey(TiC.PROPERTY_PADDING)) {
+			setPadding((HashMap) d.get(TiC.PROPERTY_PADDING));
+		}
+
 		super.processProperties(d);
 	}
 
@@ -411,6 +419,8 @@ public void propertyChanged(String key, Object oldValue, Object newValue, KrollP
 			} else {
 				hidePager();
 			}
+		} else if (TiC.PROPERTY_PADDING.equals(key)) {
+			setPadding((HashMap) newValue);
 		} else if (TiC.PROPERTY_SCROLLING_ENABLED.equals(key)) {
 			mEnabled = TiConvert.toBoolean(newValue);
 		} else if (TiC.PROPERTY_OVER_SCROLL_MODE.equals(key)) {
@@ -638,6 +648,32 @@ public ArrayList<TiViewProxy> getViews()
 		return mViews;
 	}
 
+	private void setPadding(HashMap<String, Object> d)
+	{
+		int paddingLeft = mPager.getPaddingLeft();
+		int paddingRight = mPager.getPaddingRight();
+		int paddingTop = mPager.getPaddingTop();
+		int paddingBottom = mPager.getPaddingBottom();
+
+		if (d.containsKey(TiC.PROPERTY_LEFT)) {
+			paddingLeft = TiConvert.toInt(d.get(TiC.PROPERTY_LEFT), 0);
+		}
+
+		if (d.containsKey(TiC.PROPERTY_RIGHT)) {
+			paddingRight = TiConvert.toInt(d.get(TiC.PROPERTY_RIGHT), 0);
+		}
+
+		if (d.containsKey(TiC.PROPERTY_TOP)) {
+			paddingTop = TiConvert.toInt(d.get(TiC.PROPERTY_TOP), 0);
+		}
+
+		if (d.containsKey(TiC.PROPERTY_BOTTOM)) {
+			paddingBottom = TiConvert.toInt(d.get(TiC.PROPERTY_BOTTOM), 0);
+		}
+
+		mPager.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
+	}
+
 	@Override
 	public void release()
 	{

android/titanium/src/java/org/appcelerator/titanium/TiC.java

@@ -1283,6 +1283,11 @@ public class TiC
 	 */
 	public static final String PROPERTY_CLEAR_ON_EDIT = "clearOnEdit";
 
+	/**
+	 * @module.api
+	 */
+	public static final String PROPERTY_CLIP_VIEWS = "clipViews";
+
 	/**
 	 * @module.api
 	 */

apidoc/Titanium/UI/ScrollableView.yml

@@ -360,7 +360,8 @@ properties:
     type: Boolean
     availability: creation
     default: true
-    platforms: [iphone, ipad]
+    since: { iphone: 0.9, ipad: 0.9, android: 7.4.0 }
+    platforms: [iphone, ipad, android]
 
   - name: hitRect
     summary: Sets the region where this view responds to gestures.
@@ -375,6 +376,12 @@ properties:
     platforms: [iphone, ipad]
     since: "2.1"
 
+  - name: padding
+    summary: The padding applied to the scrollable view.
+    platforms: [android]
+    type: ViewPadding
+    since: "7.4.0"
+
 examples:
   - title: Simple Scrollable View with 3 Views
     example: |

apidoc/Titanium/UI/TextArea.yml

@@ -382,7 +382,7 @@ properties:
 
   - name: padding
     summary: Sets the left and right padding of this TextArea. The text will always be vertically centered.
-    type: TextAreaPadding
+    type: ViewPadding
     platforms: [android, iphone, ipad]
     since: {android: "6.0.0", iphone: "6.1.0", ipad: "6.1.0"}
 
@@ -609,25 +609,4 @@ properties:
 
   - name: length
     summary: Number of characters selected.
-    type: Number
----
-name: TextAreaPadding
-summary: Dictionary object of parameters for the <Titanium.UI.TextArea.padding>  that describes the padding
-since: {android: "6.0.0", iphone: "6.1.0", ipad: "6.1.0"}
-platforms: [android, iphone, ipad]
-properties:
-  - name: left
-    type: Number
-    summary: Left padding
-
-  - name: right
-    type: Number
-    summary: Right padding
-
-  - name: top
-    type: Number
-    summary: Top padding
-
-  - name: bottom
-    type: Number
-    summary: Bottom padding
+    type: Number

apidoc/Titanium/UI/TextField.yml

@@ -435,7 +435,7 @@ properties:
 
   - name: padding
     summary: Sets the padding of this text field.
-    type: TextFieldPadding
+    type: ViewPadding
     platforms: [android, iphone, ipad]
     since: 6.0.0
 

apidoc/Titanium/UI/View.yml

@@ -1990,3 +1990,23 @@ properties:
     type: Boolean
     default: false
     osver: {android: {min: 5.0}}
+
+---
+name: ViewPadding
+summary: Dictionary object of parameters for the padding applied to all kinds of views.
+properties:
+  - name: left
+    type: Number
+    summary: Left padding
+
+  - name: right
+    type: Number
+    summary: Right padding
+
+  - name: top
+    type: Number
+    summary: Top padding
+
+  - name: bottom
+    type: Number
+    summary: Bottom padding

tests/Resources/ti.ui.scrollableview.test.js

@@ -0,0 +1,164 @@
+/*
+ * Appcelerator Titanium Mobile
+ * Copyright (c) 2011-2018 by Appcelerator, Inc. All Rights Reserved.
+ * Licensed under the terms of the Apache Public License
+ * Please see the LICENSE included with this distribution for details.
+ */
+/* eslint-env mocha */
+/* global Ti */
+/* eslint no-unused-expressions: "off" */
+'use strict';
+var should = require('./utilities/assertions');
+
+describe('Titanium.UI.ScrollableView', function () {
+	var win;
+	this.timeout(5000);
+
+	afterEach(function (finish) {
+		if (win) {
+			win.addEventListener('close', function () {
+				finish();
+			});
+			win.close();
+			win = null;
+		} else {
+			finish();
+		}
+	});
+
+	it('apiName', function () {
+		var scrollableView = Ti.UI.createScrollableView({});
+		should(scrollableView).have.readOnlyProperty('apiName').which.is.a.String;
+		should(scrollableView.apiName).be.eql('Ti.UI.ScrollableView');
+	});
+
+	it('views', function () {
+		var bar = Ti.UI.createScrollableView({});
+		should(bar.views).be.an.Array; // iOS returns undefined
+		should(bar.getViews).be.a.Function;
+		should(bar.views).be.empty;
+		should(bar.getViews()).be.empty;
+		bar.views = [ Ti.UI.createView(), Ti.UI.createView() ];
+		should(bar.views.length).eql(2);
+		should(bar.getViews().length).eql(2);
+	});
+
+	it.windowsMissing('clipViews', function (finish) {
+		this.slow(5000);
+		this.timeout(5000);
+
+		var scrollableView = Ti.UI.createScrollableView({
+			clipViews: true
+		});
+
+		win = Ti.UI.createWindow();
+		win.addEventListener('open', function () {
+			should(scrollableView.clipViews).eql(true);
+			finish();
+		});
+
+		var view1 = Ti.UI.createView({ id: 'view1', backgroundColor: '#836' });
+		var view2 = Ti.UI.createView({ id: 'view2', backgroundColor: '#246' });
+		var view3 = Ti.UI.createView({ id: 'view3', backgroundColor: '#48b' });
+
+		scrollableView.setViews([ view1, view2, view3 ]);
+
+		win.add(scrollableView);
+		win.open();
+	});
+
+	// TODO: Add parity?
+	it.android('padding', function (finish) {
+		this.slow(5000);
+		this.timeout(5000);
+
+		var scrollableView = Ti.UI.createScrollableView({
+			padding: { left: 20, right: 20 }
+		});
+
+		win = Ti.UI.createWindow();
+		win.addEventListener('open', function () {
+			should(scrollableView.padding).be.an.Object;
+			should(scrollableView.padding.left).eql(20);
+			should(scrollableView.padding.right).eql(20);
+			finish();
+		});
+
+		var view1 = Ti.UI.createView({ id: 'view1', backgroundColor: '#836' });
+		var view2 = Ti.UI.createView({ id: 'view2', backgroundColor: '#246' });
+		var view3 = Ti.UI.createView({ id: 'view3', backgroundColor: '#48b' });
+
+		scrollableView.setViews([ view1, view2, view3 ]);
+
+		win.add(scrollableView);
+		win.open();
+	});
+
+	// FIXME explicitly setting currentPage doesn't seem to update value on Android
+	it.androidBroken('currentPage', function () {
+		var bar = Ti.UI.createScrollableView({});
+		should(bar.currentPage).be.a.Number;
+		should(bar.getCurrentPage).be.a.Function;
+		should(bar.currentPage).eql(0);
+		should(bar.getCurrentPage()).eql(0);
+		bar.views = [ Ti.UI.createView(), Ti.UI.createView() ];
+		bar.currentPage = 1;
+		should(bar.currentPage).eql(1); // Android gives 0
+		should(bar.getCurrentPage()).eql(1);
+	});
+
+	it.androidAndWindowsBroken('moveX-scrollTo', function (finish) {
+		var testName = null,
+			nextPageIndex = 0,
+			bar = null;
+		this.slow(5000);
+		this.timeout(20000);
+		function doNextTest() {
+			try {
+				if (!testName) {
+					testName = 'moveNext';
+					Ti.API.info('Testing ScrollableView.moveNext()');
+					nextPageIndex = bar.currentPage + 1;
+					should(bar.moveNext).be.a.Function;
+					bar.moveNext();
+				} else if (testName === 'moveNext') {
+					testName = 'movePrevious';
+					Ti.API.info('Testing ScrollableView.movePrevious()');
+					nextPageIndex = bar.currentPage - 1;
+					should(bar.movePrevious).be.a.Function;
+					bar.movePrevious();
+				} else if (testName === 'movePrevious') {
+					testName = 'scrollToView';
+					Ti.API.info('Testing ScrollableView.scrollToView()');
+					nextPageIndex = 2;
+					should(bar.scrollToView).be.a.Function;
+					bar.scrollToView(nextPageIndex);
+				} else if (testName === 'scrollToView') {
+					finish();
+				}
+			} catch (err) {
+				finish(err);
+			}
+		}
+		win = Ti.UI.createWindow();
+		bar = Ti.UI.createScrollableView();
+		bar.views = [ Ti.UI.createView(), Ti.UI.createView(), Ti.UI.createView() ];
+		bar.addEventListener('scrollend', function (e) {
+			try {
+				should(e.currentPage).eql(nextPageIndex);
+				should(bar.currentPage).eql(nextPageIndex);
+				should(bar.getCurrentPage()).eql(nextPageIndex);
+				doNextTest();
+			} catch (err) {
+				finish(err);
+			}
+		});
+		win.add(bar);
+		win.addEventListener('postlayout', function () {
+			if (!testName) {
+				doNextTest();
+			}
+		});
+		win.open();
+	});
+});