Tabs (DIY)

[Alan Hendry]

HI,

I've recreated the function of the tabs example with customizable tabs.

It should be easy to edit the code for more than 3 tabs.

You can use buttons instead of text (use ontouch instead of ontouchdown).

For landscape you can have the tabs on the left 

(change lay to be horizontal, horiz1 to be vertical)

and/or switch layout when the user rotates the screen

(I tried to write it more like a plugin, but Layouts don't seem to allow .data)

Regards, ah

const qact = "#999999" // bg for active tab
const qina = "#000000" // bg for inactive tab

function OnStart() {
    lay = app.CreateLayout( "Linear", "Vertical,FillXY" )
    horiz1 = app.AddLayout( lay,"Linear","Horizontal" )
    but1 = qaddbut(horiz1,"Tab 1",1)
    but2 = qaddbut(horiz1,"Tab 2",2)
    but3 = qaddbut(horiz1,"Tab 3",3)
    tab1 = qaddlay(lay)
    tab2 = qaddlay(lay)
    tab3 = qaddlay(lay)
    tab1.SetBackGradient( "red", "green", "", "left-right" )
    t1 = app.AddText( tab1,"text1" )
    tab2.SetBackGradient( "green", "blue", "", "left-right" )
    t2 = app.AddText( tab2,"text2" )
    tab3.SetBackGradient( "blue", "red", "", "left-right" )
    t3 = app.AddText( tab3,"text3" )
    app.SimulateTouch(but1,0.5,0.5,"down") // make first tab active
    app.AddLayout( lay )
}
function qaddbut(qlay,qtxt,qidx) {
        var q = app.AddText( qlay,qtxt )
        q.SetPadding(10,10,10,10,"px")
        q.SetOnTouchDown( q_OnTouch )
        q.data.qidx = qidx
        return q
}
function qaddlay(qlay,qidx) {
        var q = app.AddLayout(lay,"Linear", "FillXY")
//        q.data.qidx = qidx
    q.Gone()
        return q
}
function q_OnTouch() {
    but1.SetBackColor(qina)
    but2.SetBackColor(qina)
    but3.SetBackColor(qina)
    this.SetBackColor(qact)
    var qidx = this.data.qidx
    if (qidx == 1) {tab1.Show();} else {tab1.Gone();}
    if (qidx == 2) {tab2.Show();} else {tab2.Gone();}
    if (qidx == 3) {tab3.Show();} else {tab3.Gone();}
}

[Alan Hendry]

HI,

It should be easy control the size of the text, and it's colour (active and inactive).

Also should be pretty simple to convert to MUI Text or Buttons.

You could use images instead of text (but you'd need images for active and inactive, plus code to switch).

You could put the tabs at the bottom (define the tab layouts with height 0.9, then define horiz1 and adding tabs text), or similarly put them on the right.

If anyone is interested I think I can now see how to make the touch function cope with any number of tabs.

Regards, ah

[Alan Hendry]

HI,

In my latest version of DIY tabs the ontouch doesn't need modifying as you add (or remove) tabs 

and should be more responsive.

Adding the tabs now uses Batch (slightly quicker).

Also includes OnConfig to move the tabs to the top (Portrait) or left-hand-side (Landscape).

qcurrent contains the index of the current tab (now the first tab is 0). 

Regards, ah

cfg.Dark

var qbuts = [], qlays = [], qcurrent=0

const qactive="#cccccc", qinactive="#333333"

function OnStart() {

    lay = app.CreateLayout( "Linear", "Vertical,FillXY" )

    horiz1 = app.AddLayout( lay,"Linear","Horizontal" )

    but1 = qaddbut(horiz1,"Tab 1",0) 

    but2 = qaddbut(horiz1,"Tab 2",1) 

    but3 = qaddbut(horiz1,"Tab 3",2) 

    tab1 = qaddlay(lay,0) 

    tab2 = qaddlay(lay,1) 

    tab3 = qaddlay(lay,2) 

    tab1.SetBackGradient( "red", "green", "", "left-right" )

    t1 = app.AddText( tab1,"Text" )

    tab2.SetBackGradient( "green", "blue", "", "left-right" )

    t2 = app.AddButton( tab2,"Button" )

    tab3.SetBackGradient( "blue", "red", "", "left-right" )

    t3 = app.AddCheckBox(tab3,"Checkbox" )

    but1.SetBackColor(qactive)

    tab1.Show()

    app.AddLayout( lay )

}

function qaddbut(qlay,qtxt,qidx) {

var q = app.AddText( qlay,qtxt ) 

    q.Batch({

        SetBackColor_: [qinactive],

        SetTextColor: [ "#999999" ],

        SetPadding_: [20,20,20,20,"px"],

//      SetMargins_: [20,20,20,20,"px"],

//      SetTextSize: [32,""],  

        SetOnTouchDown: [q_OnTouch]

    })

q.data.qidx = qidx 

ign = qbuts.push(q)

return q 

}

function qaddlay(qlay,qidx) {

    var q = app.AddLayout(qlay,"Linear", "FillXY") 

    q.Gone() 

    ign = qlays.push(q)

    return q 

}    

function q_OnTouch () {

    var qidx = this.data.qidx 

    if (qidx!=qcurrent) {

       qbuts[qcurrent].SetBackColor(qinactive)

       qbuts[qidx].SetBackColor(qactive)

       qlays[qcurrent].Gone()

       qlays[qidx].Show()

       qcurrent=qidx

    }

} // fn

function OnConfig(){

   lay.SetOrientation(  "Horizontal")

   horiz1.SetOrientation("Vertical")

}