[TIMOB-1000] iOS: support pagingControlColor:'transparent' in scrollable view

Description

Comments

1. Blain Hamon 2011-04-15

   Couldn't find the ticket (Clicking the link takes me to the general list). Is this related to http://developer.appcelerator.com/helpdesk/view/24361">http://developer.appcelerator.com/helpdesk/view/24361 ?

2. Blain Hamon 2011-04-15

   Did this ever get fixed?

3. Adriano Paladini 2011-04-15

   Hello, I made a design change in ScrollableView to accept the
   PagingControl transparency.

   In fact, the pagingControlColor already accepts 'transparent', the problem is in the area
   rendered image, which is restricted to the total size of the Scrollable less
   pagingControl size.

   I did so to use in my project, edit TiUIScrollableView.m:

   Change this line:

   viewBounds.size.height = visibleBounds.size.height - (showPageControl ? pageControlHeight : 0);

   to this:

   viewBounds.size.height = visibleBounds.size.height; // - (showPageControl ? pageControlHeight : 0);

   and Change this:

   contentBounds.size.height = viewBounds.size.height - (showPageControl ? pageControlHeight : 0);

   to this:

   contentBounds.size.height = viewBounds.size.height; // - (showPageControl ? pageControlHeight : 0);

   Hope this helps in solving this problem.

4. Stephen Tramer 2011-04-15

   Blain, I don't know... DID this ever get fixed?

