Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13610

Android: Proposed fix for poor user experience when scrollableView is inside tableview/listview/scrollview

    Details

      Description

      Problem description
      If you put a scrollableview inside a tableview/listview/scrollview, it s almost unusable as described in the docs: http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.TableView

      As a table view inherently scrolls, it creates a very poor user experience when one contains other scrolling views, such as a ScrollableView or TextArea. Thus, this layout is strongly discouraged.

      The following pull request fixes that:

      Pull request
      https://github.com/appcelerator/titanium_mobile/pull/4153

      Steps to reproduce
      1. Run the reproduction test case.
      2. See that scrolling the scroll view horizontally causes it to sometimes repel swiping.

      Reproduction test case (any SDK)

      var win = Ti.UI.createWindow({
          backgroundColor : 'white',
          modal : false
      });
       
      var table = Ti.UI.createTableView();
      var rowData = [];
       
      var scrollable = Ti.UI.createScrollableView({
          top:0,
          left:0,
          bottom:0,
          right:0,
          backgroundColor:'orange',
          views : [Ti.UI.createView({
              backgroundColor : 'blue'
          }), Ti.UI.createView({
              backgroundColor : 'green'
          }), Ti.UI.createView({
              backgroundColor : 'yellow'
          })]
      })
       
      var row = Ti.UI.createTableViewRow({
          height : 120
      });
      row.add(scrollable);
      rowData.push(row);
       
      for (var i = 0; i < 40; i++) {
          rowData.push(Ti.UI.createTableViewRow({
              title : ("test2 " + i)
          }));
      }
      table.data = rowData;
       
      win.add(table);
      win.open();
      

      Pull request test case

      // open a single window
       
      function tableviewtest() {
      	var win = Ti.UI.createWindow({
      		backgroundColor : 'white',
      		modal : false
      	});
       
      	var table = Ti.UI.createTableView();
      	var rowData = [];
       
      	var scrollable = Ti.UI.createScrollableView({
      		views : [Ti.UI.createView({
      			backgroundColor : 'blue'
      		}), Ti.UI.createView({
      			backgroundColor : 'green'
      		}), Ti.UI.createView({
      			backgroundColor : 'yellow'
      		})]
      	})
       
      	var row = Ti.UI.createTableViewRow({
      		height : 120
      	});
      	row.add(scrollable);
      	rowData.push(row);
       
      	for (var i = 0; i < 40; i++) {
      		rowData.push(Ti.UI.createTableViewRow({
      			title : ("test " + i)
      		}));
      	}
      	table.data = rowData;
       
      	win.add(table);
      	win.open();
      }
       
      function scrolliewtest() {
      	var win = Ti.UI.createWindow({
      		backgroundColor : 'white',
      		modal : false
      	});
       
      	var scroll = Ti.UI.createScrollView({
      		layout : 'vertical'
      	});
       
      	var scrollable = Ti.UI.createScrollableView({
      		height : 120,
      		views : [Ti.UI.createView({
      			backgroundColor : 'blue'
      		}), Ti.UI.createView({
      			backgroundColor : 'green'
      		}), Ti.UI.createView({
      			backgroundColor : 'yellow'
      		})]
      	})
       
      	for (var i = 0; i < 3; i++) {
      		scroll.add(Ti.UI.createLabel({
      			height : 80,
      			text : ("test " + i)
      		}));
      	}
      	scroll.add(scrollable);
       
      	for (var i = 0; i < 40; i++) {
      		scroll.add(Ti.UI.createLabel({
      			height : 80,
      			text : ("test " + i)
      		}));
      	}
       
      	win.add(scroll);
      	win.open();
      }
       
      function scrolliewtabletest() {
      	var win = Ti.UI.createWindow({
      		backgroundColor : 'white',
      		modal : false
      	});
       
      	var scroll = Ti.UI.createScrollView({
      		scrollType : 'horizontal',
      		horizontalWrap : false,
      		layout : 'horizontal'
      	});
       
      	var table = Ti.UI.createTableView({
      		width : 800
      	});
      	var rowData = [];
       
      	for (var i = 0; i < 40; i++) {
      		rowData.push(Ti.UI.createTableViewRow({
      			title : ("test " + i)
      		}));
      	}
      	table.data = rowData;
       
      	for (var i = 0; i < 3; i++) {
      		scroll.add(Ti.UI.createLabel({
      			width : 80,
      			text : ("test " + i)
      		}));
      	}
      	scroll.add(table);
       
      	for (var i = 0; i < 40; i++) {
      		scroll.add(Ti.UI.createLabel({
      			width : 80,
      			text : ("test " + i)
      		}));
      	}
       
      	win.add(scroll);
      	win.open();
      }
       
      function scrollabletest() {
      	var win = Ti.UI.createWindow({
      		backgroundColor : 'white',
      		modal : false
      	});
       
      	var scroll = Ti.UI.createScrollableView({
       
      	});
       
      	var table = Ti.UI.createTableView({
      		width : 300,
      		left : 40,
      		right : 40,
      		backgroundColor : 'green'
      	});
       
      	var rowData = [];
       
      	for (var i = 0; i < 40; i++) {
      		rowData.push(Ti.UI.createTableViewRow({
      			title : ("test " + i)
      		}));
      	}
      	table.data = rowData;
       
      	scroll.addView(table);
       
      	var scroll2 = Ti.UI.createScrollView({
      		layout : 'vertical'
      	});
       
      	for (var i = 0; i < 40; i++) {
      		scroll2.add(Ti.UI.createLabel({
      			height : 80,
      			text : ("test " + i)
      		}));
      	}
       
      	scroll.addView(scroll2);
      	win.add(scroll);
      	win.open();
      }
       
      var win = Ti.UI.createWindow({
      	backgroundColor : 'white'
      });
      var tableview = Ti.UI.createTableView({
      	rowHeight : 120,
      	data : [{
      		title : 'tableviewtest',
      		callback : tableviewtest
      	}, {
      		title : 'scrolliewtest',
      		callback : scrolliewtest
      	}, {
      		title : 'scrolliewtabletest',
      		callback : scrolliewtabletest
      	}, {
      		title : 'scrollabletest',
      		callback : scrollabletest
      	}]
      })
      tableview.addEventListener('click', function(e) {
      	if (e.rowData && e.rowData.callback)
      		e.rowData.callback();
      })
      win.add(tableview);
      win.open();
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                pwang Ping Wang
                Reporter:
                farfromrefuge Martin Guillon (Inactive)
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-16282
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Integration