RecycleView 综合使用案例（结合 ButterKnife、Retrofit、Picasso）

本文为菜鸟窝作者 吴威龙 投稿

菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程

如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。

前言

几个月前写了篇使用 RecyclerView 的简单介绍：【Android 基础】RecyclerView 概述以及使用步骤
现在结合 ButterKnife+Retrofit+Picasso+RecycleView 实现一个小案例。

关于 Retrofit、Picasso、ButterKnife 的详细使用请看我之前写的文章

【Android 进阶】Retrofit2 目前最优雅的网络请求框架

【Android 基础】图片加载框架之 Picasso 利器

【Android 进阶】ButterKnife-黄油刀

build.gradle 文件

apply plugin: 'android-apt'
.
.
.
    //butterknife
    compile 'com.jakewharton:butterknife:8.4.0'
    apt 'com.jakewharton:butterknife-compiler:8.4.0'

    //retrofit
    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.squareup.retrofit2:adapter-rxjava:2.1.0'
    compile 'com.squareup.retrofit2:converter-gson:2.1.0'

    // okHttp
    compile 'com.squareup.okhttp3:okhttp:3.4.1'
    compile 'com.squareup.okhttp3:logging-interceptor:3.4.1'

    //picasso
    compile 'com.squareup.picasso:picasso:2.5.2'

数据接口

// Callback 类型为自定义的 javaBean
public interface ApiService {

    public static final String BASE_URL = "http://112.xxx.22.238:8081/course_api/xxxplay/";

    @GET("featured")
    public Call> getApps(@Query("p") String jsonParam);

}

Http 帮助类

public class HttpManager {


    public OkHttpClient getOkHttpClient(){


        // log用拦截器
        HttpLoggingInterceptor logging = new HttpLoggingInterceptor();

        // 开发模式记录整个body，否则只记录基本信息如返回200，http协议版本等
        logging.setLevel(HttpLoggingInterceptor.Level.BODY);

        // 如果使用到HTTPS，我们需要创建SSLSocketFactory，并设置到client
//        SSLSocketFactory sslSocketFactory = null;

        return new OkHttpClient.Builder()
                // HeadInterceptor实现了Interceptor，用来往Request Header添加一些业务相关数据，如APP版本，token信息
//                .addInterceptor(new HeadInterceptor())
                .addInterceptor(logging)
                // 连接超时时间设置
                .connectTimeout(10, TimeUnit.SECONDS)
                // 读取超时时间设置
                .readTimeout(10, TimeUnit.SECONDS)

                .build();


    }

    public Retrofit getRetrofit(OkHttpClient okHttpClient){


        Retrofit.Builder builder = new Retrofit.Builder()
                .baseUrl(ApiService.BASE_URL)
                .addConverterFactory(GsonConverterFactory.create())
                .addCallAdapterFactory(RxJavaCallAdapterFactory.create())
                .client(okHttpClient);


        return builder.build();

    }
}

RecyclerView 中每个 item 的布局文件

单个 item 的布局样式如下，具体的 layout 文件就不贴出来了,放在 adapter 里面加载的。

RecyclerView 的 Adatper

使用过 Listview 和 RecyclerView 的同学都知道，除了上一点说到的每个 item 的布局外，还需要给 Listview 或 RecyclerView 写一个适配器，这适配器的写法也是有迹可循的，多写几次也就不陌生了
不懂 RecyclerView 的 Adatper 怎么写的请看下面代码中的注释哈，应该交代的挺清楚的。
下面示例 adapter 里面就使用了 Picasso 加载图片，使用 ButterKnife 绑定 view 省却了 FindViewById 的繁琐。

public class RecomendAppAdatper extends RecyclerView.Adapter {

    private Context mContext;
    private List mDatas;
    // 通过构造器传进来的数据

    private LayoutInflater mLayoutInflater;

    public RecomendAppAdatper(Context context, List datas) {

        this.mDatas = datas;
        this.mContext = context;
        mLayoutInflater = LayoutInflater.from(context);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(mLayoutInflater.inflate(R.layout.template_recomend_app, parent, false));
        //指定 viewHolder 的布局样式，并返回该 viewHolder
    }


    // 绑定数据，就是给控件设置值
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        AppInfo appInfo = mDatas.get(position);

//        holder.mImgIcon

        String baseImgUrl ="http://file.market.xiaomi.com/mfc/thumbnail/png/w150q80/";
        Picasso.with(mContext).load(baseImgUrl +appInfo.getIcon()).into(holder.mImgIcon);

        holder.mTextTitle.setText(appInfo.getDisplayName());
        holder.mTextSize.setText((appInfo.getApkSize() / 1024 /1024) +" MB");

    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }
    
    
    //onCreateViewHolder 指定 viewHolder 的布局样式之后，使用 ButterKnife 进行控件绑定
    public class ViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.img_icon)
        ImageView mImgIcon;
        @BindView(R.id.text_title)
        TextView mTextTitle;
        @BindView(R.id.text_size)
        TextView mTextSize;
        @BindView(R.id.btn_dl)
        Button mBtnDl;

        public ViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
}

在 Fragment 中使用 RecyclerView

/**
 * 通过 Retrofit 获取数据 datas ,再把数据丢给 adapter
 */

public class RecommendFragment extends Fragment  implements RecommendContract.View {

    @BindView(R.id.recycle_view)
    RecyclerView mRecyclerView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_recomend, container, false);
        ButterKnife.bind(this, view);

        initData();
        return view;
    }


    private void  initData(){

        HttpManager manager = new HttpManager();
        
        ApiService apiService = manager.getRetrofit(manager.getOkhttpClient()).create(ApiService.class);
        
        apiService.getApps("{'page':'0'}").enqueue(new Callback> response){
           @Override
           public void onResponse(Call> call, Response> response){
               > pageBean = response.body();
               List datas = pageBean.getDatas();
               
               //把网络请求获得的数据出去，准备给 Adatper 使用
               initRecycleView(datas);
           }
           @Override
           public void onFailure(Call> call, Throwable t){
             
           }
        });
    }

    private void initRecycleView(List datas){

        //为 RecyclerView 设置布局管理器
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

        //为 RecyclerView 设置分割线(这个可以对 DividerItemDecoration 进行修改，自定义)
        mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
        //动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());

        mAdatper = new RecomendAppAdatper(getActivity(),datas);

        mRecyclerView.setAdapter(mAdatper);

    }
.
.
.
  
}

成果如下

image

总结

这个案例的难点主要是 adapter 类的编写，其他比如 ButterKnife、Retrofit、Picasso 都是知道怎么使用即可。

撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg