Android仿淘宝搜索联想功能的示例代码

现在不少应用都提供了搜索功能,有些还提供了搜索联想。对于一个搜索联想功能,最基本的实现流程为:客户端通过监听输入框内容的变化,当输入框发生变化之后就会回调afterTextChanged方法,客户端利用当前输入框内的文字向服务器发起请求,服务器返回与该搜索文字关联的结果给客户端进行展示。服务器那边,一般要做内存缓存池,就是把有可能的结果都放在内存中。

效果图

APP这边也有几个重要的问题需要我们思考

  • 当搜索词为空时,不应该发起网络请求。
  • 在用户连续输入的情况下,可能会发起某些不必要的请求。例如用户输入了abc,那么按照上面的实现,客户端就会发起a、ab、abc三个请求。
  • 如果用户依次输入了ab和abc,那么首先会发起关键词为ab请求,之后再发起abc的请求,但是abc的请求如果先于ab的请求返回,那么就会造成用户期望搜索的结果为abc,但是我们最终希望得到的结果却是和ab关联的。

我的方案是采用retrofit2+rxjava2来实现的,针对这几个问题的大致思路如下,关于这几个操作符的解释,在Demo中有较完整的解释

  • 使用debounce操作符,当输入框发生变化时,不会立刻将事件发布出去,而是等待200ms,如果在这段事件内,输入框没有发生变化,那么才发送该事件;反之,则在收到新的关键词后,继续等待200ms。
  • 使用filter操作符,只有关键词的长度大于0时才把事件发布出去。filter作用:对源Observable产生的结果按照指定条件进行过滤,只有满足条件的结果才会提交给订阅者
  • 使用switchMap操作符,这样当发起了abc的请求之后,即使ab的结果返回了,也不会发送给下游,从而避免了出现前面介绍的搜索词和联想结果不匹配的问题。switchMap操作符会保存最新的Observable产生的结果而舍弃旧的结果。

下面贴出关键代码

 private void initEdt() {
    editText = (EditText) findViewById(R.id.edt);
    editText.addTextChangedListener(new TextWatcher() {
      @Override
      public void beforeTextChanged(CharSequence s, int start, int count, int after) {

      }

      @Override
      public void onTextChanged(CharSequence s, int start, int before, int count) {

      }

      @Override
      public void afterTextChanged(Editable s) {
        if (s.toString().trim().isEmpty()) {
          mPop.dismiss();
        } else {
          //输入内容非空的时候才开始搜索
          startSearch(s.toString());
        }
      }
    });

    mPublishSubject = PublishSubject.create();
    mPublishSubject.debounce(200, TimeUnit.MILLISECONDS) //这里我们限制只有在输入字符200毫秒后没有字符没有改变时才去请求网络,节省了资源
        .filter(new Predicate<String>() { //对源Observable产生的结果按照指定条件进行过滤,只有满足条件的结果才会提交给订阅者

          @Override
          public boolean test(String s) throws Exception {
            //当搜索词为空时,不发起请求
            return s.length() > 0;
          }

        })
        /**
         * flatmap:把Observable产生的结果转换成多个Observable,然后把这多个Observable
         “扁平化”成一个Observable,并依次提交产生的结果给订阅者

         *concatMap:操作符flatMap操作符不同的是,concatMap操作符在处理产生的Observable时,
         采用的是“连接(concat)”的方式,而不是“合并(merge)”的方式,
         这就能保证产生结果的顺序性,也就是说提交给订阅者的结果是按照顺序提交的,不会存在交叉的情况

         *switchMap:与flatMap操作符不同的是,switchMap操作符会保存最新的Observable产生的
         结果而舍弃旧的结果
         **/
        .switchMap(new Function<String, ObservableSource<String>>() {

          @Override
          public ObservableSource<String> apply(String query) throws Exception {
            return getSearchObservable(query);
          }

        })
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(new DisposableObserver<String>() {

          @Override
          public void onNext(String s) {
            //显示搜索联想的结果
            showSearchResult(s);
          }

          @Override
          public void onError(Throwable throwable) {

          }

          @Override
          public void onComplete() {

          }
        });
    mCompositeDisposable = new CompositeDisposable();
    mCompositeDisposable.add(mCompositeDisposable);
  }

  //开始搜索
  private void startSearch(String query) {
    mPublishSubject.onNext(query);
  }

  private Observable<String> getSearchObservable(final String query) {
    return Observable.create(new ObservableOnSubscribe<String>() {

      @Override
      public void subscribe(ObservableEmitter<String> observableEmitter) throws Exception {
        Log.d(TAG, "开始请求,关键词为:" + query);
        try {
          Thread.sleep(100); //模拟网络请求,耗时100毫秒
        } catch (InterruptedException e) {
          if (!observableEmitter.isDisposed()) {
            observableEmitter.onError(e);
          }
        }
        if (!(query.contains("科") || query.contains("耐") || query.contains("七"))) {
          //没有联想结果,则关闭pop
          mPop.dismiss();
          return;
        }
        Log.d("SearchActivity", "结束请求,关键词为:" + query);
        observableEmitter.onNext(query);
        observableEmitter.onComplete();
      }
    }).subscribeOn(Schedulers.io());
  }

