Segmented Control Widget

Posted by jonathanbeebe, Posted on October 21, 2011

1 vote
GitHub URL: 
https://github.com/jonbeebe/Corona-Segmented-Control

Requires Corona Build 645 or higher!

The segmented control widget has been removed from the upcoming widget version 0.2, so the source has been made publicly available here as a separate module. Here is the API documentation:

widget.newSegmentedControl()

Returns a set of UI buttons (placed in a single display group) that stay depressed when you press each one. Most common use is to act like tabs, but they theoretically behave just like individual UI buttons, but are grouped together.

Syntax

segmentedcontrol.new( buttonTable [, params] )

Example

    local segmentedControl = require( "segmentedcontrol" )
 
    local buttonHandler = function( event )
        local id = event.target.id
 
        if id == "btn1" then
 
            print( "Button handler for 1st button." )
 
        elseif id == "btn2" then
 
            print( "Button handler for 2nd button." )
 
        elseif id == "btn3" then
 
            print( "Button handler for 3rd button." )
        end
    end
 
    local buttonTable = {
        { id="btn1", label="Button 1", onPress=buttonHandler, isDown=true },
        { id="btn2", label="Button 2", onPress=buttonHandler },
        { id="btn3", label="Button 3", onPress=buttonHandler }
    }
 
    local segmentedButtons = segmentedControl.new( buttonTable, { x=50, y=100 } )

Parameters

buttonTable

Table. This is the table that will hold individual tables for each button in the segmented control group. The structure of the table is as follows:

    buttonTable = {
        { label=(string), onPress=(function), isDown=(boolean) },
        { ... }
    }
 
    -- each individual table within buttonTable (above) represents a
    -- different ui button in the segmented control group.

params

Table. Optional settings and options for the segmented control group. Parameters can include any or all of the following:

id

String. An optional id you can use to identify this widget (internally).

x, y

Numbers. The initial x/y coordinates of the widget from the top left reference point. Default is 0, 0.

labelColor

Table. The label text color for the individual buttons. Default is white ( { 255, 255, 255 } ).

font

String. The font to be used for label text on individual buttons.

size

Number. The size of the font that will be used for label text on individual buttons.

padding

Number. The padding on the left and right side of the label text (for each button).

emboss

Boolean (true/false). If set to false, the label text on individual buttons will not have the embossed effect. Default is true.

Properties:

view

This property is used to access the widget's display group.

Removing the Widget:

Remove this widget (and all of it's children buttons) using display.remove or removeSelf() as you normally would with any other Corona display object.


Replies

richard9
User is online Online
Joined: 28 Feb 2011

Sorry Jonathan, but I just can't seem to get this to work. :(

Sure, it displays well enough. but it crashes Corona almost every time I press a button. No error message within Corona - Corona itself just crashes. (witnessed in 648, 652) Not even sure where to start troubleshooting. It completes everything listed in the buttonHandler and then promptly Corona gets shut down by Windows.

(How do I know it's segmentedcontrol? Because I commented it out, replaced it with a widget.newButton, and no crashes...)

richard9
User is online Online
Joined: 28 Feb 2011

Starting to believe Corona is at fault, now. Could repeat a bug 50/50 tries in which button 4 would fail the entire app by calling some obscure code in tableView.lua (despite my code only calling a display.remove() command.) I was about to post, and whammo...now the app works fine 10/10 tries.

Then on try #11 it crashes, but without the same error. Repeated 10 times.

Unfortunately since this requires build 645+ I guess I won't be using segmentedcontrol until something gets fixed, but it's somewhat heartening to know I'm not only writing brilliantly awful code...

Keep up the good work! Perhaps the engine gets fixed soon :)

MeApps's picture
MeApps
User offline. Last seen 17 hours 12 min ago. Offline
Joined: 4 Jun 2011

The Default color is now black with .724??? using lineColor parameter to change it and it is not work??? what happened??

AG-pablo's picture
AG-pablo
User offline. Last seen 4 weeks 17 hours ago. Offline
Joined: 14 May 2011

i can't change any of the other params , just label, id and if is down

1
2
3
4
5
6
local buttonTable = {
        { id="btn1", label="Septiembre", onPress=buttonHandler, isDown=true },
        { id="btn2", label="Octubre", onPress=buttonHandler },
        { id="btn3", label="Noviembre",  size = 5, onPress=buttonHandler}
        
}

ckausik
User offline. Last seen 25 min 25 sec ago. Offline
Joined: 18 Jan 2011

@pablo56: same problem here. I am using build 751.

AppIt All
User offline. Last seen 21 hours 51 min ago. Offline
Joined: 11 Apr 2012

On line 136 (approx) if you turn fontEmboss to false you can set the label color. I'm just starting to use Corona so this was the easiest fix I've found.