【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 类型为自定义的 javaBean
public 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 都是知道怎么使用即可。

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