下面是针对几个操作符,从官网download下来的东西,供大家一起学习

debounce

debounce原理类似于我们在收到请求之后,发送一个延时消息给下游,如果在这段延时时间内没有收到新的请求,那么下游就会收到该消息;而如果在这段延时时间内收到来新的请求,那么就会取消之前的消息,并重新发送一个新的延时消息,以此类推。

而如果在这段时间内,上游发送了onComplete消息,那么即使没有到达需要等待的时间,下游也会立刻收到该消息。

filter

filter的原理很简单,就是传入一个Predicate函数,其参数为上游发送的事件,只有该函数返回true时,才会将事件发送给下游,否则就丢弃该事件。

switchMap

switchMap的原理是将上游的事件转换成一个或多个新的Observable,但是有一点很重要,就是如果在该节点收到一个新的事件之后,那么如果之前收到的时间所产生的Observable还没有发送事件给下游,那么下游就再也不会收到它发送的事件了。
如上图所示,该节点先后收到了红、绿、蓝三个事件,并将它们映射成为红一、红二、绿一、绿二、蓝一、蓝二,但是当蓝一发送完事件时,绿二依旧没有发送事件,而最初绿色事件在蓝色事件之前,那么绿二就不会发送给下游。

  • flatmap:把Observable产生的结果转换成多个Observable,然后把这多个Observable“扁平化”成一个Observable,并依次提交产生的结果给订者
  • concatMap:flatMap操作符不同的是,concatMap操作符在处理产生的Observable时,采用的是“连接(concat)”的方式,而不是“合并(merge)”的方式,这就能保证产生结果的顺序性,也就是说提交给订阅者的结果是按照顺序提交的,不会存在交叉的情况
  • switchMap:与flatMap操作符不同的是,switchMap操作符会保存最新的Observable产生的结果而舍弃旧的结果

GitHub地址(完整Demo,欢迎下载)
https://github.com/zhouxu88/SearchDemo

