MVP架构实现的Github客户端(3-功能实现)

前文搭建了项目的大体架构, 本文以实现github中最常用的搜索repository功能为例, 讲述下功能开发的整个过程以及关于MVP, Dagger2注入, Rx以及Retrofit, OkHttp等在准备工作中提到的一系列开源库的使用.

1, 功能梳理

基本功能类似于Github中的Search功能一致, 包含Repository/User/Issue/Code的搜索, 并可选排序方式(Best match, Most stars等等).

本文以搜索Repository为例, 默认按照Most Stars来排序列举搜索结果. 监听用户输入关键字, 当超过600ms没有输入时自动开始搜索, 按照stars数显示搜索结果.

目前只是以此功能来演示前文的MVP框架, 并不完善~
源码将持续更新, 完善功能. 欢迎star.

效果如下:
22_36_06

2, 从数据开始(M)

Github相关API

1
https://api.github.com/search/repositories?q=tetris+language:assembly&sort=stars&order=desc

根据API, 我们可以写Retrofit的接口以及相关Model类:

1
2
3
4
5
6
7
public interface RepoService {
 
@GET("search/repositories")
Observable<SearchResultResp> searchRepo(@Query("q") String key, @Query("sort") String sort,
@Query("order") String order, @Query("page") int page,
@Query("per_page") int pageSize);
}

其中Repo这个Model类就不贴了, 太长.
建议大家可以使用Android Studio的插件GsonFormat来生成:
14691122297910

Retrofit/OkHttpClient设计

大家都知道Retrofit一般会是单例, 会设置一个baseUrl.
考虑到Github客户端这个应用, 我会加入Trending这个功能, 但是官方并没有提供相关接口. 这个baseUrl就可以不同接口不一样.
另外使用的OkHttpClient也可能针对不同接口使用不同的interceptor.
在此做了一个小框架, 以便扩展(时刻牢记开闭原则).
14691124995290

  • ApiEndpoint 接口提供baseUrl.
  • BaseOkHttpClient 提供OkHttpClient实例.
  • BaseRetrofit 依赖ApiEndpoint和BaseOkHttpClient, 提供Retrofit实例.
  • GithubRepoRetrofit 是基于github的url的Retrofit实现.

数据层整体结构

综上, 数据层的整体结构如下:
14691126224351

  • RepoApi 定义业务接口.
  • RepoDataSource 实现RepoApi接口, 通过RepoService这个Retrofit格式的Restful接口取数据并可以在此做相应处理.

3, 绘制界面(V)

这部分就不细说了, 参看代码. 抽象了几个Base类:
14691130283128

4, 数据关联显示(P)

Presenter作为M和V的桥梁, 如2-搭建项目框架所说, 其拥有V和M的实例:
14691133030892

通过BaseMvpPresenter中的attachView来获取View实例, 在其构造函数中关联RepoApi这个M层接口.

在此抽象了一个RxMvpPresenter的基类, 主要用来解决Observable的unsubsribe问题.

5, 将MVP注入起来(Dagger2)

上面介绍完M, V, P这三个角色, 但是他们是怎么关联起来的呢? 或者说怎么实例化的呢? 有请Dagger2出场.

具体的Dagger2的使用请自行Google~, 基本作用如下几点. 我后续也会抽时间整理Dagger2的使用经验, 敬请期待.

下面简单说下我们这个功能中的注入情况:s

使用@Module和@Providers来对外提供依赖

搭建项目框架我们提到di的基本框架中, 就写了一个ApplicationModule用来对外提供Application级别的依赖, 在此我们可以将Retrofit Service放在这里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Module
public class ApplicationModule {
protected final Application mApplication;
 
public ApplicationModule(Application application) {
mApplication = application;
}
 
@Provides
Application provideApplication() {
return mApplication;
}
 
@Provides
@ApplicationContext
Context provideContext() {
return mApplication;
}
 
@Provides
@Singleton
RepoService provideRepoService(GithubRepoRetrofit retrofit) {
return retrofit.get().create(RepoService.class);
}
}

可以看到我们使用的是GithubRepoRetrofit这个Retrofit示例来创建Service的.
那么这个GithubRepoRetrofit是怎么实例化的呢? 往下看…

构造函数上的@Inject

当用@Inject来注解一个构造函数时, Dagger2会根据其构造参数来生成一个该实例. 这样做是为了避免定义太多的@Provides.
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
@Inject
public GithubRepoRetrofit(NormalHttpClient mHttpClient) {
this.mHttpClient = mHttpClient;
}
 
@Inject
public NormalHttpClient() {
}
 
@Inject
public SearchPresenter(RepoApi api) {
this.mRepoApi = api;
}

