如何在touchStart上启用按钮聚焦

Question

我已经创建了一个按钮，我需要一些来自按钮的响应，比如，在触摸按钮时，按钮焦点应该可以像改变背景颜色一样。我该怎么做？

我的代码是，视图：

<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>

样式：

".button":{
    width: '50%',
    top: '25dp',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#808080',  
    backgroundGradient: {
        type: "linear",
        startPoint: { x: "0%", y:"0%"},
        endPoint:   { x: "0%", y:"100%"},
        colors: [
            { color: "#4F94CD", offset: 0.0 },
            { color: "#4F94CD", offset: 1.0 }
        ]
    }
}

控制器：

$.proceedButton.addEventListener('touchstart', function() { 
    $.proceedButton.isFocused = true;
  });  
  $.proceedButton.addEventListener('touchend', function() { 
     $.proceedButton.isFocused = false;
  }); 

上面的代码不起作用。只是我需要在触摸按钮时稍微改变一下背景颜色。

任何解决方案！！

Answer 1

使用此属性并传递颜色代码

backgroundSelectedColor : "RED"

对于普通视图，focusable必须为true。欲了解更多信息，请参阅http://docs.appcelerator.com/titanium/latest/#/api/Tatitanium.UI-Button-property-backgroundSelectedColor

我希望它能帮助你，

Answer 2

Alloy xml将类似于此

<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>

然后按钮属性会像这个

".button":{
 width: '50%',
 top: '25dp',
 borderRadius: 8,
 borderWidth: 1,
 borderColor: '#808080',
 backgroundSelectedColor : "red",
 backgroundSelectedImage : "/my_image.png",
 backgroundGradient: {
    type: "linear",
    startPoint: { x: "0%", y:"0%"},
    endPoint:   { x: "0%", y:"100%"},
    colors: [
        { color: "#4F94CD", offset: 0.0 },
        { color: "#4F94CD", offset: 1.0 }
    ]
  }
}

您可以将所选图像或背景颜色设置为触摸焦点。您不需要在控制器中编写的控制器代码。此外，对于某些对象，您也可以选择"颜色"。您还可以设置背景FocusedImage、

Answer 3

正如@CodeForFun所提到的，您可以使用按钮的backgroundSelectedColor属性。

以下是钛合金中按钮可以使用的所有状态。

• 已禁用：backgroundDisabledImage和backgroundDisabledColor
• 法线：backgroundImage和backgroundColor
• 焦点：背景焦点图像和背景焦点颜色
• 选定：backgroundSelectedImage和backgroundSelectedColor

希望这会有所帮助。

编辑：用法示例：

视图：

<Button class="button" >Proceed</Button>

TSS:

".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}