Rx第八章

Rx第八章

App架构

我们不使用任何MVC,MVP,或者MVVM模式。因为那不是这本书的目的,因此我们的Activity类将包含我们需要创建和展示用户列表的所有逻辑。

项目目标

我们将在已有的例子中创建一个新的Activity。这个Activity将通过StackExchange API从stackoverflow检索出最活跃的10位用户。App使用这些信息来展示一个包含用户头像、姓名、名望数以及住址的列表。对每一位用户,app使用OpenWeatherMap API来检索该用户住址当地的天气预报,并显示一个小天气图标。基于从StackOverflow检索的信息,app对列表中的每一位用户提供一个onClick事件,打开他们在个人信息中设定的个人网站或者Stack Overflow的个人主页。

创建Activity类

我们将在onCreate()方法里创建SwipeRefreshLayoutRecyclerView;我们有一个refreshList()方法来处理用户列表的获取和展示,showRefreshing()方法来管理进度条和RecyclerView的显示。

我们的refreshList()函数看起来如下:

private void refreshList() { 
    showRefresh(true);
    mSeApiManager.getMostPopularSOusers(10)
        .subscribe(users -> { 
            showRefresh(false);
            mAdapter.updateUsers(users);
        }, error -> { 
            App.L.error(error.toString());
            showRefresh(false);
        });
}

我们显示了进度条,从StackExchange API 管理器观测用户列表。一旦获取到列表数据,我们开始展示它并更新Adapter的内容并让RecyclerView显示为可见。

创建RecyclerView Adapter

我们从REST API获取到数据后,我们需要把它绑定View上,并用一个适配器填充列表。我们的RecyclerView适配器是标准的。它继承于RecyclerView.Adapter并指定它自己的ViewHolder

public static class ViewHolder extends RecyclerView.ViewHolder {
    @InjectView(R.id.name) TextView name;
    @InjectView(R.id.city) TextView city;
    @InjectView(R.id.reputation) TextView reputation;
    @InjectView(R.id.user_image) ImageView user_image;
    public ViewHolder(View view) { 
        super(view);
        ButterKnife.inject(this, view); 
    }
}

我们一旦收到来自API管理器的数据,我们可以设置界面上所有的标签:name,cityreputation

为了展示用户的头像,我们将使用Sergey Tarasevich写的Universal Image Loader。实践证明,UIL是非常有名的好用的图片管理库。我们也可以使用Square公司的Picasso,Glide或者Facebook公司的Fresco。取决于你自己的喜好。最关键的是无需重复造轮子:库能够方便开发者并让他们更快速实现目标。

在我们的适配器中,我们可以这样:

@Override
public void onBindViewHolder(SoAdapter.ViewHolder holder, int position) {
    User user = mUsers.get(position);
    holder.setUser(user); 
}

ViewHolder,我们可以这样:

public void setUser(User user) { 
    name.setText(user.getDisplayName());
    city.setText(user.getLocation());
    reputation.setText(String.valueOf(user.getReputation()));
    
    ImageLoader.getInstance().displayImage(user.getProfileImage(), user_image);
}

此时,我们可以允许代码获得一个用户列表,正如下图所示:

检索天气预报

我们加大难度,将当地城市的天气加入列表中。OpenWeatherMap是一个灵活公共在线天气API,我们可以查询许多有用的预报信息。

和往常一样,我们将使用Retrofit映射到API然后通过RxJava来访问它。至于StackExchange API,我们将创建interfaceRestAdapter和一个灵活的管理器:

public interface OpenWeatherMapService {
    @GET("data2.5/weather")
    Observable<WeatherResponse> getForecastByCity(@Query("q") String city);
}

这个方法用城市名字作为参数提供当地的预报信息。我们像下面这样将接口和RestAdapter类绑定在一起:

RestAdapter restAdapter = new RestAdapter.Builder()
        .setEndpoint("http://api.openweathermap.org")
        .setLogLevel(RestAdapter.LogLevel.BASIC)
        .build();
mOpenWeatherMapService = restAdapter.create(OpenWeatherMapService.class);

像以前一样,我们只有两件事需要立马去做:设置API端口和log级别。

OpenWeatherMapApiManager类将提供下面的方法:

public Observable<WeatherResponse> getForecastByCity(String city) {
    return mOpenWeatherMapService.getForecastByCity(city)
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread());
}

现在,我们有了用户列表,我们可以根据城市名来查询OpenWeatherMap获得天气预报信息。下一步是修改我们的ViewHolder类来为每位用户展示相应的天气图标。

我们使用这些工具方法先验证用户主页信息并获得一个合法的城市名字:

private boolean isCityValid(String location) {
    int separatorPosition = getSeparatorPosition(location);
    return !"".equals(location) && separatorPosition > -1; 
}