rxjava2学习地址
https://github.com/ReactiveX/RxJava

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现带列表的地图POI周边搜索功能

    先看效果图:(以公司附近的国贸为中心点) 上面是地图,下面是地理位置列表,有的只有地理位置列表(QQ动态的位置),这是个很常见的功能.它有个专门的叫法:POI周边搜索. 实现: 这个效果实现起来其实很简单,不过需要你先阅读下地图的API,这里使用的是高德地图的Android SDK,SDK的配置这里不作讲解,文末会放一些链接供学习. 思路: 1.利用地图的定位功能,获取用户当前的位置 2.根据获得的位置信息调用POI搜索,获取位置列表 3.ListView展示位置列表 4.用户拖动地图,获取地图

  • 自定义搜索功能Android实现

    先看看效果图: 源码下载:自定义搜索功能 代码: SearchActivity.java package com.bzu.gxs.search.activity; import android.app.Activity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import and

  • Android仿QQ附近的人搜索展示功能

     1.概述 老规矩,先上图 原装货(就不录制gif了,大家可以自己在Q群助手开启共享地理位置,返回群聊天页面就看到看到附近的人): 看起来还是挺像的吧. 通过观察,我们可以获取得到如下关系 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollView来试试) 2.上面的扫描图,肯定是个ViewGroup(因为里面的小圆点是可以点击的,如果是View的话,对于这些小圆点的位置的判断,以及对小圆点缩放动画的处理都会超级麻烦,难以实现)

  • Android实现搜索功能并本地保存搜索历史记录

    本文实例为大家分享了Android实现搜索功能,并且需要显示搜索的历史记录,供大家参考,具体内容如下 效果图: 本案例实现起来很简单,所以可以直接拿来嵌入项目中使用,涉及到的知识点: - 数据库的增删改查操作 - ListView和ScrollView的嵌套冲突解决 - 监听软键盘回车按钮设置为搜索按钮 - 使用TextWatcher( )实时筛选 - 已搜索的关键字再次搜索不重复添加到数据库 - 刚进入页面设置软键盘不因为EditText而自动弹出 代码 RecordSQLiteOpenHel

  • Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu

  • Android SearchView搜索框组件的使用方法

    SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 本文就为大家分享了SearchView搜索框组件的使用方法,供大家参考,具体内容如下 效果: 代码SearchActivity.java package com.jialianjia.bzw.activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.

  • Android搜索框通用版

    之前项目总会遇到很多搜索框类的功能,虽然不是很复杂,不过每次都要去自己处理数据,并且去处理搜索框的变化,写起来也比较麻烦,今天来做一个比较简单的通用搜索栏. 先看下效果图: 没什么特别的,只是今天要做的就是简单的把搜索框的内容封装一下. 一.分析功能 先考虑一下,搜索框一般都是由一个搜索图标(一般都是一个放大镜),一个输入框和一个清除按钮组成.然后会通过监听输入框的变化去处理清除按钮的显示和隐藏并且去过滤相关的数据.最后去刷新适配器,显示过滤后的数据.基本上搜索框的功能都大同小异. 有了上边的分

  • Android遍历所有文件夹和子目录搜索文件

    本文实例为大家分享了android遍历所有文件夹和子目录来搜索文件,供大家参考,具体内容如下 java代码: import java.io.File; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget

  • Android仿淘宝搜索联想功能的示例代码

    现在不少应用都提供了搜索功能,有些还提供了搜索联想.对于一个搜索联想功能,最基本的实现流程为:客户端通过监听输入框内容的变化,当输入框发生变化之后就会回调afterTextChanged方法,客户端利用当前输入框内的文字向服务器发起请求,服务器返回与该搜索文字关联的结果给客户端进行展示.服务器那边,一般要做内存缓存池,就是把有可能的结果都放在内存中. 效果图 APP这边也有几个重要的问题需要我们思考 当搜索词为空时,不应该发起网络请求. 在用户连续输入的情况下,可能会发起某些不必要的请求.例如用

  • jQuery UI仿淘宝搜索下拉列表功能

    jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=

  • Android仿制淘宝滚动图文条的示例代码

    开篇废话 产品让我们将"我的"页面改版,上面加了一个广告条,非常类似淘宝"我的"页面的广告条,然后就自己写了一个,方法比较一般,如果大家有更好的办法请留言给我,谢谢. 滚动图文条之GitHub地址 ,帮我点个Star. 滚动图文条 大概效果就是下图这样. 滚动图文条 思路 写一个不可用手滑动的RecyclerView 使用Handler定时RecyclerView自动滑动到下一个Item 使用smoothScrollToPosition使其平滑地滑动 开始工作 做一

  • Android仿简书搜索框效果的示例代码

    前言 之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的.话不多说,直接上图. Activity 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • Android仿淘宝商品详情页效果

    本文实例为大家分享了Android仿淘宝商品详情页的具体代码,供大家参考,具体内容如下 Demo地址:先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件 <LinearLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="72dp" android:paddingTop="24

  • Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能

    需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始没什么思路,后来搜了一下,发现有好几种实现方法,最好的一种就是在ViewPager图片的后面再加一个view,然后滑动viewpager的时候,判断一下就行了. 附一个链接,我写的代码就是参考的这个,稍微改了一点点,先看看效果图. 实现起来比较简单,先写一个滑动加载详情的布局,然后在viewpager的instantiateItem里面判断一下,如果是最后一张,就显示加载详情的那个布局.不过需要注意的是,v

  • Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解

    一.淘宝商品详情页效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView的竖直排列,以及滑动事件的处理.如下图 三.具体实现 1.继承viewGroup自定义布局View 重写onMeasure()和onLayout方法,在onLayout方法中完成对两个子ScrollView的竖直排列布局,代码如下: 布局文件: <RelativeLayout xmlns:android="http:/

  • JS仿淘宝搜索框用户输入事件的实现

    淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin

  • Android仿淘宝view滑动至屏幕顶部会一直停留在顶部的位置

    在刚刚完成的项目中,在一个页面中,用户体验师提出引用户操作的入住按钮要一直保留在页面当中,不管页面能滚动多长都得停留在页面的可视区域.最终实现效果如下图所示:   如图中的红色框中的view始终会停留在页面中,如果滑动至页面的顶部,会一直保留在顶部. 下面来说下具体的实现思路: 思路:其实整个页面当中一共有两个视觉效果一样的View,通过滑动的位置来进行View的隐藏和显示来达到这种效果.整个页面的在上下滑动的过程中可以总结为两个状态,状态A(如图1所示),view2在可视区域内时,view1不

  • Android仿淘宝头条基于TextView实现上下滚动通知效果

    最近有个项目需要实现通知栏的上下滚动效果,仿淘宝头条的那种. 我从网上看了一些代码,把完整的效果做了出来.如图所示: 具体代码片段如下: 1.在res文件夹下新建anmin文件夹,在这个文件夹里创建两个文件 (1).anim_marquee_in.xml进入时动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/ap

随机推荐