티타늄을 포함한 IOS7 스타일 인라인 피커

Question

티타늄에서 IOS7 스타일 인라인 피커를 구현 한 사람이 있습니까? 나는 힌트 나 데모에 대해 감사 할 것입니다.

예 : 달력에서 : http://i.stack.imgur.com/hUDZK.png

이 내 현재 코드입니다 :

var HintTextArea = require('hinttextarea'); 

var self = Ti.UI.createWindow({ 
    backButtonTitle: '',  
    title: L('addwish_title'), 
    backgroundColor: 'white', 
    layout: 'vertical', 
}); 

var title = Ti.UI.createTextField({ 
    hintText: L('addwish_title'), 
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE, 
    color: 'black', 
    top: 10, bottom: 10, left: 40, 
    width: 270, 
    height: Ti.UI.SIZE, 
    suppressReturn: true    
}); 
var rowTitle = Ti.UI.createTableViewRow({touchEnabled: false}); 
rowTitle.add(title); 

var category = Ti.UI.createLabel({ 
    text: L('addwish_category'), 
    touchEnabled: false, 
    color: 'black', 
    top: 10, bottom: 10, left: 40, 
    width: 270, 
    height: Ti.UI.SIZE 
}); 
var rowCategory = Ti.UI.createTableViewRow({}); 
rowCategory.add(category); 

var categoryPicker = Ti.UI.createPicker({ 
    //visible: false, 
    selectionIndicator: true, 
    //height: 0 
}); 
var data = []; 
data[0]=Ti.UI.createPickerRow({title:'Bananas'}); 
data[1]=Ti.UI.createPickerRow({title:'Strawberries'}); 
data[2]=Ti.UI.createPickerRow({title:'Mangos'}); 
data[3]=Ti.UI.createPickerRow({title:'Grapes'}); 
data[4]=Ti.UI.createPickerRow({title:'Bananas'}); 
data[5]=Ti.UI.createPickerRow({title:'Strawberries'}); 
data[6]=Ti.UI.createPickerRow({title:'Mangos'}); 
data[7]=Ti.UI.createPickerRow({title:'Grapes'}); 

categoryPicker.add(data); 

categoryPicker.setSelectedRow(0, 3); 

var rowPicker = Ti.UI.createTableViewRow({touchEnabled: false});  
rowPicker.add(categoryPicker); 

var description = HintTextArea.createTextArea({ 
    color: 'black', 
    font: {fontSize: 16}, 
    top: 10, left: 39, 
    height: 180, 
    width: 272, 
    suppressReturn: true 
}); 
var rowDescription = Ti.UI.createTableViewRow({touchEnabled: false}); 
rowDescription.add(description);  

var footerView = Ti.UI.createView({ 
    height : Ti.UI.SIZE 
}); 

var addWishButton = Ti.UI.createButton({ 
    title: L('addwish_add_button'), 
    height: 20, 
    top: 10, 
    bottom: 5 
}); 
footerView.add(addWishButton); 

// now add the complete tableview form 
var tableView = Ti.UI.createTableView({ 
    data: [rowTitle, rowCategory, rowDescription], 
    footerView : footerView, 
    allowsSelection: false 
}); 
self.add(tableView); 


// *** EVENTS 

category.addEventListener('click', function(e) { 
    Ti.API.debug('category event'); 
    // check if the picker is already visible 
    tableView.insertRowAfter(1, rowPicker); 

}); 

self.open(); 

Answer 1

문제는 false로 재산 touchEnabled 세트가보기를 레이블에 이벤트 리스너를 추가한다는 것입니다.

var category = Ti.UI.createLabel({ 
    text: L('addwish_category'), 
    color: 'black', 
    top: 10, bottom: 10, left: 40, 
    width: 270, 
    height: Ti.UI.SIZE 
}); 

또한 이벤트 리스너 :

// *** EVENTS 
var pickerEnabled = false; 
category.addEventListener('singletap', function(e) { 
    Ti.API.debug('category event'); 
    // check if the picker is already visible 
    if (pickerEnabled) { 
     tableView.deleteRow(rowPicker); 
     pickerEnabled = false; 
    } else { 
     tableView.insertRowAfter(1, rowPicker); 
     pickerEnabled = true; 
    } 
}); 

의 TableView의 라벨에 click 이벤트 몇 가지 문제가있다하지만 잘 singletap 작동으로 변경합니다.

또한 간단한 if 문을 추가하여 두 번째 선택기가 표에 추가되지 않도록했습니다.