autojs-搜索框显示搜索建议这个布局可以使用frame，也可以使用horizontal；使用frame的话，调

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

牙叔教程简单易懂

目标

这是某乎的搜索界面，输入字符后会显示搜索建议，我们就照着他来仿写一个

分析布局

大布局为上下布局

上面是搜索框
下面是搜索建议

搜索框用到的控件

input
img
text

搜索框布局

外面的圆角可以用 card控件做圆角，也可以用bg属性做圆角背景，

这里我们选择card做圆角；

如果后面觉得card不合适，我们再换成bg;

在card里面有三个控件

左侧的放大镜
中间的文字
右侧的X按钮

这个布局可以使用frame，也可以使用horizontal；

使用frame的话，调整控件的距离就用margin;

使用horizontal的话，把X按钮靠右即可，不用太考虑margin

输入框就分析完了，我们先来写输入框

ui.layout(
  <horizontal>
    <card>
      <horizontal>
        <img></img>
        <input></input>
        <img></img>
      </horizontal>
    </card>
    <text text="取消"></text>
  </horizontal>
);

如果内置icon中没找到合适的，可以去 www.iconfont.cn/ 找，

比如右侧的X按钮，内置的icon中就没有，就得去iconfont里面找。

添加细节后的输入框

基本一样

输入框input隐藏光标

cursorVisible="false"

输入框input隐藏下划线

bg="#00000000"

搜索建议

毫无疑问，就是一个列表， list添加一个点击事件即可

搜索建议条目布局

左边放大镜
中间关键字灰色
右侧后候补词语黑色

搜索建议UI代码

<list id="list">
  <horizontal>
    <img></img>
    <text></text>
    <text></text>
  </horizontal>
</list>

两个text应该用一个horizontal包裹起来，因为他们的margin上下应该是一致的

<list id="list">
  <horizontal>
    <img></img>
    <horizontal>
      <text></text>
      <text></text>
    </horizontal>
  </horizontal>
</list>

添加细节后的搜索建议

基本一样

最后添加底部的蓝色文字

查看「autposjs」的搜索结果

<text w="*" marginTop="8" gravity="center" textColor="#175a9f" text="查看「{{keyword}}」的搜索结果"></text>

布局搞完了，下面来分析输入框和搜索建议的联动

联动

一开始只有一个输入框，输入文字后，显示搜索建议，点击建议，触发搜索

第一步：要让搜索建议隐藏，搜索建议数组为空即可；

let searchSuggestions = [];
ui.searchSuggestions.setDataSource(searchSuggestions);

同时，底部的蓝色文字也不应该出现；

ui.searchForOriginalKeywords.setVisibility(View.GONE);

第二步：输入文字后，显示搜索建议，这就是给数组里添加数据；

那么搜索建议从哪里来呢？

找别人提供的接口，或者去爬那些app的搜索建议；

同时也要显示底部的蓝色文字

ui.searchForOriginalKeywords.setVisibility(View.VISIBLE);

第三步：点击建议触发搜索，给list添加点击事件

ui.searchSuggestions.on("item_click", function (searchSuggestion) {
  // 这里写点击事件对应的操作
  toastLog(keyword + searchSuggestion);
});

同样给底部的蓝色文字添加点击事件

ui.searchForOriginalKeywords.click(function () {
  toastLog(keyword);
});

环境

雷电模拟器： 4.0.63

Android版本: 7.1.2

Autojs版本: 8.8.20

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程

声明

部分内容来自网络本教程仅用于学习, 禁止用于其他用途

微信公众号牙叔教程