流水不争先,争的是滔滔不绝

Android如何实现搜索框功能

IM源码 macgrady 26℃

本文为大家详细介绍Android自定义View实现搜索框SearchView功能,主要给大家一个参考作用,IM开发中常常会在APP添加搜索功能,好友搜索,聊天记录搜索,文件搜索等等以方便用户快速获得需要数据。本套IM支持android, ios, pc三端登录,通信采用私有二进制通信协议数据传输以确保通信安全,服务器可根据企业需求单机或集群设计,界面简洁美观,操作简单便捷。本团队专注于IM即时通讯方向软件开发,经验丰富,可满足企业二次开发需求。现源码全部开放打包出售,DEMO联系, QQ:340554038

在一些场景下,我们希望我们的自动补全信息可以不只是纯文本,还可以这显示相应的图片和其他数据信息,因此Android给我们提供AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框。

根据上面这张图,简单分析一下自定义搜索框的结构与功能
1. 搜索界面大致由三部门组成,如图:输入框+(自动补全)提示框模糊搜索或者精准搜索+结果列表。
2. 提示框的数据与输入框输入的文本是实时联动的,而结果列表只有在每次进行搜索操作时才会更新数据

3. 输入框的UI应是动态的,即UI随着输入的文本的改变而改变,如:在未输入文本时,清除按钮应该是隐藏的;只有当框中有文本时才会显示。
4. 软键盘也应该是动态的,如完成搜索时应自动隐藏。
5. 选择提示框的选项会自动补全输入框,且自动进行搜索
6. (external)有热门搜索推荐/记录搜索记录的功能——热门搜索推荐列表只在刚要进行搜索的时候弹出,即未输入文本时,可供用户选择。

根据上面的分析,我们认为一个搜索框应该包含输入框和提示框两个部分。搜索框可以设置一个回调监听接口,当需要进行搜索操作时,调用监听者的search()方法,从而实现具体的搜索操作以及结果列表的数据联动。

代码实现:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android

       android:background=”#eee”

       android:layout_width=”match_parent”

       android:layout_height=”wrap_content”

       android:orientation=”vertical”>

  <LinearLayout

    android:background=”#eb4f38″

    android:layout_width=”match_parent”

    android:layout_height=”wrap_content”

    android:orientation=”horizontal”>

    <FrameLayout

      android:layout_weight=”1″

      android:layout_width=”0dp”

      android:layout_height=”wrap_content”>

      <EditText

        android:id=”@+id/search_et_input”

        android:layout_gravity=”center_vertical”

        android:layout_margin=”10dp”

        android:drawableLeft=”@drawable/search_icon”

        android:drawablePadding=”5dp”

        android:layout_width=”match_parent”

        android:layout_height=”wrap_content”

        android:background=”@drawable/search_edittext_shape”

        android:textSize=”16sp”

        android:imeOptions=”actionSearch”

        android:inputType=”text”

        android:hint=”请输入关键字”/>

      <ImageView

        android:visibility=”gone”

        android:layout_marginRight=”20dp”

        android:src=”@drawable/iv_delete_bg”

        android:id=”@+id/search_iv_delete”

        android:layout_gravity=”right|center_vertical”

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”/>

    </FrameLayout>

    <Button

      android:id=”@+id/search_btn_back”

      android:layout_marginRight=”10dp”

      android:layout_marginTop=”10dp”

      android:layout_marginBottom=”10dp”

      android:layout_gravity=”center_vertical”

      android:background=”@drawable/btn_search_bg”

      android:layout_width=”@dimen/btn_width”

      android:layout_height=”@dimen/btn_height”

      android:text=”返回”

</LinearLayout>

  <ListView

    android:visibility=”gone”

    android:id=”@+id/search_lv_tips”

    android:background=”@drawable/lv_search_tips_bg”

    android:layout_marginLeft=”20dp”

    android:layout_marginRight=”20dp”

    android:layout_marginBottom=”10dp”

    android:layout_width=”match_parent”

    android:layout_height=”200dp”>

  </ListView> </LinearLayout>

原文链接:https://github.com/yetwish/CustomSearchView

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。
点击这里给我发消息