private int getSeparatorPosition(String location) { 
    int separatorPosition = -1;
    if (location != null) {
        separatorPosition = location.indexOf(","); 
    }
    return separatorPosition; 
}

private String getCity(String location, int position) {
    if (location != null) {
        return location.substring(0, position); 
    } else {
        return ""; 
    }
}

借助一个有效的城市名,我们可以用下面命令来获得我们所需要天气的所有数据:

OpenWeatherMapApiManager.getInstance().getForecastByCity(city)

用天气响应的结果,我们可以获得天气图标的URL:

getWeatherIconUrl(weatherResponse);

用图标URL,我们可以检索到图标本身:

private Observable<Bitmap> loadBitmap(String url) {
    return Observable.create(subscriber -> {
        ImageLoader.getInstance().displayImage(url,city_image, new ImageLoadingListener() { 
            @Override
            public void onLoadingStarted(String imageUri, View view) {
            }
            
            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                subscriber.onError(failReason.getCause()); 
            }
            
            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                subscriber.onNext(loadedImage);
                subscriber.onCompleted(); 
            }
            
            @Override
            public void onLoadingCancelled(String imageUri, View view) {
                subscriber.onError(new Throwable("Image loading cancelled"));
            }
         });
    });
}

这个loadBitmap()返回的Observable可以链接前面一个,并且最后我们可以为这个任务返回一个单独的Observable:

if (isCityValid(location)) {
    String city = getCity(location, separatorPosition);
    OpenWeatherMapApiManager.getInstance().getForecastByCity(city)
        .filter(response -> response != null)
        .filter(response -> response.getWeather().size() > 0)
        .flatMap(response -> {
            String url = getWeatherIconUrl(response);
            return loadBitmap(url);
        })
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
    .subscribe(new Observer<Bitmap>() {
    
        @Override
        public void onCompleted() {
        }
        
        @Override
        public void onError(Throwable e) {
            App.L.error(e.toString()); 
        }
        
        @Override
        public void onNext(Bitmap icon) {
            city_image.setImageBitmap(icon); 
        }
    });
}

运行代码,我们可以在下面列表中为每个用户获得新的天气图标:


打开网站

使用用户主页包含的信息,我们将会创建一个onClick监听器来导航到用户web页面,如果有的话,否则打开在Stack Overflow上的个人主页。

为了实现它,我们简单实现Activity类的接口,用来在适配器触发Android的onClick事件。

我们的Adapter ViewHolder指定这个接口:

public interface OpenProfileListener {
    public void open(String url); 
}

Activity实现它:

