【Android学习】案例中学习RxJava和Retrofit----妹纸+gank

昨天看了影魔的项目源码学了不少5.0特性知识。

原项目地址：

https://github.com/v1210012100/Gank.IO2

案例使用的是Gank.io的Api ：http://www.gank.io/api

拆出来可以做最基础的RxJava+Retrofit 的使用案例。

效果：

    

首先是Json数据，使用Gson快速生成JavaBean。

Main界面就是一个下拉刷新+RecyclerView

然后Item界面就是 CardView包裹着ImageView和一个TextView。

先写布局，略。。。

然后是Adapter，手写无优化Adapter，前些天看了鸿洋大神写的万能Adapter 才知道原来可以这样复用adapter

大神项目地址：https://github.com/hongyangAndroid/baseAdapter

图片加载使用Picasso.

咱这只是简单例子，来强化RxJava和Retrofit的使用，就从最基本的走起：

只有一张图，一段文字，先不写点击事件的接口：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder> {
    private Context context;
    private AllResult datas;

    public MyAdapter(Context context) {
        this.context = context;

    }
    public void setDatas(AllResult data)
    {

        this.datas=data;
    }

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View itemView = View.inflate(context, R.layout.android_item_layout, null);
        return new MyHolder(itemView);
    }

    @Override
    public void onBindViewHolder(MyAdapter.MyHolder holder, int position) {
        holder.setDataAndRefreshUI(datas.getResults().get(position));

    }

    @Override
    public int getItemCount() {
        if (datas != null)
            return datas.getResults().size();
        return 0;
    }

    public class MyHolder extends RecyclerView.ViewHolder {

        private TextView mTextView;
        private ImageView mImageView;

        public MyHolder(View itemView) {
            super(itemView);
            mImageView = (ImageView) itemView.findViewById(R.id.meizi);
            mTextView = (TextView) itemView.findViewById(R.id.Desc);
        }

        public void setDataAndRefreshUI(AllResult.Results data) {
            mTextView.setText(data.getDesc());
            // 自动加载图片
            Picasso.with(context)
                    .load(data.getUrl())
                    .error(R.drawable.error_pic)
                    .fit()
                    .centerCrop()
                    .into(mImageView);
        }
    }

}

接下来就是 创建Retrofit需要的接口：

public interface GankApi {
    @GET("data/{type}/{count}/{pageIndex}")
    Observable<AllResult> getAllDate(@Path("type") String type,
                                     @Path("count") int count,
                                     @Path("pageIndex") int pageIndex
    );
}

｛｝相当于占位符，和C语言中输出时 printf("%d", a);差不多一个意思

然后是创建Retrofit：

public class NetWork {

    public static GankApi gankApi;

    public static GankApi getGankApi() {
        if (gankApi == null) {
            Retrofit retrofit = new Retrofit.Builder()
                    .baseUrl("http://gank.io/api/")
                    .addCallAdapterFactory(RxJavaCallAdapterFactory.create())
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
            gankApi = retrofit.create(GankApi.class);
        }
        return gankApi;
    }

}

一切OK。就剩在代码中订阅调用了。

就俩控件，一个显示，一个触发获取数据的方法：

//刷新获取网络数据
private void getNetData(boolean loadMore) {
    swipe.measure(View.MEASURED_SIZE_MASK, View.MEASURED_HEIGHT_STATE_SHIFT);
    swipe.setRefreshing(true);
    if (loadMore) contentQuantity = contentQuantity + 10;
    NetWork.getGankApi().getAllDate("福利", contentQuantity, 1)
            .compose(this.<AllResult>bindToLifecycle())
            .subscribeOn(Schedulers.newThread())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(new Action1<AllResult>() {
                @Override
                public void call(AllResult allResult) {
                    mAdapter.setDatas(allResult);
                    mAdapter.notifyDataSetChanged();
                    swipe.setRefreshing(false);
                }
            });
}

到此一个简单的界面就实现了。

影魔的原案例是 图片和技术干货标题进行结合。

这对RxJava来说简直是小菜一碟，各种你想要的方案都有。

最简单就是zip操作符，不过图片和文字每次获取数量一定且相等，直接分别赋值就行。

也可以使用 combineLatest，将两次请求的数据弄给adapter。

这样的话就要改一改Adapter中的代码：

分别是图片和文字的，别忘了get，set方法

private List<AllResult.Results> picData = new ArrayList<>();
private List<AllResult.Results> textData = new ArrayList<>();

然后是ViewHolder绑定数据：

public void setDataAndRefreshUI(AllResult.Results picdata, AllResult.Results textdata) {
    mTextView.setText(textdata.getDesc());
    // 自动加载图片
    Picasso.with(context)
            .load(picdata.getUrl())
            .error(R.drawable.error_pic)
            .fit()
            .centerCrop()
            .into(mImageView);
}

然后代码中的请求是：

  Observable.combineLatest(NetWork.getGankApi().getAllDate("福利", contentQuantity, 1), NetWork.getGankApi().getAllDate("Android", contentQuantity, 1),
            new Func2<AllResult, AllResult, Void>() {
                @Override
                public Void call(AllResult PicResult, AllResult TextResult) {

                    mAdapter.setPicData(PicResult.getResults());
                    mAdapter.setTextData(TextResult.getResults());
                    return null;
                }
            })

            .compose(this.<Void>bindToLifecycle())
            .subscribeOn(Schedulers.newThread())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(new Action1<Void>() {
                @Override
                public void call(Void aVoid) {
                    mAdapter.notifyDataSetChanged();
                    swipe.setRefreshing(false);
                }

            });
}

我没做错误请求的处理，因为只是小栗子，真正项目中就不要使用Action了~

ActionX是有参无返回值，FunX是有参有返回值。

弄完之后的效果就是：（文字变成了Android文章的描述）

代码在这里可以下载： http://download.csdn.net/detail/u012970471/9519845