0

How would I create a checkbox with Titanium for iOS?

jonsca
  • 10,218
  • 26
  • 54
  • 62
Michael Frans
  • 613
  • 3
  • 23
  • 49
  • You would have to make your own one e.g create an square view and attach a clickhandler on it which toggles the background color and sets a checked flag – Moritz Roessler Nov 09 '12 at 09:58
  • thanks for your comment :) can u give me some example? i've tried to set checked flag value but it won't change.. do you have another suggestion? – Michael Frans Nov 09 '12 at 10:08

2 Answers2

2

Here is an very simplified example of how you could do something similar

var win = Ti.UI.createWindow()

function createCheckbox (specs) {
    if(typeof specs != "object")
        specs = {};
    specs.width = specs.width || 25
    specs.backgroundColor = specs.unCheckedColor || "white"
    specs.height = specs.height || 25
    specs.border = specs.border || 1
    specs.borderColor = specs.borderColor || "silver"
    var viw = Ti.UI.createView(specs)
    
    function togglecheck () {
        if(!viw.checked) {
            viw.checked = true;
            viw.backgroundColor = specs.checkedColor || "green"
        }
        else {
            viw.checked = false;
            viw.backgroundColor = specs.unCheckedColor || "white"
        }           
    }
    viw.addEventListener("click",togglecheck)
    
    return viw
}

var checkbox = createCheckbox({})

win.add(checkbox)

You could also use background images to display an checkmark on the view or add a smaller view on a slightly bigger one and only give the inner view a border color and display an checkmark image on the outer view

Hope this points you in the right direction

Edit: Here is an example with an image, though i really would create a new one (obviously transparent) because this one looks really bad ^^ anyway this way a checkboxc with images could work

var win = Ti.UI.createWindow()
Ti.UI.setBackgroundColor("#FFF")
function createCheckbox (specs,checkboxspecs,image) {
    
    if(typeof checkboxspecs != "object")
        checkboxspecs = {};
    checkboxspecs.width = checkboxspecs.width || 25
    checkboxspecs.backgroundColor = checkboxspecs.unCheckedColor || "white"
    checkboxspecs.height = checkboxspecs.height || 25
    checkboxspecs.border = checkboxspecs.border || 1
    checkboxspecs.borderColor = checkboxspecs.borderColor || "silver"
    var imageView = Ti.UI.createImageView({
        image:image || "acheckbox.gif",
        height:checkboxspecs.height * 1.5,
        bottom:3 + checkboxspecs.height * 0.5,
        left:3 + checkboxspecs.width * 0.5,
        opacity:0
    })  
    
    var viw = Ti.UI.createView(checkboxspecs)
    specs.width =  checkboxspecs.width * 1.5;
    specs.height = checkboxspecs.height * 1.5;
    
    var outerview = Ti.UI.createView({
        width: specs.width * 1.5,
        height: specs.height * 1.5,
    })
    var clickview = Ti.UI.createView({
        width:checkboxspecs.width,
        height:checkboxspecs.height
    })
    outerview.add(viw)
    outerview.add(imageView)
    outerview.add(clickview)
    
    function togglecheck () {
        if(!viw.checked) {
            viw.checked = true;
            imageView.opacity = 1;
            
        }
        else {
            viw.checked = false;
            imageView.opacity = 0;
        }           
    }
    clickview.addEventListener("click",togglecheck)
    return outerview
}

var checkbox = createCheckbox({},{
    width:20,
    height:20,
    borderRadius:3,
    border:2
},"checkbox.gif")

win.add(checkbox)

win.open()

Save the image as "checkbox.gif" and put it in the Resources folder (really, create a new one) enter image description here

Community
  • 1
  • 1
Moritz Roessler
  • 8,542
  • 26
  • 51
0

According to this question, there are no checkboxes in iOS. You probably want to use the UI switch.

Community
  • 1
  • 1
Marcus Riemer
  • 7,244
  • 8
  • 51
  • 76