[...] implements SoAdapter.ViewHolder.OpenProfileListener { [...]
    mAdapter.setOpenProfileListener(this); 
[...]

@Override
public void open(String url) {
    Intent i = new Intent(Intent.ACTION_VIEW);
    i.setData(Uri.parse(url)); 
    startActivity(i);
}

Activity收到URL并用外部Android浏览器打开它。我们的ViewHolder负责在用户列表的每个卡片上创建OnClickListener并检查我们是打开Stack Overflow用户主页还是外部个人站:

mView.setOnClickListener(view -> { 
    if (mProfileListener != null) {
        String url = user.getWebsiteUrl();
        if (url != null && !url.equals("") && !url.contains("search")) {
            mProfileListener.open(url); 
        } else {
            mProfileListener.open(user.getLink()); 
        }
    }
)};

一旦我们点击了,我们将直接重定向到预期的网站。在Android上,我们可以用RxAndroid的一种特殊形式(ViewObservable)以更加响应式的方式实现同样的结果。

ViewObservable.clicks(mView)
    .subscribe(onClickEvent -> {
    if (mProfileListener != null) {
        String url = user.getWebsiteUrl();
        if (url != null && !url.equals("") && !url.contains("search")) { 
            mProfileListener.open(url);
        } else {
            mProfileListener.open(user.getLink());
        } 
    }
});

上面两块代码片段是等价的,你可以选择最喜欢的方式来实现。

与REST无缝结合-RxJava和Retrofit

在上一章中,我们学习了如何使用调度器在不同于UI线程的线程上操作。我们学习了如何高效的运行I/O任务而不用阻塞UI以及如何运行耗时的计算任务而不耗损应用性能。在最后一章中,我们将创建一个最终版的应用实例,用Retrofit映射远程API,异步查询数据,轻松创造一个丰富的UI。

Retrofit

Retrofit是Square公司专为Android和Java设计的一个类型安全的REST客户端。它帮助你轻松地与任意REST API交互,并完美兼容RxJava:所有的JSON响应对象都被映射成原始的Java对象,并且所有的网络调用都基于Rxjava Observable这些对象。

使用API文档,我们可以定义我们从服务器接收的JSON响应数据。为了很容易的将JSON响应数据映射为我们的Java代码,我们将使用jsonschema2pojo, 这个服务将灵活地生成所有与JSON响应数据相映射的Java类。

当我们把所有的Java model准备好后,我们就可以开始建立Retrofit。Retrofi使用标准的Java接口来映射API路由。例如例子中,我们将使用来自API的一个路由,下面是我们Retrofit的接口:

public interface StackExchangeService {
    @GET("/2.2/users?order=desc&sort=reputation&site=stackoverflow")
    Observable<User sResponse> getMostPopularSOusers(@Query("pagesize") int howmany);
}

interface接口只包含一个方法,即getMostPopularSOusers。这个方法用整型howmany作为一个参数并返回UserResponse的Observable。

当我们有了interface,我们可以创建RestAdapter类,为了更清楚的组织我们的代码,我们创建一个SeApiManager函数提供一种更适当的方式来和StackExchange API交互。

public class SeApiManager {
    private final StackExchangeService mStackExchangeService;

    public SeApiManager() {
        RestAdapter restAdapter = new RestAdapter.Builder()
            .setEndpoint("https://api.stackexchange.com")
            .setLogLevel(RestAdapter.LogLevel.BASIC)
            .build();
        mStackExchangeService = restAdapter.create(StackExchangeService.class);
    }

    public Observable<List<User>> getMostPopularSOusers(int howmany) {
        return mStackExchangeService
        .getMostPopularSOusers(howmany)
        .map(UsersResponse::getUsers)
        .subscribeOn(Schedulers.io())
        .observeOn(AndroidSchedulers.mainThread());
    }
}

为了简化例子,我们不再将这个类设计为它本该设计成的单例。使用依赖注入解决方案,如Dagger2,可使代码质量更高。

创建RestAdapter类,需要对客户端API设置几个重要的方面。这个例子中,我们设置了endpointlog level。由于这个例子中URL只是硬编码,像这样使用外部资源来存储数据很重要。避免在代码中硬编码字符串是一个好的实践。

Retrofit把RestAdapter类和我们的API接口绑定在一起后就完成了创建。它返回给我们一个对象用来请求API。我们可以选择直接暴露这个对象,或者以某种封装方式来限制对它的访问。在这个例子中,我们封装它并只暴露getMostPopularSOusers方法。这个方法执行查询,使用Retrofit解析JSON响应数据。获得用户列表,并返回给订阅者。如你所见,使用Retrofit、RxJava和Retrolambda,我们几乎没有模板代码:它非常紧凑而且可读性很高。

现在,我们已经有一个API管理者来提供一个响应式的方法,它从远程API获取数据并给I/O调度器,解析映射最后为我们的消费者提供一个简洁的用户列表。

总结

我们的旅程结束了。相信你已经准备好将你的Java应用带到一个新的代码质量水平。你可以享受一个新的编程模式并把更流畅的思维方式应用到日常编程生活中。RxJava提供了一种以面向时序的方式考虑数据的机会:所有事情都是持续变化的,数据在更新,事件在触发,然后你就可以创建事件响应式的、灵活的、运行流畅的App。

刚开始切换到RxJava看起来困难并且耗时,但我们已经体验到了如何通过响应式的方式有效地处理日常问题。现在你可以把你的旧代码迁移到RxJava上:给这些同步getters一种新的响应式。

RxJava是一个正在不断发展和扩大的世界。还有许多方法我们还没有去探索。有些方法甚至还没有,通过RxJava,你可以创建你自己的操作符并把他们发展地更远。

Android是一个好玩的地方,但是它也有局限性。作为一个Android开发者,你可以用RxJava和RxAndroid克服其中的许多。我们用AndroidScheduler只简单提了下RxAndroid,除了在最后一章,你了解了ViewObservable。RxAndroid给了你许多:例如,WidgetObservableLifecycleObservable。往后将它发展地更长远的任务就取决于你了。

谨记可观测序列就像一条河:它们是流动的。你可以“过滤”(filter)一条河,你可以“转换”(transform)一条河,你可以将两条河合并(combine)成一个,然后依然畅流如初。最后,它就成了你想要的那条河。

“Be Water,my friend”

            --Bruce Lee


































最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,790评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • 前言我从去年开始使用 RxJava ,到现在一年多了。今年加入了 Flipboard 后,看到 Flipboard...
    占导zqq阅读 9,159评论 6 151
  • 今天注定是一个令人沮丧的日子,和老爷山杂志主编约好校正自己的一篇稿子。 这篇稿子是一个采访稿,采访对象是一位诗人,...
    梅影k阅读 222评论 0 0
  • 学习笔记 成功合成了视频,然而视频打不开
    CoderAPang阅读 3,574评论 1 0