1

我正在做一个钛项目。我需要一个自定义的搜索栏，如下所示。

设计文件

但是当我创建搜索栏时，它看起来像；

输出

我想更改取消按钮的图像。我搜索了很多自定义钛搜索栏，但找不到任何解决方案。

我正在通过以下方式创建搜索栏：

var searchLocation = Ti.UI.createSearchBar({ 
    showCancel:true,
    height:55,
    top:45,
    width:'102%',
    backgroundImage:"../../Images/bg_search.png",
    borderRadius:'5'
});

然后我尝试了一些不同的东西。

  1. 我创建了一个视图、一个没有取消按钮的搜索栏和一个自定义按钮。
  2. 将搜索栏添加到该视图

  3. 在该搜索栏的右侧添加了按钮。

    //holder view
var searchHolder = Ti.UI.createView({
   height   : 55,
   width    : '100%',
   top      : 45,
   backgroundImage:"../../Images/bg_header@2x.png",
   layout   : 'horizontal'
});

//search bar
var serLocation = Ti.UI.createSearchBar({
   height:55,
   top:0,
   width:'85%',
   backgroundImage:"../../Images/bg_header@2x.png"
});

//Calendar button
var calButton = Ti.UI.createButton({
   height   : 45,
   width    : 45,
   backgroundImage:"../../Images/nav_calendar.png"
});

searchHolder.add(serLocation);
searchHolder.add(calButton );

它运行良好。

但我正在寻找任何替代解决方案。是否有任何内置方法可以做到这一点？

提前致谢。

4

1 回答 1

0

没有针对此的内置方法。您的工作解决方案是最好的解决方案。

于 2012-12-20T18:37:22.767 回答