bringing elements closer together in scrollable view
I made the mistake of asking this question the same day as the Apple TOS fiasco hit, so now I'm re-asking :)
Question: Is it possible to bring the elements in a scrollable view closer without changing the view size?
Details: I have a scrollable view with three image views in it. By default, the two images not being shown are off the screen. I can bring them closer together by changing the width of the scrollable view, but then the size of the swipe box changes
Thanks in advance!
3 Answers
-
I'm sorry for bringing back a 3 moth post but i have the same problem and i have searched in the forums without results. Any solution, please? Thanks :)
-
I tried three things, that all work, but with various caveats.
1) I set the labels with a top based on the height of the first label. The only problem is that it's impossible to have a third label, as a limit of appcelerator
var rowcategory = Ti.UI.createLabel({ text:'hi', left:5, height:15, right:5, top:1 }); // i am setting the top to be the rowcategory's height + 3 var rowtitle = Ti.UI.createLabel({ text:'hello', left:5, height:'auto', right:5, top:rowcategory.size.height+3 }); row.add(rowcategory); row.add(rowtitle);
2) My favorite, I used webviews instead of multiple labels. This is by far my favorite solution as everything looked beautiful (I set <table> and everything looked beautiful). Problem is, these take a huge amount of resources, so having even 10 rows made it impossibly sluggish.
3) Take a look at "table_view_layout_2.js" in kitchen sink. This is ultimately what I ended up using, and it looks pretty good. Still more limited then a webview, but it looks decent enough.
Good luck!
-
Hello again Walter,
I have managed to run the scrollView with ImageViews like SportsIllustrated's concept app.
It can't be done with the ScrollableView because it uses the PageControl (only 1 item per page) so, you need to use the ScrollView and increment the "left" property of the ImageView in a loop.
Here is the full code of my app.js:
Titanium.UI.setBackgroundColor('#000'); var master_window = Ti.UI.createWindow({ backgroundColor: '#545454' }); var scrollView = Titanium.UI.createScrollView({ contentWidth:1400, contentHeight:50, top:844, height:167, backgroundColor:'#13386c' }); master_window.add(scrollView); var left = 10; for (var c=0; c<10; c++) { var view = Ti.UI.createImageView({ url:'img_'+c+'.png', width:120, height:120, left:left }); left = left + 145; scrollView.add(view); } master_window.add(scrollView); master_window.open();
Next step is give the ImageView a click event to "jump" to the selected page.
Hope this helps. Good luck !!