5. Vishal Duggal 2012-06-22 Transparent is supported as a valid color for pagingControl. In addition we now also support pagingControlAlpha property since 2.1.0
6. Federico Casali 2013-01-21 Verified that pagingControlColor:'transparent' is supported and working fine for scrollableViews. Device tested: - iPhone 5 / iOS 6.0.2 - iPad 2 / iOS 4.3.5 TiSDK 3.0 GA and 3.0.X Sample code:

      function getOrientation(o) {//Came from orientation.js, but we didn't need the buttons and such
      	switch (o) {
      		case Titanium.UI.PORTRAIT:
      			return 'portrait';
      		case Titanium.UI.UPSIDE_PORTRAIT:
      			return 'upside portrait';
      		case Titanium.UI.LANDSCAPE_LEFT:
      			return 'landscape left';
      		case Titanium.UI.LANDSCAPE_RIGHT:
      			return 'landscape right';
      		case Titanium.UI.FACE_UP:
      			return 'face up';
      		case Titanium.UI.FACE_DOWN:
      			return 'face down';
      		case Titanium.UI.UNKNOWN:
      			return 'unknown';
      	}
      }
      
      var win = Titanium.UI.createWindow({
      	title : 'Test win'
      });
      win.backgroundColor = 'orange';
      
      // initialize to all modes
      win.orientationModes = [Titanium.UI.PORTRAIT, Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT];
      
      //
      // orientation change listener
      //
      Ti.Gesture.addEventListener('orientationchange', function(e) {
      
      	// get orienation from event object
      	var orientation = getOrientation(e.orientation);
      });
      
      var view1 = Ti.UI.createView({
      	backgroundColor : 'red'
      });
      var l1 = Ti.UI.createLabel({
      	text : 'View 1',
      	color : '#fff',
      	width : 'auto',
      	height : 'auto'
      });
      view1.add(l1);
      
      var view2 = Ti.UI.createView({
      	backgroundColor : 'blue'
      });
      var l2 = Ti.UI.createLabel({
      	text : 'Click Me (View 2 - see log)',
      	color : '#fff',
      	width : 'auto',
      	height : 'auto'
      });
      view2.add(l2);
      
      var view3 = Ti.UI.createView({
      	backgroundColor : 'green'
      });
      var l3 = Ti.UI.createLabel({
      	text : 'View 3',
      	color : '#fff',
      	width : 'auto',
      	height : 'auto'
      });
      view3.add(l3);
      
      var view4 = Ti.UI.createView({
      	backgroundColor : 'black'
      });
      var l4 = Ti.UI.createLabel({
      	text : 'View 4',
      	color : '#fff',
      	width : 'auto',
      	height : 'auto'
      });
      view4.add(l4);
      
      var scrollView = Titanium.UI.createScrollableView({
      	views : [view1, view2, view3, view4],
      	showPagingControl : true,
      	pagingControlColor : 'transparent',
      	pagingControlHeight : 30,
      	maxZoomScale : 2.0,
      	currentPage : 1
      });
      
      win.add(scrollView);
      
      var i = 1;
      var activeView = view1;
      
      scrollView.addEventListener('scroll', function(e) {
      	activeView = e.view;
      	// the object handle to the view that is about to become visible
      	i = e.currentPage;
      	Titanium.API.info("scroll called - current index " + i + ' active view ' + activeView);
      });
      scrollView.addEventListener('click', function(e) {
      	Ti.API.info('ScrollView received click event, source = ' + e.source);
      });
      scrollView.addEventListener('touchend', function(e) {
      	Ti.API.info('ScrollView received touchend event, source = ' + e.source);
      });
      
      // add button to dynamically add a view
      var add = Titanium.UI.createButton({
      	title : 'Add'
      });
      if (Ti.Platform.osname !== 'mobileweb') {
      	add.style = Titanium.UI.iPhone.SystemButtonStyle.BORDERED
      }
      add.addEventListener('click', function() {
      	var newView = Ti.UI.createView({
      		backgroundColor : 'purple'
      	});
      	var l = Ti.UI.createLabel({
      		text : 'View ' + (scrollView.views.length + 1),
      		color : '#fff',
      		width : 'auto',
      		height : 'auto'
      	});
      	newView.add(l);
      	scrollView.addView(newView);
      });
      
      // jump button to dynamically change go directly to a page (non-animated)
      var jump = Titanium.UI.createButton({
      	title : 'Jump'
      });
      if (Ti.Platform.osname !== 'mobileweb') {
      	jump.style = Titanium.UI.iPhone.SystemButtonStyle.BORDERED;
      }
      jump.addEventListener('click', function() {
      	i = (scrollView.currentPage + 1) % scrollView.views.length;
      	scrollView.currentPage = i;
      });
      
      // change button to dynamically change a view
      var change = Titanium.UI.createButton({
      	title : 'Change'
      });
      if (Ti.Platform.osname !== 'mobileweb') {
      	change.style = Titanium.UI.iPhone.SystemButtonStyle.BORDERED;
      }
      change.addEventListener('click', function() {
      	var newView = Ti.UI.createView({
      		backgroundColor : '#ff9900'
      	});
      	var l = Ti.UI.createLabel({
      		text : 'View (Changed) ' + (i + 1),
      		color : '#fff',
      		height : 'auto',
      		width : 'auto'
      	});
      	newView.add(l);
      	var ar = [];
      	for (var x = 0; x < scrollView.views.length; x++) {
      		if (x == i) {
      			Ti.API.info('SETTING TO NEW VIEW ' + x);
      			ar[x] = newView;
      		} else {
      			Ti.API.info('SETTING TO OLD VIEW ' + x);
      
      			ar[x] = scrollView.views[x];
      		}
      	}
      	scrollView.views = ar;
      });
      
      // move scroll view left
      var left = Titanium.UI.createButton({
      	backgroundColor : 'transparent',
      	image : '/images/icon_arrow_left.png'
      });
      left.addEventListener('click', function(e) {
      	if (i === 0) {
      		return;
      	}
      	i--;
      	scrollView.scrollToView(i);
      });
      
      // move scroll view right
      var right = Titanium.UI.createButton({
      	backgroundColor : 'transparent',
      	image : '/images/icon_arrow_right.png'
      });
      right.addEventListener('click', function(e) {
      	if (i === (scrollView.views.length - 1)) {
      		return;
      	}
      	i++;
      	scrollView.scrollToView(scrollView.views[i]);
      });
      
      if (Titanium.Platform.osname == 'iphone' || Titanium.Platform.osname == 'ipad') {
      	var flexSpace = Titanium.UI.createButton({
      		systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
      	});
      	// set toolbar
      	win.setToolbar([flexSpace, left, change, add, jump, right, flexSpace]);
      } else {
      	var toolbar = Titanium.UI.createView({
      		bottom : 10,
      		height : 50,
      		backgroundColor : '#333333',
      		borderRadius : 10,
      		opacity : 0.7,
      		left : 10,
      		right : 10
      	});
      
      	var floater = Titanium.UI.createView({
      		width : 320,
      		height : 'auto',
      		backgroundColor : 'transparent'
      	});
      
      	toolbar.add(floater);
      
      	left.left = 10;
      	left.width = 35;
      
      	change.left = 50;
      	change.width = 70;
      	change.height = 35;
      
      	add.left = 130;
      	add.width = 70;
      	add.height = 35;
      
      	jump.left = 210;
      	jump.width = 70;
      	jump.height = 35;
      
      	right.right = 10;
      	right.width = 35;
      
      	floater.add(left);
      	floater.add(change);
      	floater.add(add);
      	floater.add(jump);
      	floater.add(right);
      	win.add(toolbar);
      };
      win.open();
      
      

JSON Source