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

2,636 阅读5分钟

请先阅读1-准备工作2-搭建项目架构.

前文搭建了项目的大体架构, 本文以实现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.

效果如下:


功能演示

2, 从数据开始(M)

Github相关API

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

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

public interface RepoService {

    @GET("search/repositories")
    Observable 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来生成:


GsonFormat

Retrofit/OkHttpClient设计

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


data_architecture

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

数据层整体结构

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


M_architecture

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

3, 绘制界面(V)

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


V_architecture

4, 数据关联显示(P)

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


P_architecture

通过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放在这里:

@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.
例如:

@Inject
public GithubRepoRetrofit(NormalHttpClient mHttpClient) {
    this.mHttpClient = mHttpClient;
}

@Inject
public NormalHttpClient() {
}

@Inject
public SearchPresenter(RepoApi api) {
    this.mRepoApi = api;
}

变量上的@Inject

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

@Inject
SearchPresenter mPresenter;

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

@Component的作用

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

例如我们的Component:

@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一下:

@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的功能不在此细说了.

功能使用如下:

public void bindSearchView(EditText searchTextView) {
    mCompositeSubscription.add(RxTextView.textChanges(searchTextView)
            .subscribeOn(AndroidSchedulers.mainThread())
            .filter(new Func1() {
                @Override
                public Boolean call(CharSequence charSequence) {
                    return charSequence.length() > 0;
                }
            })
            .debounce(600, TimeUnit.MILLISECONDS)
            .subscribeOn(Schedulers.io())
            .switchMap(new Func1>>() {
                @Override
                public Observable> call(CharSequence charSequence) {
                    String key = charSequence.toString();
                    return mRepoApi.searchMostStarredRepo(key, mLanguage)
                                .onErrorResumeNext(new Func1>>() {
                                    @Override
                                    public Observable> 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>>() {
                @Override
                public Observable> call(Throwable throwable) {
                    AppLog.d("onErrorResumeNext:" + throwable);
                    getMvpView().showError(throwable);
                    return Observable.empty();
                }
            })
            .subscribe(new ResponseObserver>() {
                @Override
                public void onSuccess(ArrayList 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.

GithubApp源码