Android 钛安卓-桌面视图滚动会弄乱内容
我试图实现的是一个2状态动态tableview,即一个具有普通和编辑模式的tableview。按“编辑”按钮,行将变为另一个视图,这将帮助我对它们进行一些编辑。再次按下按钮将返回正常状态 我的实现逻辑是在每个tableview行的顶部附加两个不同的视图,并分别显示/隐藏它们 问题是,当我上/下滚动时,tableview行内容混乱,其他行显示正常模式,其他行显示编辑模式。特别是,当我第一次打开窗口时,在任何滚动之前,我按下编辑按钮,然后向下滚动,普通视图和编辑视图都显示在一行中。 在任何情况下,滚动似乎都不能正确地更新tableview 我很确定这是一个常见的问题,但到目前为止我还没有找到解决办法。 我附上一个完整的代码样本,描述了这个问题Android 钛安卓-桌面视图滚动会弄乱内容,android,titanium,Android,Titanium,我试图实现的是一个2状态动态tableview,即一个具有普通和编辑模式的tableview。按“编辑”按钮,行将变为另一个视图,这将帮助我对它们进行一些编辑。再次按下按钮将返回正常状态 我的实现逻辑是在每个tableview行的顶部附加两个不同的视图,并分别显示/隐藏它们 问题是,当我上/下滚动时,tableview行内容混乱,其他行显示正常模式,其他行显示编辑模式。特别是,当我第一次打开窗口时,在任何滚动之前,我按下编辑按钮,然后向下滚动,普通视图和编辑视图都显示在一行中。 在任何情况下,滚
NAVBAR_HEIGHT = 44;
TABBAR_HEIGHT = 52;
TABLEVIEW_ROW_WIDTH = 248;
TABLEVIEW_ROW_HEIGHT = 57;
FONT_NAVBAR = {fontSize:'17dp', fontWeight:'bold'};
FONT_ROW_NAME = FONT_TEXT_BOLD = {fontSize:'14dp', fontWeight:'bold'};
FONT_ROW_NUM = FONT_TEXT_NORMAL = {fontSize:'14dp', fontWeight:'normal'};
FONT_TEXT_BOLD_LARGE = {fontSize:'17dp', fontWeight:'bold'};
FONT_TEXT_NORMAL_LARGE = {fontSize:'17dp', fontWeight:'normal'};
FONT_TEXT_NORMAL_EXTRA_LARGE = {fontSize:'28dp', fontWeight:'normal'};
var tabledata = [];
var self = Ti.UI.createWindow({
navBarHidden:true
});
var navbar = Ti.UI.createView({
width:Ti.UI.FILL, height:NAVBAR_HEIGHT,
top:0,
backgroundColor:'blue'
});
var title = Ti.UI.createLabel({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
text:title,
font: FONT_NAVBAR,
color:'white'
});
var btn_edit = Ti.UI.createButton({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
right:10,
title:'Edit'
});
var btn_edit_done = Ti.UI.createButton({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
right:10,
title:'Edit done',
visible: false
});
var tableview = Ti.UI.createTableView({
width:TABLEVIEW_ROW_WIDTH,
top:isWidescreen() ? (NAVBAR_HEIGHT+40) : (NAVBAR_HEIGHT+50),
bottom:isWidescreen() ? 40+TABBAR_HEIGHT : 50+TABBAR_HEIGHT,
backgroundColor:'transparent'
});
var footer = Ti.UI.createView({
width:Ti.UI.FILL, height:TABBAR_HEIGHT,
bottom:0,
backgroundColor:'blue'
});
self.addEventListener('open', function(){
navbar.add(title);
navbar.add(btn_edit); navbar.add(btn_edit_done);
self.add(navbar);
self.add(tableview);
self.add(footer);
populateTable();
});
btn_edit.addEventListener('click', function(){
btn_edit.hide();
btn_edit_done.show();
tableview.editing = (btn_edit.type=='delete_move') ? true : false;
tableview.moving = true;
if (tableview.data.length != 0)
switch_tableview_content('edit');
});
btn_edit_done.addEventListener('click', function(){
btn_edit_done.hide();
btn_edit.show();
tableview.editing = false;
tableview.moving = false;
if (tableview.data.length != 0)
switch_tableview_content('edit_done');
});
function switch_tableview_content(type)
{
var rows = tableview.data[0].rows;
//alert('elements are ' + rows.length);
//for (var i=0; i<rows.length; i++) alert(rows[i].type+":"+rows[i].place);
switch (type)
{
case 'edit':
Ti.App.edit_mode = true;
for (var i=0; i<rows.length; i++)
{
//alert('hiding: ' + rows[i].type+":"+rows[i].place);
rows[i].content_view.hide();
rows[i].content_view_on_edit.show();
}
break;
case 'edit_done':
Ti.App.edit_mode = false;
for (var i=0; i<rows.length; i++)
{
rows[i].content_view_on_edit.hide();
rows[i].content_view.show();
}
break;
default: //do nothing
}
}
var zonesTable = [
{type:"Zone 1", place:"ΜΕ ΚΑΘΥΣΤΕΡΗΣΗ"},
{type:"Zone 2", place:"ΑΜΕΣΗ"},
{type:"Zone 3", place:"ΑΜΕΣΗ"},
{type:"Zone 4", place:"ΑΜΕΣΗ"},
{type:"Zone 5", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
{type:"Zone 6", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
{type:"Zone 7", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
{type:"Zone 8", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
{type:"Zone 17", place:"Ραντάρ"},
{type:"Zone 18", place:"Ραντάρ"},
{type:"Zone 19", place:"Ραντάρ"},
{type:"Zone 20", place:"Ραντάρ"},
{type:"Zone 21", place:"Ραντάρ"},
{type:"Zone 22", place:"Ραντάρ"},
{type:"Zone 23", place:"Ραντάρ"},
{type:"Zone 24", place:"Ραντάρ"}
];
function populateTable()
{
tabledata = [];
for (var i=0; i<zonesTable.length; i++)
{
var cur_type = zonesTable[i].type;
var cur_place = zonesTable[i].place;
var row = Ti.UI.createTableViewRow({
width:TABLEVIEW_ROW_WIDTH, height:TABLEVIEW_ROW_HEIGHT,
backgroundColor:'white',
place:cur_place,
type:cur_type
});
var content_view = Ti.UI.createView({
width:Ti.UI.FILL, height:Ti.UI.SIZE,
left:15, right:15
});
var state_icon = Ti.UI.createView({
width:8, height:27,
left:0,
backgroundColor:'red'
});
var lbls_view = Ti.UI.createView({
width:105, height:Ti.UI.SIZE,
left:23,
layout:'vertical'
});
var type_lbl = Ti.UI.createLabel({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
left:0,
text:cur_type,
font:FONT_TEXT_BOLD,
color:'#414142'
});
var place_lbl = Ti.UI.createLabel({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
left:0,
text:cur_place,
font:FONT_TEXT_NORMAL,
color:'#414142'
});
var btn_switch = Ti.UI.createButton({
width:91, height:35,
right:0,
backgroundColor:'green'
});
lbls_view.add(type_lbl);
lbls_view.add(place_lbl);
content_view.add(state_icon);
content_view.add(lbls_view);
content_view.add(btn_switch);
//add an invisible layer that will be shown only on editing mode
var content_view_on_edit_outer = Ti.UI.createView({
width:Ti.UI.FILL, height:Ti.UI.SIZE,
touchEnabled:false,
visible:false
});
var content_view_on_edit = Ti.UI.createView({
width:Ti.UI.FILL, height:Ti.UI.SIZE,
left:12, right:12,
layout:'vertical'
});
var lbl_type_on_edit = Ti.UI.createLabel({
width:180, height:25,
left:5,
text:cur_type,
font:FONT_ROW_NAME,
color:'#414142'
});
var lbl_place_on_edit = Ti.UI.createLabel({
width:Ti.UI.SIZE, height:Ti.UI.SIZE,
left:5,
text:cur_place,
font:FONT_TEXT_NORMAL,
color:'#414142'
});
var btns_move = Ti.UI.createView({
width:70, height:35,
right:0
});
var btn_moveup = Ti.UI.createButton({
width:35, height:35,
left:0,
backgroundColor:'#414142'
});
var btn_movedown = Ti.UI.createButton({
width:35, height:35,
right:0,
backgroundColor:'#414142'
});
btns_move.add(btn_moveup);
btns_move.add(btn_movedown);
content_view_on_edit.add(lbl_type_on_edit);
content_view_on_edit.add(lbl_place_on_edit);
content_view_on_edit_outer.add(content_view_on_edit);
content_view_on_edit_outer.add(btns_move);
row.content_view = content_view;
row.content_view_on_edit = content_view_on_edit_outer;
row.add(content_view);
row.add(content_view_on_edit_outer);
tabledata.push(row);
}
tableview.setData([]);
tableview.setData(tabledata);
}
function isWidescreen()
{
var screenRatio = Ti.Platform.displayCaps.platformWidth / Ti.Platform.displayCaps.platformHeight;
return ( screenRatio <= 0.57);
}
self.open();
应用类型:移动
平台:安卓
钛合金SDK:3.2.3.GA
Tianium Studio:为可能感兴趣的任何人构建3.2.3.201404181442建议的解决方案对我帮助很大 简而言之,您必须在定义contentHeight属性的scrollview中包含tableview。不是很优雅的编码,但它可以工作