あなたの要件は、Titanium Mobile の Kitchen Sink の例 (Table_view_layout2.js) のサンプル ソース コードを使用する方が適していると思います。このソースは、Titanium Studio IDE 内で取得できます。コードをインポートできるサンプル セクションが左下にあります。コード内で Resources/iu/common/baseui/table_view_layout2.js に移動して、サンプルを表示またはデバッグし、その動作を確認します。バージョン 2.0.0 がリリースされてから、このコードが更新されたように見えるので、最新のものを入手してください。
テーブルのイベント リスナーが 1 つあり、クリックのソースをクエリします。この例は、画像ビューではなくビューといくつかのラベルを使用している画像を示しています。リスナーは、クリックされた項目を判別し、画面に表示します。そのロジックを変更して、達成しようとしていることを何でも実行できます。コードと同様に、for ループを使用してテーブルを作成するため、コードにいくつかの類似点を描くことができます。
特定のツイート ID については、行変数に配置できます。
var row = Ti.UI.createTableViewRow({
contentHeight: 'auto',
width: 320,
top:0,
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
myTweetId: tweetId // <================= Add here
});
次に、リスナー ロジックで e.rowData.myTweetid をクエリして、変更が必要なツイートを見つけます。
明確にするために、リスナーはテーブルの (tweetsTable) 'クリック' イベントで単一のリスナーに縮小され、ループ ロジックの外部で定義されます。
これをここに貼り付けたくはありませんでしたが、これがファイル内のコードです。私が言及した無料のソース コードで調べただけでなく、デバッガーで実行することもできます。
function tv_layout2() {
var win = Titanium.UI.createWindow();
win.barColor = '#385292';
if (Ti.Platform.osname !== 'mobileweb') {
//
// CREATE SEARCH BAR
//
var search = Titanium.UI.createSearchBar({
barColor:'#385292',
showCancel:false
});
search.addEventListener('change', function(e)
{
e.value; // search string as user types
});
search.addEventListener('return', function(e)
{
search.blur();
});
search.addEventListener('cancel', function(e)
{
search.blur();
});
}
var tableView;
var data = [];
// create first row
var row = Ti.UI.createTableViewRow();
row.backgroundColor = '#576996';
row.selectedBackgroundColor = '#385292';
row.height = 40;
var clickLabel = Titanium.UI.createLabel({
text:'Click different parts of the row',
color:'#fff',
textAlign:'center',
font:{fontSize:14},
width:'auto',
height:'auto'
});
row.className = 'header';
row.add(clickLabel);
data.push(row);
// when you click the header, scroll to the bottom
row.addEventListener('click',function()
{
tableView.scrollToIndex(40,{animated:true,position:Ti.UI.iPhone.TableViewScrollPosition.TOP});
});
// create update row (used when the user clicks on the row)
function createUpdateRow(text)
{
var updateRow = Ti.UI.createTableViewRow();
updateRow.backgroundColor = '#13386c';
updateRow.selectedBackgroundColor = '#13386c';
// add custom property to identify this row
updateRow.isUpdateRow = true;
var updateRowText = Ti.UI.createLabel({
color:'#fff',
font:{fontSize:20, fontWeight:'bold'},
text:text,
width:'auto',
height:'auto'
});
updateRow.className = 'updated_row';
updateRow.add(updateRowText);
return updateRow;
}
// create a var to track the active row
var currentRow = null;
var currentRowIndex = null;
// create the rest of the rows
for (var c=1;c<50;c++)
{
var row = Ti.UI.createTableViewRow();
row.selectedBackgroundColor = '#fff';
row.height = 100;
row.className = 'datarow';
row.clickName = 'row';
var photo = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/user.png',
top:5,
left:10,
width:50,
height:50,
clickName:'photo'
});
row.add(photo);
var user = Ti.UI.createLabel({
color:'#576996',
font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
left:70,
top:2,
height:30,
width:200,
clickName:'user',
text:'Fred Smith '+c
});
row.filter = user.text;
row.add(user);
var fontSize = 16;
if (Titanium.Platform.name == 'android') {
fontSize = 14;
}
var comment = Ti.UI.createLabel({
color:'#222',
font:{fontSize:fontSize,fontWeight:'normal', fontFamily:'Arial'},
left:70,
top:21,
height:50,
width:200,
clickName:'comment',
text:'Got some fresh fruit, conducted some business, took a nap'
});
row.add(comment);
var calendar = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/eventsButton.png',
bottom:2,
left:70,
width:32,
clickName:'calendar',
height:32
});
row.add(calendar);
var button = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/commentButton.png',
top:35,
right:5,
width:36,
clickName:'button',
height:34
});
row.add(button);
var date = Ti.UI.createLabel({
color:'#999',
font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
left:105,
bottom:5,
height:20,
width:100,
clickName:'date',
text:'posted on 3/11'
});
row.add(date);
data.push(row);
}
//
// create table view (
//
if (Ti.Platform.osname !== 'mobileweb') {
tableView = Titanium.UI.createTableView({
data:data,
search:search,
filterAttribute:'filter',
backgroundColor:'white'
});
} else {
tableView = Titanium.UI.createTableView({
data:data,
filterAttribute:'filter',
backgroundColor:'white'
});
}
tableView.addEventListener('click', function(e)
{
Ti.API.info('table view row clicked - source ' + e.source);
// use rowNum property on object to get row number
var rowNum = e.index;
var updateRow;
if (Ti.Platform.osname !== 'mobileweb') {
updateRow = createUpdateRow('You clicked on the '+e.source.clickName);
tableView.updateRow(rowNum,updateRow,{animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
} else {
updateRow = createUpdateRow('Row clicked');
tableView.updateRow(rowNum,updateRow);
}
});
win.add(tableView);
return win;
};
module.exports = tv_layout2;