突出显示当前选定的文本字段 - 最佳方法

Highlighting current selected textfield - best approach

本文关键字：字段 文本 最佳 方法 显示      更新时间：2023-09-26

我正在尝试在移动设备（ios + android）上实现这样的效果：https://i.stack.imgur.com/PcoW8.png

当前所选文本字段具有蓝色有色图标 + 下划线的位置

所以我

的框架不支持对任何类型的位图图像进行灰色缩放，所以我需要在两个图像之间切换才能实现这种效果。

我当前的实现如下所示：

请注意钛合金MVC框架，但我猜基本逻辑应该是相似的。

我监听模糊/聚焦事件以切换当前图像

$.firstNameField.addEventListener('focus', function(e){
    swapImages($.firstNameField.getParent());
});
$.lastNameField.addEventListener('focus', function(e){
swapImages($.lastNameField.getParent());
});

然后我像这样交换图像：

/**
* Swaps between the images (..._0 and ..._1) of an ImageView nested in a
TableRow  
* ..._0 Greyscale image
* ..._0 Colour image
* @param e current TableViewRow
*/
function swapImages(e){
    var imagePathSplit = (e.children[0].image).split('_'); 
    var newImagePath = null;
    if(imagePathSplit[1] == "0.png")
        newImagePath = imagePathSplit[0] + "_1.png";
    else
        newImagePath = imagePathSplit[0] + "_0.png";
    e.children[0].image = newImagePath;
    return;
}

这看起来不是那么好，特别是因为我需要更多具有此功能的字段，我还想在字段之间实现 Tabbing（使用 Return 键 = NEXT），这将进一步膨胀以增加每个字段 1 个事件侦听器。

这样的事情如何理想地完成？我可以想到一种方法，即以数组形式在代码中创建字段，这应该有助于简化事情（不再为父/子级寻找太远，但这最终仍然会使用相当多的侦听器进行切换对吗？

编辑：忘记添加我如何设置文本字段：

<TableView id="paypalTable">
<TableViewSection>
    <TableViewRow id="firstNameView" class="tableRow">
        <ImageView id="firstNameIcon" class="textFieldIcon"/>
        <TextField id="firstNameField" class="textField"/>
    </TableViewRow>

我在我的一个项目中尝试了类似的东西。虽然我有一个合金项目，但我不得不使用经典方法来获得我想要的行为。

在我的控制器中：

var textFields            = [];
var yourTextFieldsArray   = [];
for (var i = 0; i < yourTextFieldsArray; i++) {
    //Set the selected state to false initially. Maybe you need another command for it.
    textFieldIsSelected[i] = false;
    //create your new view
    textFields[i] = Ti.UI.createView({
        top : topValues[i],
        width : Titanium.UI.FILL,
        height : height,
        id : i + 1,
        touchEnabled : true
    });
    textFields[i].addEventListener('click', function(e) {
        //Check the source id
        if (e.source.id - 1 > -1) {
            //use your function swapImages(e.source.id). Notice the slightly different parameter since you do not need the complete event.
            swapImages(e.source.id);
        }
}
function swapImages(id){
    //Check the the path variable as you did
    var imagePathSplit = (textFields[i-1].image).split('_'); 
    var newImagePath = null;
    if(imagePathSplit[1] == "0.png")
        newImagePath = imagePathSplit[0] + "_1.png";
    else
        newImagePath = imagePathSplit[0] + "_0.png";
    textFields[i-1].image = newImagePath;
}

此方法允许您对每个属性使用相同的事件侦听器。

请注意，我的 ID 从 1 开始，而不是从 0 开始。这是因为我必须为图像实现这样的行为，并且图像视图不接受id=0。我的猜测是TextViews也不会这样做，所以你应该坚持下去。进一步注意，您需要递减 id 才能在 textFields 数组中获取相应的对象。否则，您会收到越界错误。

您应该为 NEXT 事件再创建一个事件侦听器。以与第一个事件侦听器相同的方式实现它。也许代码并不完美，因为我是根据我的记忆编写的。如果还有任何问题，请随时在评论中提问。

相关文章：