Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

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!

— asked April 19th 2010 by Will Collins
  • scrollable
  • scrollableview
0 Comments

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 :)

    — answered July 13th 2010 by Ivan Gallego Sanchez
    permalink
    1 Comment
    • I would also like to see this ability. It would be very useful. You can see it on a lot of other apps, they have small scroll view with tighter elements.

      You can set the cropping to false and then make the width smaller, but the scrollable area shrinks with the width so it's not a 100% functional solution…

      — commented May 9th 2011 by Isak Burström
  • 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!

    — answered July 14th 2010 by Will Collins
    permalink
    1 Comment
    • Hello Walter,

      Thanks for answering. I am quite newbie and i don't understand why you use a table view. I am only trying to use ScrollableView & ImageView.

      Searching in the Kitchen Sink… i have found a scrollableView with Buttons that they have a background image (See Scrolling Tabs). It's not like an imageview but it could be used for a page navigation. What do you think?

      — commented July 14th 2010 by Ivan Gallego Sanchez
  • 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 !!

    — answered July 14th 2010 by Ivan Gallego Sanchez
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.