【Android 进阶】ButterKnife+Retrofit+Picasso+RecycleView 实现一个小案例

前言

几个月前写了篇使用 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 类型为自定义的 javaBeanpublic interface ApiService {    public static final String BASE_URL = "http://112.xxx.22.238:8081/course_api/xxxplay/";    @GET("featured")    public Call<PageBean<AppInfo>> 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<RecomendAppAdatper.ViewHolder> {    private Context mContext;    private List<AppInfo> mDatas;    // 通过构造器传进来的数据    private LayoutInflater mLayoutInflater;    public RecomendAppAdatper(Context context, List<AppInfo> 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<PageBean<AppInfo>> response){           @Override           public void onResponse(Call<PageBean<AppInfo>> call, Response<PageBean<AppInfo>> response){               <PageBean<AppInfo>> pageBean = response.body();               List<AppInfo> datas = pageBean.getDatas();               //把网络请求获得的数据出去，准备给 Adatper 使用               initRecycleView(datas);           }           @Override           public void onFailure(Call<PageBean<AppInfo>> call, Throwable t){           }        });    }    private void initRecycleView(List<AppInfo> 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);    }...}

成果如下

总结

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

欢迎关注我的微信公众号，不止于技术，还有生活和远方