I want to listen master idea and suggestion.

Question

I want to listen master idea and suggestion.

You must Login before you can answer or comment on any questions.

I have this case to do, but I want to know how to do it's the best method. There have 4 image. 1. image1 2. image2 3. image3 4. image4

I have some question. how can I implement icon 1~ icon4? It's use tab bar? icon1~icon4 are images, not text. when I click icon2, icon3 , there are show other tab bar under icon1~4. click icon2-1~2-4 or 3-1~3-4, there are show content under the tab. how to use image in icon, the platform is iphone, not android system. thank you very much. I want to listen master idea and suggestion.

1 Answer

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

You need to investigate the property layout available in most views. When you use this property added child views flow inside their parent view.

...
layout: 'horizontal'
...

This means all child views added to a parent view with this layout will start in the top left corner and then flow to the right side of the previous one.

...
layout: 'vertical'
...

This means all child views added to a parent view with this layout will start in the top left corner and then flow underneath the previous one.

By mixing these parent views which you can nest you can end up with some very powerful layouts.

So start by

adding a parent scrollableview with a layout of vertical.
add a child view to hold the top four tabs to the parent view (1) with a layout of horizontal.
add a second level view to the parent view (1) with a layout of vertical. this will contain the optional second level tabs

Then by continuing this you can use the setVisible property on the click event to show only the view you want.

Have a play with the property and then get some paper and a pen, DRAW you layout as it will get complicated first time around.

Here is a starting point for you.

var viewParent = Ti.UI.createScrollView({
    contentHeight: Ti.UI.SIZE,
    contentWidth: Ti.UI.FILL,
    layout: 'vertical',
    showHorizontalScrollIndicator: true,
    showVerticalScrollIndicator: true
});
win.add(viewParent);
 
var viewMainTabs = Ti.UI.createView({
    height: Ti.UI.SIZE,
    layout: 'vertical',
    width: Ti.UI.FILL
});
viewParent.add(viewMainTabs);
 
var imgTab1 = Ti.UI.createImageView({
    height: Ti.UI.SIZE,
    image: 'tab1.png',
    width: Ti.UI.SIZE
});
viewMainTabs.add(imgTab1);
var imgTab2 = Ti.UI.createImageView({
    height: Ti.UI.SIZE,
    image: 'tab2.png',
    width: Ti.UI.SIZE
});
viewMainTabs.add(imgTab2);
var imgTab3 = Ti.UI.createImageView({
    height: Ti.UI.SIZE,
    image: 'tab3.png',
    width: Ti.UI.SIZE
});
viewMainTabs.add(imgTab3);
var imgTab4 = Ti.UI.createImageView({
    height: Ti.UI.SIZE,
    image: 'tab4.png',
    width: Ti.UI.SIZE
});
viewMainTabs.add(imgTab4);
 
var viewSecondary = Ti.UI.createView({
    height: Ti.UI.SIZE,
    layout: 'vertical',
    width: Ti.UI.FILL
});
viewParent.add(viewSecondary);