变量上的@Inject

上面两个原则用来提供实例, 这个就是用来请求实例的.
例如在SearchFragment里面我们需要一个SearchPresenter的实例:

1
2
@Inject
SearchPresenter mPresenter;

如上即可, 我们无需关注这个Presenter怎么实例化的. 这个给了我们很多想象空间, 我们可以随意替换这个Presenter的实现, 都不需要改动View的代码.

@Component的作用

以上讲了实例的产生和消费, 那么他们是怎么关联的呢? 这就需要@Component了, Component用来做实例关联和inject.
所有的@Component类都会在编译时生成一个Dagger开头的类, 里面根据Component定义来提供实例, 和注入关系.

例如我们的Component:

1
2
3
4
5
6
7
8
9
10
11
12
@PerActivity
@Component(
dependencies = ApplicationComponent.class,
modules = {ActivityModule.class, RepoModule.class, TrendingRepoModule.class})
public interface MainComponent extends ActivityComponent {
 
void inject(MostStarFragment mostStarFragment);
 
void inject(TrendingFragment trendingFragment);
 
void inject(SearchFragment searchFragment);
}

可以看到MainComponent依赖ApplicationComponent, 并从ActivityModule, RepoModule, TrendingRepoModule这三个Module中获取依赖实例.

另外提供inject关系到MostStarFragment, TrendingFragment, SearchFragment这三个使用者身上, 要使用这个inject关系, 还需在onCreate中inject一下:

1
2
3
4
5
6
7
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getComponent(MainComponent.class).inject(this);
 
mPresenter.attachView(this);
}

具体大家可以查看源码以及编译后生成的DaggerMainComponent.

6, RxBinding/RxJava的使用

在这个功能中, 使用RxBinding对EditText的Text Change事件做了事件流处理, 以便可以很方便的做延时, 过滤, 与查询接口合并等. 具体RxBinding的功能不在此细说了.

功能使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
public void bindSearchView(EditText searchTextView) {
mCompositeSubscription.add(RxTextView.textChanges(searchTextView)
.subscribeOn(AndroidSchedulers.mainThread())
.filter(new Func1<CharSequence, Boolean>() {
@Override
public Boolean call(CharSequence charSequence) {
return charSequence.length() > 0;
}
})
.debounce(600, TimeUnit.MILLISECONDS)
.subscribeOn(Schedulers.io())
.switchMap(new Func1<CharSequence, Observable<ArrayList<Repo>>>() {
@Override
public Observable<ArrayList<Repo>> call(CharSequence charSequence) {
String key = charSequence.toString();
return mRepoApi.searchMostStarredRepo(key, mLanguage)
.onErrorResumeNext(new Func1<Throwable, Observable<? extends ArrayList<Repo>>>() {
@Override
public Observable<? extends ArrayList<Repo>> call(Throwable throwable) {
getMvpView().showError(throwable);
AppLog.d("searchMostStarredRepo onErrorResumeNext:" + throwable);
return Observable.empty();
}
})
.doOnSubscribe(new Action0() {
@Override
public void call() {
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
getMvpView().showLoading();
}
});
}
})
.doOnTerminate(new Action0() {
@Override
public void call() {
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
getMvpView().dismissLoading();
}
});
}
});
}
})
.observeOn(AndroidSchedulers.mainThread())
.onErrorResumeNext(new Func1<Throwable, Observable<? extends ArrayList<Repo>>>() {
@Override
public Observable<? extends ArrayList<Repo>> call(Throwable throwable) {
AppLog.d("onErrorResumeNext:" + throwable);
getMvpView().showError(throwable);
return Observable.empty();
}
})
.subscribe(new ResponseObserver<ArrayList<Repo>>() {
@Override
public void onSuccess(ArrayList<Repo> repos) {
getMvpView().showContent(repos);
}
 
@Override
public void onError(Throwable e) {
AppLog.d("onError:" + e);
getMvpView().showError(e);
}
}));
 
}

看起来好长, 实际就几步:
1, 字符串长度过滤.
2, debounce操作, 即仅在过了一段指定的时间还没发射数据时才发射一个数据
3, 与查询接口做switchMap操作.

7, 结语

至此, 一个基于Dagger2, RxJava, Retrofit, OkHttp等library的MVP架构的实现已经完成. 这几篇文章只是提供给大家一个架构的方向, 欢迎大家fork.

另外GithubApp这个工程还会持续更新, 包括功能上和架构, 以及一些新的主流库的使用也会在这个工程上体现, 欢迎关注star.

posted @ 2017-05-02 15:41  天涯海角路  阅读(183)  评论(0)    收藏  举报