本文为菜鸟窝作者 吴威龙 投稿
菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程
如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。
前言
几个月前写了篇使用 RecyclerView 的简单介绍：【Android 基础】RecyclerView 概述以及使用步骤
现在结合 ButterKnife+Retrofit+Picasso+RecycleView 实现一个小案例。关于 Retrofit、Picasso、ButterKnife 的详细使用请看我之前写的文章
【Android 进阶】Retrofit2 目前最优雅的网络请求框架
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);
}
.
.
.
}
成果如下
image
总结
这个案例的难点主要是 adapter 类的编写，其他比如 ButterKnife、Retrofit、Picasso 都是知道怎么使用即可。
撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg
